美文网首页
移动端可以点击放大的图片

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

作者: 凉柠_da5d | 来源:发表于2018-10-25 16:12 被阅读0次

    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>

    相关文章

      网友评论

          本文标题:移动端可以点击放大的图片

          本文链接:https://www.haomeiwen.com/subject/rdlctqtx.html