html手机端点击图片放大并根据手势缩放 |
您所在的位置：网站首页 › html点击图片放大 › html手机端点击图片放大并根据手势缩放 |
html手机端点击图片放大并根据手势缩放
|
手机端实现点击图片放大根据手势放大缩小 效果如下 进入页面 背景是白色的 需要先引入一个js文件 网盘链接: https://pan.baidu.com/s/1Iqc9cwfJ1pNmWn0JQueDZw 提取码: xx4s html代码 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; } /*弹框样式*/ .imgzoom_pack { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, .7); display: none; } .imgzoom_pack .imgzoom_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; background: black; } .imgzoom_pack .imgzoom_img img { width: 100%; position: absolute; top: 50%; } .informBlock { margin: 0 11% 22px; width: 78%; text-align: center; } .informBlock img { margin-bottom: 5px; max-height: 250px; max-width: 100%; border-radius: 2%; } ImagesZoom.init({ "elem": ".informBlock" }); |
点击图片后放大并居中背景变为黑色 效果如下 
可以根据手势缩放 
演示完毕，上代码【本文地址】
今日新闻 |
推荐新闻 |