注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery手机全屏上下滑动滚屏插件touchSwipe

jQuery插件 fishcity 10918浏览

jQuery手机全屏滑动滚屏touchSwipe

今天分享一款很棒的插件touchSwipe,估计很多朋友都在找手机全屏滚动的效果,因为好多企业的微官网是或是专题都在用这样的效果,那么今天touchSwipe 1.6是最新的专门为移动设备设计的jquery插件,如:Ipad,苹果、安卓,当然PC上也是可以用的,嘻嘻。插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件,因此插件可以实现滑动滚屏、缩放等效果。本实例主讲滚屏效果,相了解缩放功能的请参考官方文档。

特点:

1、监听滑动的4个方向:上、下、左、右;

2、监听多个手指收缩还是外张;

3、支持单手指或双手指触摸事件;

4、支持单击事件touchSwipe对象和它的子对象;

5、可定义临界值和最大时间来判断手势的实际滑动;
6、滑动事件有4个触发点:“开始”,“移动”,“结束”和“取消”;

7、结束事件可以在手提释放或是快速达到临界值时触发;

8、允许手指刷和页面滚屏;

9、可禁用户通过输入元素(如:按钮、表单、文本框等)触发事件;

jquery实例教程:jQuery手机全屏上下滑动滚屏插件touchSwipe

引入核心文件

<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 h1{padding-top:120px; line-height:50px; color:#666;}
.container .page p{text-align:center; color:#aaa;}
.container .page0{background:url(images/1.jpg) center center no-repeat;}
.container .page1{background:url(images/2.jpg) center center no-repeat;}
.container .page2{background:url(images/3.jpg) center center no-repeat;}
.container .page3{background:url(images/4.jpg) center center no-repeat;}

写入HTML

<div class="container">
  <div class="page "><h1>请用鼠标上下滑动来看效果</h1><p>请按着鼠标左键上下滑动,你再不会的话,那我只有呵呵了。感谢您对<a href="http://www.jqcool.net">jQ酷</a>的支持</p></div>
  <div class="page  page1"></div>
  <div class="page page2"></div>
  <div class="page page3"></div>
  <div class="page page0"></div>
</div>

写入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);//根据当前记数器滚动到相应的高度
                    }
                }
            );
        }
    );

到这,手机全屏滚屏效果就实现了。

转载请注明:jQ酷 » jQuery手机全屏上下滑动滚屏插件touchSwipe

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。