flipsnap
在很多手机应用中，大家都会见过这样一种效果：当手指横向滑动屏幕时，屏幕上的页面会向左或向右滑动。
下面介绍一下当用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="Description" content=""><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 > <div > <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 id="pointer"> <span ></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div > <input type="button" value="go" /> </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>TAG:
