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

2018-10-25  本文已影响0人  凉柠_da5d

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>

上一篇下一篇

猜你喜欢

热点阅读