首页 > 网站建设 > 网站建设知识 > flipsnap.js 手机屏幕水平滑动插件使用方法

flipsnap.js 手机屏幕水平滑动插件使用方法

+ -
摘要 网上有很多的手机屏幕滑动插件,有好有坏,今天我爱模板网推荐个基于html5+css3的手机水平滑动插件:flipsnap js。flipsnap js用法简单,
       网上有很多的手机屏幕滑动插件,有好有坏,今天我爱模板网推荐个基于html5+css3的手机水平滑动插件:flipsnap.js。
        flipsnap.js用法简单,效果不错。如果需要,可以去flipsnap官网:http://pxgrid.github.com/js-flipsnap/,也可以点击 flipsnap.js 进行下载。
        通过下面的例子,我相信一般人都能看出来怎么使用flipsnap.js,废话不多说,上代码(注释都写清楚了,自己看吧):
  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>Flipsnap.js 水平切换 - 我爱模板网</title>   
  6. <style type="text/css">   
  7. body,div,span{ padding:0;margin:0;}   
  8. .all{width:602px;height:302px;margin:100px auto 0;border:2px red solid;overflow:hidden;}   
  9. .inner{width:4816px;height:302px;}   
  10. .inner>div{width:600px;height:300px;border:1px blue solid;float:left;font-size:80px;font-weight:bold;text-align:center;line-height:300px;}   
  11. .pointer{width:256px;margin:20px auto;overflow:hidden;}   
  12. .pointer>span{float:left;width:20px;height:20px;border-radius:50%; margin:0 5px;border:1px #000 solid;}   
  13. .color{background:#ff0;}   
  14. </style>   
  15. </head>   
  16. <body>   
  17.     <div class="all">   
  18.         <div class="inner">   
  19.             <div>1</div>   
  20.             <div>2</div>   
  21.             <div>3</div>   
  22.             <div>4</div>   
  23.             <div>5</div>   
  24.             <div>6</div>   
  25.             <div>7</div>   
  26.             <div>8</div>   
  27.         </div>   
  28.     </div>   
  29.     <div class="pointer" id="pointer">   
  30.         <span class="color"></span>   
  31.         <span></span>   
  32.         <span></span>   
  33.         <span></span>   
  34.         <span></span>   
  35.         <span></span>   
  36.         <span></span>   
  37.         <span></span>   
  38.     </div>   
  39.     <div style="margin:0px auto;width:80px;" class="go">   
  40.         <input type="button" value="go" style="width:50px;height:30px;"/>   
  41.     </div>   
  42.     <script src="jquery.js"></script>    <!-- 下面为了省事,例子4、6、7 使用了jquery-->   
  43.     <script src="flipsnap.js"></script>   
  44.     <script type="text/javascript">   
  45.    
  46.     /*1.简单水平拖动*/   
  47.         Flipsnap('.inner');    //移动次数为子元素个数减一       
  48.    
  49.     /*2.设定每次移动的距离*/   
  50.         //Flipsnap('.inner',{   
  51.             //distance:602    //每次移动的距离,移动次数为子元素个数减一;注意:此处不能有分号,可以有逗号   
  52.         //});   
  53.        
  54.     /*3.设定每次移动的距离,和,最多移动的次数*/   
  55.         //Flipsnap('.inner',{   
  56.             //distance:602,   
  57.             //maxPoint:7        //最多移动的次数   
  58.         //});   
  59.    
  60.     /*4.绑定事件*/   
  61.         /*var $pointer=$('.pointer span');   
  62.         var flipsnap=Flipsnap('.inner',{distance:602});   
  63.         flipsnap.element.addEventListener('fsmoveend',function(){   
  64.             $pointer.filter('.color').removeClass('color');            //filter 为jquery的筛选器,筛选出与指定表达式匹配的元素集合   
  65.             $pointer.eq(flipsnap.currentPoint).addClass('color');   
  66.         },false);*/   
  67.    
  68.     /*5.refresh 刷新*/   
  69.         //var flipsnap=Flipsnap('.inner');   
  70.             //flipsnap.refresh();        //刷新当前页面,当屏幕切换时,此代码就派上用场了   
  71.     /*6.移动到指定位置,鼠标不可拖动 */   
  72.         /*var flipsnap = Flipsnap('.inner', {   
  73.             distance: 602,   
  74.             disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动   
  75.         });   
  76.         $('.go').click(function() {   
  77.             //flipsnap.moveToPoint(3);    //移动到指定位置,第n+1个   
  78.             flipsnap.toNext();    //移动到下一元素   
  79.             //flipsnap.toPrev();    //移动到上一元素   
  80.         });*/   
  81.    
  82.     /*7.next, prev*/   
  83.         /*var flipsnap = Flipsnap('.inner', {   
  84.             distance: 602,   
  85.             disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动   
  86.         });   
  87.         $('.go').click(function() {   
  88.             flipsnap.toNext();    //移动到下一元素   
  89.             //flipsnap.toPrev();    //移动到上一元素   
  90.         });*/   
  91.    
  92.     </script>   
  93. </body>   
  94. </html>   

 

用微信扫一扫

用微信扫一扫