2022年 9 月 16日- (星期五) / Published in css 设计, html 设计, 前端设计

如何使用Html CSS JS制作产品图片展示缩放效果cid1141-网页前端设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>product zooming effect</title>
    <link rel="stylesheet" href="https://code.5g-o.com/wp-content/uploads/2021/01/style-1.css">
</head>
<body>
    
    <div class="show" href="https://code.5g-o.com/wp-content/uploads/2020/12/project-item-06.jpg">
        <img src="https://code.5g-o.com/wp-content/uploads/2020/12/project-item-06.jpg" id="show-img" alt="">
    </div>
    
    <div class="small-img">
        <img src="https://code.5g-o.com/wp-content/uploads/2021/01/next-icon.png" class="icon-left" id="prev-img"
         alt="">
         <div class="small-container">
            <div id="small-img-roll">
                <img src="https://code.5g-o.com/wp-content/uploads/2020/12/project-item-06.jpg" class="show-small-img" alt="">
                <img src="https://code.5g-o.com/wp-content/uploads/2020/12/project-item-05.jpg" class="show-small-img" alt="">
                <img src="https://code.5g-o.com/wp-content/uploads/2020/12/project-item-03.jpg" class="show-small-img" alt="">
                <img src="https://code.5g-o.com/wp-content/uploads/2020/12/project-item-02.jpg" class="show-small-img" alt="">
            </div>               
         </div>
         <img src="images/next-icon.png" class="icon-right" id="next-img" alt="">
    </div>
    
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script src="https://code.5g-o.com/wp-content/uploads/2021/01/zoom-image.js"></script>
    <script src="https://code.5g-o.com/wp-content/uploads/2021/01/main.js"></script>
    
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.show{
    width: 400px;
    height: 400px;
}

.small-img{
    width: 350px;
    height: 70px;
    margin-top: 10px;
    position: relative;
    left: 25px;
        
}



.small-img .icon-left,
.small-img .icon-right{
    width: 12px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}


.small-img .icon-left{
    transform: rotate(180deg);
}

.small-img .icon-right{
    right: 0;
}

.small-img .icon-left:hover,
.small-img .icon-right:hover{
    opacity: 0.5;
}


.small-container{
    width: 310px;
    height: 70px;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}


.small-container div{
    width: 800%;
    position: relative;
}


.small-container .show-small-img{
    width: 70px;
    height: 70px;
    margin-right: 6px;
    cursor: pointer;
    float: left;
}

.small-container .show-small-img:last-of-type{
    margin-right: 0;
}

在线演示

让链接同时具备两种打开方式