移动端可以点击放大的图片

1,本方法是用http://jqweui.com/extends#photos里面的方法来调用的,只是做个记录


2,首先引入jq文件和css文件

css文件

<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>

jq文件

<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>

<script type="text/javascript" src="js/jquery-weui.js" ></script>

<script type="text/javascript" src="js/swiper.min.js" ></script>

js代码


<script>

//初始化代码

$(function() {

    FastClick.attach(document.body);

  });

//图片放大

      var pb1 = $.photoBrowser({

        items: [

        //图片路径

          "./img/ad_auto.jpg",

          "./img/ad_home.jpg",

          "./img/ad_nba.jpg",

          "./img/ad_stock.jpg",

          "./img/ad_yuetu.jpg",

        ],

//可翻页

        onSlideChange: function(index) {

          console.log(this, index);

        },

        onOpen: function() {

          console.log("onOpen", this);

        },

        onClose: function() {

          console.log("onClose", this);

        }

      });

      //开始显示用的是第几张,这里是第0张开始就是第一张开始

      $("#pb1").click(function() {

        pb1.open(0);

      });

</script>

html代码

<div class='demos-content-padded'>

    <a href="javascript:;" id="pb1"><img src="img/ad_auto.jpg"/></a>

  </div>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。