文档章节

webapp图片滑动组件

tianyawhl
 tianyawhl
发布于 2016/11/28 16:38
字数 796
阅读 4
收藏 0

在慕课网上看到的课程,webapp图片滑动组件 ,讲师mark,讲的非常好,跟着老师的代码自己抄写了一遍,也算增加些印象

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
   html{height:100%;}
	body{
	   height:100%;
		margin: 0;
		padding: 0;
		background: #333;
		overflow: hidden;
	}
	/* 隐藏画布外的内容 */
	#canvas{
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	li,ul{
		list-style: none;
		margin: 0;
		padding: 0;
		height: 100%;
		overflow: hidden;
	}
	/* 使得图片居中 webkit-box */
	li{
	position:absolute;
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	}
	li img {
		max-width: 100%;
		max-height: 100%;
	}
	
</style>
</head>
<body>
	<!-- 外层画布 -->
	<div id="canvas">
	
	</div>
   <script type="text/javascript">
   //所有的数据
   var list = [{
			height: 950,
			width: 800,
			img: "imgs/1.jpg"
		},
		{
			height: 1187,
			width: 900,
			img: "imgs/2.jpg"
		},
		{
			height: 766,
			width: 980,
			img: "imgs/3.jpg"
		},
		{
			height: 754,
			width: 980,
			img: "imgs/4.jpg"
		},
		{
			height: 493,
			img: "imgs/5.jpg",
			width: 750
		},
		{
			height: 500,
			img: "imgs/6.jpg",
			width: 750
		},
		{	
			height: 600,
			img: "imgs/7.jpg",
			width: 400
		}];
		
		//构造函数
		function slider(opts){
		//构造函数需要的参数
			this.wrap=opts.dom;
			this.list=opts.list;
			//构造三部曲
			this.init();
			this.renderDom();
			this.bindDom();
		}
		//init()函数
		slider.prototype.init=function(){
		this.radio=window.innerHeight/window.innerWidth;
		this.scaleW=window.innerWidth;
		//当前图片的索引
		this.idx=0;
		}
		//renderDom()函数
		slider.prototype.renderDom=function(){
		var wrap=this.wrap;
		var scaleW=this.scaleW;
		var data=this.list;
		var len=data.length;
		var radio=this.radio;
		//创建ul元素
		this.outer=document.createElement("ul");
		for(i=0;i<len;i++){
			//循环创建li元素
			var li=document.createElement("li");
			var item=data[i];
			//下面的宽度可以加px也可以不加,可以直接是数值
			li.style.width=scaleW +"px";
			li.style.webkitTransform='translate3d(' + i*scaleW +'px,0,0)';//此行的px不能省略
			if(item){
				if(item.height/item.width>this.radio){
				//根据图片的长宽比来创建li里面的图片
				li.innerHTML='<img height="' + window.innerHeight+'" src="'+item['img']+'" />'
				}else{
				li.innerHTML='<img width="' + window.innerWidth+'" src="'+item['img']+'" />'
				}
			
			}
			this.outer.appendChild(li);
		
		}
		wrap.style.height=window.innerHeight + "px";
		wrap.appendChild(this.outer);
		}
		// bindDom()函数,绑定dom事件
		slider.prototype.bindDom=function(){
			var self=this;
			var scale=self.scaleW;
			var outer=self.outer;
			var len=self.list.length;
			
			//手指按下的处理事件
			var startHander=function(evt){
			    //记录手指按下的坐标
				self.startX=evt.touches[0].pageX;
				
				//清除偏移量
				self.offsetX=0;
				//记录刚刚开始按下的时间
				self.startTime=new Date() + 1;
			};
			
			//手指移动的处理事件
			var moverHander=function(evt){
				//兼容chrome android 阻止浏览器默认行为
				evt.preventDefault();
				//计算手指的偏移量
				self.offsetX=evt.touches[0].pageX-self.startX;
				//console.log(self.offsetX);
				var lis=outer.getElementsByTagName("li");
				//起始索引
				var i=self.idx-1;
				//结束索引
				var m= i+3;
				//最小化改变Dom属性
				for(i;i<m;i++){
				lis[i]&&(lis[i].style.webkitTransition='-webkit-transform 0s ease-out');
				lis[i]&&(lis[i].style.webkitTransform='translate3d('+((i-self.idx)*self.scaleW + self.offsetX)+'px,0,0)');
				
				}
			
			};
			var endHander=function(evt){
			    var lis=outer.getElementsByTagName('li');
				var boundory=scale/6;
				var endTime=new Date()+1;
				if(endTime-self.startTime>800){
					if(self.offsetX>=boundory){
						//进入上一页
						self.go('-1');
					}else if(self.offsetX<=-boundory){
						//进入下一页
						self.go('+1');
					}else{
						//留在本页
						self.go('0');
					}
				}else{
				//快操作
				//优化
				if(self.offsetX>50){
					//进入上一页
					self.go('-1');
				}else if(self.offsetX<-50){
					//进入下一页
					self.go('+1');
				}else{
					//留在本页
						self.go('0');
				}
			}
			};
			outer.addEventListener('touchstart',startHander);
			outer.addEventListener('touchmove',moverHander);
			outer.addEventListener('touchend',endHander);
		
		}
		slider.prototype.go=function(n){
			var idx=this.idx;
			var cidx;
			var lis=this.outer.getElementsByTagName('li');
			var len=lis.length;
			var scale=this.scaleW;
			if(typeof n =='number'){
				cidx=idx;
			}else if(typeof n =='string'){
				cidx=idx + n*1;//字符串*数字等于数字
			}
			//当索引右超出
			if(cidx>len-1){
				cidx=len-1;
			}else if(cidx<0){
				cidx=0;
			}
			this.idx=cidx;

			lis[cidx].style.webkitTransition='-webkit-transform 0.2s ease-out';
			lis[cidx-1] && (lis[cidx-1].style.webkitTransition='-webkit-transform 0.2s ease-out');
			lis[cidx+1] && (lis[cidx+1].style.webkitTransition='-webkit-transform 0.2s ease-out');

			lis[cidx].style.webkitTransform='translate3d(0,0,0)';
			lis[cidx-1] && (lis[cidx-1].style.webkitTransform='translate3d(-'+ scale+'px,0,0)');
			lis[cidx+1] && (lis[cidx+1].style.webkitTransform='translate3d('+ scale+'px,0,0)');
			
		
		}
		//初始化Slider 实例
		new slider({
		dom:document.getElementById("canvas"),
		list:list
		});
   
   </script>

