手机端页面滑动效果

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

 93899  271  查看评论 (50)
手机端页面滑动效果 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是渐出效果,具体的效果有很多,可以一个一个尝试

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

CSS3 滚动视觉差效果加返回顶部

CSS3 滚动视觉差效果+返回顶部.
  滚动
 9825  64

jquery滚动效果插件ScrollMe

ScrollMe是一个页面添加简单的滚动效果的jQuery插件,当你向下滚动页面时,ScrollMe可以对页面元素进行轴标扫描、旋转、转换和改变不透明度,从而让整个页面动感起来。ScrollMe非常容易使用,它不需要写JS代码,只需在元素中写上属性就OK了。
  滚动
 3708  40

jQuery 3D立方体切换过渡插件cubeTransition.js

cubeTransition.js是一款超酷3D立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效。
  滚动
 3687  30

纯js轻量级滚动视觉差特效插件rellax

一款轻量级的纯Javript滚动视觉差特效插件
  滚动
 5070  35

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

    木の呆っ。0
    2017/1/17 17:52:06

    求一份资源 1012596866@qq.com

    回复
    jiaming0
    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
    谷歌浏览器上还不兼容啊 回复
    梦魇0
    2016/11/23 10:11:54

    谁有原文件发我一份 谢谢了 949091796@qq.com

    回复
    未来0
    2016/11/22 16:11:44
    求下载的源文件  谢谢1280728421@qq.com 回复
    Simon0
    2016/10/24 23:10:12
    这个效果怎么样的? 回复
    ゛琉夏、0
    2016/8/25 11:08:08
    可以切换成最有滑动吗 回复
    白将十块了0
    2016/8/20 0:08:10
    我手里有  但是我不会弄 谁能帮我弄些可以滑动的图片 我把资料发给他 回复
取消回复
    PROMULGATOR

    永恒与回忆

    火星