数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  

iScroll手机网页左右滑动效果或者上下滑动效果

2014-11-28 17:13 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:JavaScript 上一篇:Sco.js - Bootstrap javascript组件的增强版 下一篇:escape()、encodeURI()、encodeURIComponent()区别详解

手机网页中有时需要实现局部滑动效果,比如导航,导航很多,又必需一行显示,如果不使用滑动效果,用户就无法切换栏目,进入访问。局部滑动效果,还有很多应用场景,并不仅仅只限于导航。如何实现呢,自己编写js的难度太大,兼容性也很差,作者本人就尝试过,编写出来的在一些浏览器下无法滚动。不用担心,有一个开源js库可以为我们实现滑动效果,且兼容性和效果都非常好。

 

工具/原料

iscroll.js

方法/步骤

  1. 下载iScroll.js

    百度搜索iScroll.js,或者从这里下载http://pan.baidu.com/s/1bntS73x

    手机网页左右滑动效果或者上下滑动效果
  2. 2

    引入iScroll.js

    在你要使用滑动效果的地方,引入iScroll.js文件 

  3. 3

    编写规范的html格式

    只有如下格式才能实现滑动效果

    <div id="wrapper">

        <div class="scroll">

           这个区域可以滑动

        </div>

    </div>

    如下格式不能滑动

    <div id="wrapper">

           <div class="other">这个区域可以滑动</div>   

          <div class="scroll">

           这个区域不可以滑动了

            </div>

    </div>

    只有wrapper的第一个子元素才能实现滑动效果。

  4. 4

    编写js调用代码

    window.addEventListener('load',function(){ 

      var $wrapper = document.getElementById('wrapper'),

          $ul = $wrapper.querySelector('ul'),

          liArray = $wrapper.querySelectorAll('li'),

          liNum = liArray.length;

      $ul.style.width = (liArray[0].clientWidth + 10)*7 +"px";

    var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false});

    });

    第一参数必需是滑动元素的父元素的id。

    主要参数一览:

    hScroll: true, 左右滑动,默认为true

    vScroll: true,上下滑动

    hScrollbar: true, 是否显示y轴滚动条,默认为显示

    vScrollbar: true,是否显示X轴滚动条,默认为显示

  5. 5

    最终效果

    手机网页左右滑动效果或者上下滑动效果

 

小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。