</body>

 

本文转载自:http://www.imooc.com/learn/125

共有 人打赏支持
tianyawhl
粉丝 1
博文 207
码字总数 103497
作品 0
常州
前端工程师
专注于移动端的滑动解决方案--iSlider

iSlider 是个非常平滑的滑块,支持移动端 WebApp,HTML5App 和混合型的 App。 iSlider是移动端的滑动组件的最佳解决方案。他和普通的web 端的滑动插件有很大不同,面向的用户和解决的问题也有...

叶秀兰
2014/11/06
16.3K
2
Web 端的 UI 框架--BlendUI

BlendUI 是百度公司的一个 Web 前端 UI 框架。BlendUI 能让Webapp的体验和交互与Native媲美。 具体而言,里面包括了两项关键能力: 多Webview控制能力。让一个Webapp拆到多个webview中运行,...

红薯
2014/06/27
18.2K
3
移动前端 CSS 框架--密切

密切(Mobile-Internet.css)源自“Mobile Internet CSS”, 是由切图网针对webapp移动前端自主开发的一款html5/css3框架,是国内移动前端框架发起者和领导者,它的目的是减少你的css开发时间...

qietuwang
2015/02/28
3K
0
基于开源 Rexsee 的 UP 移动浏览器开放测试

作为深度支持Android的开源移动Web开发平台,Rexsee已经在过去的一年中收到了来自开发者的大量应用。之前更多是利用平台的封装能力,将WebApp编译成本地的apk程序,作为原生应用进行对外发布...

yejiang
2012/10/15
1K
0
vue+vuex+axios 仿原生app切换效果和路由缓存实践

简介 之前一直在写微信小程序,想着实验下能不能把小程序的页面切换和缓存效果用到vue项目上来,所以做这个demo来实践下 并且重新熟悉下vue全家桶的使用。 写的这个webapp页面滑动效果主要使...

JooZh
09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
8
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
4
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部