手机端页面滑动效果

所属分类： JQ特效其他移动

查看演示立即下载

插件描述：手机端页面滑动效果，请在手机上查看效果，或在浏览器中模拟手机端查看，直接电脑端浏览器无法查看效果。

请在手机上查看效果，或在浏览器中模拟手机端查看，直接电脑端浏览器无法查看效果。

============以下内容由马云云_理想青年提供===========

调用方法

100

101

102

103

104

105

106

(function(){
         
        //配置
        var config = {
            'audio':{
                'icon':'audio-record-play',
                'text':true
            },
            'loading': 'loading-ic'
        };
         
        //loading
        window.onload = function(){
            $('#loading').hide();
        }
         
        //分享
         
        $('#js-btn-share').bind('tap',function(){
            $('#js-share').show();
        })
        $('#js-share').bind('tap',function(){
            $(this).hide();
        });
         
         
        var pageIndex = 1,
            pageTotal = $('.page').length,
            towards = { up:1, right:2, down:3, left:4},
            isAnimating = false;
         
        //禁用手机默认的触屏滚动行为
        document.addEventListener('touchmove',function(event){
            event.preventDefault(); },false);
         
        $(document).swipeUp(function(){
            if (isAnimating) return;
            if (pageIndex < pageTotal) { 
                pageIndex+=1; 
            }else{
                pageIndex=1;
            };
            pageMove(towards.up);
        })
         
        $(document).swipeDown(function(){
            if (isAnimating) return;
            if (pageIndex > 1) { 
                pageIndex-=1; 
            }else{
                pageIndex=pageTotal;
            };
            pageMove(towards.down); 
        })
         
        function pageMove(tw){
            var lastPage;
            if(tw=='1'){
                if(pageIndex==1){
                    lastPage = ".page-"+pageTotal;
                }else{
                    lastPage = ".page-"+(pageIndex-1);
                }
                 
            }else if(tw=='3'){
                if(pageIndex==pageTotal){
                    lastPage = ".page-1";
                }else{
                    lastPage = ".page-"+(pageIndex+1);
                }
                 
            }
         
            var nowPage = ".page-"+pageIndex;
             
            switch(tw) {
                case towards.up:
                    outClass = 'pt-page-moveToTop';
                    inClass = 'pt-page-moveFromBottom';
                    break;
                case towards.down:
                    outClass = 'pt-page-moveToBottom';
                    inClass = 'pt-page-moveFromTop';
                    break;
            }
            isAnimating = true;
            $(nowPage).removeClass("hide");
             
            $(lastPage).addClass(outClass);
            $(nowPage).addClass(inClass);
             
            setTimeout(function(){
                $(lastPage).removeClass('page-current');
                $(lastPage).removeClass(outClass);
                $(lastPage).addClass("hide");
                $(lastPage).find("img").addClass("hide");
                 
                $(nowPage).addClass('page-current');
                $(nowPage).removeClass(inClass);
                $(nowPage).find("img").removeClass("hide");
                 
                isAnimating = false;
            },600);
        }
         
        })();

==============以下内容由 Dreamer 提供=================

花了重金下载了这个插件，有些心得，分享分享

第一，替换page.css里面的

.page-1{ background-image: url(../img/1_01.png);}

只要替换图片路径即可设置为背景图，图1、图2以此类推。

第二，在index.html页面里面

1	`<div` `class="page page-1 page-current"></div>`

的各个div page里面添加元素是不能定位的，你可以添加一些navbar-fixed-bottom （定位到底部）一些样式，我使用的是bootstrap框架，挺好用的，用navbar-fixed-top定位到头部。

第三，貌似不用引入JQ包，引入后会报错，估计是zepto.min.js这个js和jq包冲突了，在这里我就只用dom节点来实现。

第四，页面的各个图片是无限循环的，想要不循环，只要改

if(tw=='1'){
          if(pageIndex==1){
              lastPage = ".page-"+pageTotal;
          }else{
              lastPage = ".page-"+(pageIndex-1);
          }
        }else if(tw=='3'){
            if(pageIndex==pageTotal){
            lastPage = ".page-1";
            }
        }else{
             lastPage = ".page-"+(pageIndex+1);
        }

为

if(tw=='1'){
            if(pageIndex==1){
                lastPage = ".page-"+(pageTotal-1);
            }else{
                lastPage = ".page-"+(pageIndex-1);
            }
        }else if(tw=='3'){
            if(pageIndex==pageTotal){
                lastPage = ".page-1";
            }else{
                lastPage = ".page-"+(pageIndex+1);
            }
        }

就可以了。

第五，在微信浏览器使用该插件，最好清空缓存，不然修改了都没感觉！（这点可以不注意）

============== 以下代码由 draftdog 提供 =========================

这个其实是中通的那个的简化版，文件夹中有个animation的css 他都没有用，其实这个animation很有用的，每个不同的图片放上不同的animation就可以动起来了，具体做法比如

<img class="img_3 hide fadeInRight" src="img/txt1.png" />

class中 img_3定义了图片的位置，大小，等等的元素

hide自然就是隐藏

fadeInRight是渐出效果，具体的效果有很多，可以一个一个尝试

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：格式按钮炫炫酷效果
下一个特效：动画效果的焦点图播放