今天分享一款很棒的插件touchSwipe,估计很多朋友都在找手机全屏滚动的效果,因为好多企业的微官网是或是专题都在用这样的效果,那么今天touchSwipe 1.6是最新的专门为移动设备设计的jquery插件,如:Ipad,苹果、安卓,当然PC上也是可以用的,嘻嘻。插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件,因此插件可以实现滑动滚屏、缩放等效果。本实例主讲滚屏效果,相了解缩放功能的请参考官方文档。
创新互联是专业的汾阳网站建设公司,汾阳接单;提供成都网站设计、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行汾阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
特点:
1、监听滑动的4个方向:上、下、左、右;
2、监听多个手指收缩还是外张;
3、支持单手指或双手指触摸事件;
4、支持单击事件touchSwipe对象和它的子对象;
5、可定义临界值和最大时间来判断手势的实际滑动;
6、滑动事件有4个触发点:“开始”,“移动”,“结束”和“取消”;
7、结束事件可以在手提释放或是快速达到临界值时触发;
8、允许手指刷和页面滚屏;
9、可禁用户通过输入元素(如:按钮、表单、文本框等)触发事件;
引入核心文件
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
写入CSS文件
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .container { width: 100%; height: 100%; position: absolute; left: 0; top: 0%; } .container .page { height: 100%; position: relative; color:#fff;text-align:center; } .container .page h2{padding-top:120px; line-height:50px; color:#666;} .container .page p{text-align:center; color:#aaa;} .container .page0{background:url(p_w_picpaths/1.jpg) center center no-repeat;} .container .page1{background:url(p_w_picpaths/2.jpg) center center no-repeat;} .container .page2{background:url(p_w_picpaths/3.jpg) center center no-repeat;} .container .page3{background:url(p_w_picpaths/4.jpg) center center no-repeat;}
写入JS实现效果
$(document).ready( function() { var nowpage = 0; //给class为container的容器加上触滑监听事件 $(".container").swipe( { swipe:function(event, direction, distance, duration, fingerCount) {//事件,方向,距离(像素为单位),时间,手指数量 if(direction == "up")//当向上滑动手指时令当前页面记数器加1 { nowpage = nowpage + 1; } else if(direction == "down")//当向下滑动手指时令当前页面记数器减1 { nowpage = nowpage - 1; } if(nowpage > 4)//因本实例只有5张图片,所以当记数器大于4时令他返回4(从0开始记),避免溢出出错 { nowpage = 4; } if(nowpage < 0)//道理同上 { nowpage = 0; } $(".container").animate({"top":nowpage * -100 + "%"},400);//根据当前记数器滚动到相应的高度 } } ); } );
新闻标题:touchSwipe移动端触摸事件
链接分享:https://www.cdcxhl.com/article18/jseddp.html
成都网站建设公司_创新互联,为您提供动态网站、网站设计、网页设计公司、外贸建站、网站维护、微信小程序
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联