手机端页面滑动效果

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

 151162  348  查看评论 (61)
手机端页面滑动效果 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滚动堆叠插件jquery.stacked-strips.js

为您的一页滚动网站和单页应用程序创建堆叠滚动效果。当您向下滚动网页时,插件可以逐个滚动固定的页面部分。
  滚动
 4819  30

js交集监测插件scrollama.js

Scrollama是一个轻量级JavaScript库, 用于检测页面滚动时监听元素是否重叠。
  滚动
 2178  13

fullpage平滑换页+css3酷炫导航

fullpage平滑换页+css3酷炫导航
  滚动
 11607  155

网站广播插件

网站发布消息的广播插件
  滚动
 17121  102

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

    dht879147746 0
    2017/11/10 14:27:36
    wtl1122330@163.com  项目正好需要,小弟不会做,求一份代码,谢谢 回复
    这女孩很乖 0
    2017/11/9 12:17:40

    谁有源代码啊,帮忙发份,谢谢

    回复
    pa19931224 0
    2017/11/2 10:15:41

    无用代码骗我分

    回复
    buptquan 0
    2017/8/10 16:16:29

    这不是北邮某学长

    回复
    BillGatesTan. 0
    2017/8/2 9:55:14
    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 回复
取消回复