Web前端_配合swiper滑动插件实现同比例双指缩放图片

最新推荐文章于 2024-09-06 23:40:25 发布

原创

最新推荐文章于 2024-09-06 23:40:25 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

该博客介绍了如何配合Swiper滑动插件，利用自定义的scale.css和scale.js实现点击图片进入全屏并支持双指同比例缩放的功能。在遇到全屏图片被Swiper遮挡的问题时，通过调整最外层元素的z-index为0来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考过的一篇文章：https://blog.youkuaiyun.com/gl0ry/article/details/56055414

html实例代码:

缩放的图片需要放在class 为list 的div里面

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>图片缩放</title>
    <link rel="stylesheet" href="css/scale.css" type="text/css" />
</head>
<body>
    <div class="list">
         <img src="img/2.jpg" />
    </div>
    <section class="imgzoom_pack">
        <div class="imgzoom_x">X</div>
        <div class="imgzoom_img"><img src="" /></div>
    </section>
    <script src="js/scale.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function(event){
            ImagesZoom.init({
                "elem": ".list"
            });
        }, false);
    </script>
</body>
</html>

实现缩放需要导入 scale.css 和 scale.js

scale.css代码:

/**rest**/
body, ul, li, section, div{
    padding:0;
    margin:0;
}
body{
    font-family:Arial,Roboto,'Droid Sans','Hiragino Sans GB',STXihei,'sans-serif';
    width:100%;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-text-size-adjust:none;
}
ul,li{
    list-style:none;
}
img{
    border:0;
}
 
.list{
    width:100%;
    padding:10px 0;
}
.list li{
    display:block;
    margin-bottom:10px;
    box-shadow:0 1px 2px rgba(0,0,0,.1), 0 -1px 2px rgba(0,0,0,.1);
}
.list li img{
    width:100%;
    height:auto;
}
 
 
 
/*弹框样式*/
.imgzoom_pack{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background:rgba(0,0,0,.7);
    display:none;
}
.imgzoom_pack .imgzoom_x{
    color:#fff;
    height:30px;
    width:30px;
    line-height:30px;
    background:#000;
    text-align:center;
    position:absolute;
    right:5px;
    top:5px;
    z-index:10;
    cursor:pointer;
}
.imgzoom_pack .imgzoom_img{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}
.imgzoom_pack .imgzoom_img img{
    width:100%;
    position:absolute;
    top:50%;
}

scale.js的代码:

我对scale.js 做了一点修改实现了同比例缩放:

self.element.style.height = imgHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height

self.element.style.height = self.imgBaseHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height

(function(window, undefined){
    var document = window.document,
        support = {
            transform3d: ("WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix()),
            touch: ("