您现在的地位: 365体育备用网址 > bet365体育在线, > 微信公众平台开拓 > 24.6.2世嘉国际滑动特效实现

24.6.2世嘉国际滑动特效实现_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > bet365体育在线, > 微信公众平台开拓 > 24.6.2世嘉国际滑动特效实现

24.6.2世嘉国际滑动特效实现

此节有 105 人学习过     参与评论

为了让横幅中的世嘉国际以滑动的形式展示出来,这需要用到Swipe JS组件。
Swipe JS 是一个轻量级的移动滑动组件,撑腰 1:1 的触摸移动,阻力以及防滑,能够让移动web应用展现鸿泰官方pt客户端的内容,能解决很多移动Web对滑动的需求。其官方网站为http://swipejs.com/。
为了让世嘉国际能够滑动,需要将横幅容器传递到Swipe函数中,同时设置相应的参数以操纵滑动效果。Swipe提供如下参数设置:
? startSlide:滑动的索引值,即从*值开头滑动,默认值为0
? speed:滑动的速度,默认值300毫秒
? auto:主动滑动,单位为毫秒
? continuous:是否循环滑动,默认值为true
? disableScroll:是否同意触摸时滚动屏幕,默认值flase
? stopPropagation:停止事情流传,默认值flase
? callback:回调函数
? transitionEnd:滑动过渡时调用的函数
对于横幅中的世嘉国际列表,其滑动操纵代码如下:

   <script>JavaScript">
      $(function(){
        new Swipe(document.getElementById('banner_box'), {
          speed:500,
          auto:3000,
          callback: function(){
            var lis = $(this.element).next("ol").children();
            lis.removeClass("on").eq(this.index).addClass("on");
          }
        });
      });
    </script>

上述代码中,将ID为“banner_box”的元素所包含的世嘉国际作为滑动对象,并且定义滑动速度为500毫秒,滑动间隔时间为3000毫秒,即每3秒钟换一张世嘉国际,每次换图时间为半秒钟,这样就相当于一个幻灯的效果了。
横幅中的世嘉国际滑动效果如图24-24所示,右图是第一张滑动切换到第二张时效果。

图24-24 世嘉国际滑动效果

如对本文有疑问,请提交到交流永利娱777402,广大热心网友会为你解答!! 点击进入永利娱777402


公布评论 (105人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换世嘉国际
最新评论
------分隔线----------------------------
微信公众平台开拓目录
条评论
Sitemap