在很多手機應用中，大家都會見過這樣一種效果：當手指橫向滑動屏幕時，屏幕上的頁面會向左或向右滑動。
下面介紹一下當用HTML5+CSS3開發手機應用時解決這類效果的一款js框架：flipsnap。
flipsnap.js的源碼大家可以到flipsnap官網：http://pxgrid.github.com/js-flipsnap/下載。
下面列出我寫的小例子，大家一看應該就看明白了。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>水平切換 demo</title> <meta name="Keywords" content=""> <meta name="author" content="@my_programmer"> <style type="text/css"> /*重置{*/ body,div,span{ padding:0;margin:0;} /*}重置*/ .all{width:602px;height:302px;margin:100px auto 0;border:2px red solid;overflow:hidden;} .inner{width:4816px;height:302px;} .inner>div{width:600px;height:300px;border:1px blue solid;float:left;font-size:80px;font-weight:bold;text-align:center;line-height:300px;} .pointer{width:256px;margin:20px auto;overflow:hidden;} .pointer>span{float:left;width:20px;height:20px;border-radius:50%; margin:0 5px;border:1px #000 solid;} .color{background:#ff0;} </style> </head> <body> <div class="all"> <div class="inner"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </div> <div class="pointer" id="pointer"> <span class="color"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div style="margin:0px auto;width:80px;" class="go"> <input type="button" value="go" style="width:50px;height:30px;"/> </div> <script src="jquery.js"></script> <!-- 下面為了省事，例子4、6、7 使用了jquery--> <script src="flipsnap.js"></script> <script type="text/javascript"> /*1.簡單水平拖動*/ Flipsnap('.inner'); //移動次數為子元素個數減一 /*2.設定每次移動的距離*/ //Flipsnap('.inner',{ //distance:602 //每次移動的距離，移動次數為子元素個數減一；注意：此處不能有分號,可以有逗號 //}); /*3.設定每次移動的距離,和，最多移動的次數*/ //Flipsnap('.inner',{ //distance:602, //maxPoint:7 //最多移動的次數 //}); /*4.綁定事件*/ /*var $pointer=$('.pointer span'); var flipsnap=Flipsnap('.inner',{distance:602}); flipsnap.element.addEventListener('fsmoveend',function(){ $pointer.filter('.color').removeClass('color'); //filter 為jquery的篩選器，篩選出與指定表達式匹配的元素集合 $pointer.eq(flipsnap.currentPoint).addClass('color'); },false);*/ /*5.refresh 刷新*/ //var flipsnap=Flipsnap('.inner'); //flipsnap.refresh(); //刷新當前頁面，當屏幕切換時，此代碼就派上用場了 /*6.移動到指定位置,鼠標不可拖動 */ /*var flipsnap = Flipsnap('.inner', { distance: 602, disableTouch: true //true 鼠標不可拖動; false 鼠標可拖動 }); $('.go').click(function() { //flipsnap.moveToPoint(3); //移動到指定位置,第n+1個 flipsnap.toNext(); //移動到下一元素 //flipsnap.toPrev(); //移動到上一元素 });*/ /*7.next, prev*/ /*var flipsnap = Flipsnap('.inner', { distance: 602, disableTouch: true //true 鼠標不可拖動; false 鼠標可拖動 }); $('.go').click(function() { flipsnap.toNext(); //移動到下一元素 //flipsnap.toPrev(); //移動到上一元素 });*/ </script> </body> </html>