JQ版的图片预览

最新推荐文章于 2023-06-28 09:55:31 发布

zhengbingmei

最新推荐文章于 2023-06-28 09:55:31 发布

阅读量426

点赞数

分类专栏：前端开发文章标签：图片预览

原文链接：https://blog.csdn.net/qq_36800701/article/details/82998931

版权

前端开发专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="renderer" content="ie-stand">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=9" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>JQ版的图片预览</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fly-zomm-img.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
   *{
       margin: 0;
       padding: 0;
   }
</style>
</head>

<body>
   <div id="test">
       <div>
           <img src="img/1.jpg" width="100">
       </div>
   <div>
           <img src="img/2.jpg" width="100">
   </div>
   <div>
           <img src="img/3.jpg" width="100">
   </div>
   </div>

   <script>
   /**
   * H5图标浏览插件
   * 支持多图识别切换
   * 支持手势放大,切换
   */
   $(function (){
   $('#test').FlyZommImg({
           rollSpeed: 200,//切换速度
           miscellaneous: false,//是否显示底部辅助按钮
           closeBtn: true,//是否打开右上角关闭按钮
           hideClass: 'hide',//不需要显示预览的 class
           imgQuality: 'thumb',//图片质量类型 thumb 缩略图 original 默认原图
           slitherCallback: function (direction, DOM) {
               //左滑动回调两个参数第一个动向 'left,firstClick,close' 第二个当前操作DOM
               console.log(direction,DOM);
           }

   });
   })
   </script>
</body>
</html>

zhengbingmei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ版的图片预览

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><meta name="renderer" content="ie-stand"><m...
复制链接

扫一扫