手机端页面滑动效果

所属分类:UI,媒体,其他-滚动,滑块和旋转,移动

 116562  311  查看评论 (56)
手机端页面滑动效果 ie兼容10

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

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

调用方法

(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页面里面

<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是渐出效果,具体的效果有很多,可以一个一个尝试

相关插件-滚动,滑块和旋转,移动

jQuery滚动固定区块

左侧内容出现滚动条时,右侧固定区块
  滚动
 6596  63

jQuery自定义滚动条插件-Easy Scroll

Easy Scroll这是一个非常简单的jQuery自定义滚动条插件、 易于使用的脚本。下载后可以立即使用。
  滚动
 49720  46

jQuery回到顶部插件jQuery GoUp

jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部。
  滚动
 25647  61

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 10670  123

讨论这个项目(56)回答他人问题或分享插件使用方法奖励jQ币

    Mr丨Kun 0
    2017/3/10 21:20:16

     然而我还是选择用

    SuperSlide、TouchSlide  swiper   fullpage  这些插件去模拟  哈哈  开玩笑 大兄弟这原生很6 小生佩服
        Mr丨Kun0
        2017/3/10 21:24:43

        这个可以直接用swpier模拟 可以去swiper官网直接弄出来 开源的哦  能帮你们的只能到这了  少花冤枉的jq币 

    回复
    清新薄荷猫 0
    2017/2/28 15:28:43

    我用的其他人的代码也是无限循环,醉了

    回复
    つにつ 0
    2017/2/27 10:21:06

    有点小bug,在我手机看的时候没有全屏显示

    回复
    trevor 0
    2017/2/14 18:09:46
    求下载的源文件  谢谢1280728421@qq.com 回复
    w 0
    2017/2/4 10:30:30
    同样求一份,exchange with beautiful girls’s resources,你懂得!感谢!657615799@qq.com 回复
    木の呆っ。 0
    2017/1/17 17:52:06

    求一份资源 1012596866@qq.com

    回复
    jiaming 0
    2016/12/25 11:12:56
    放下 0
    2016/12/23 11:12:23

    能不能给我一份啊,1728719969@qq.com

    回复
    丁晴晴 0
    2016/12/20 16:12:46

    作者啥时候解决下无限循环的bug,解救我们小白

    回复
    罗伟兵 0
    2016/12/12 18:12:07
    谷歌浏览器上还不兼容啊 回复
取消回复