文档章节

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
粉丝 3
博文 226
码字总数 115636
作品 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
vue+vuex+axios 仿原生app切换效果和路由缓存实践

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

JooZh
09/05
0
0
基于开源 Rexsee 的 UP 移动浏览器开放测试

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

yejiang
2012/10/15
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker Java API 选型

因为工作原因需要使用Java调用装有docker环境的机器完成打镜像 上传镜像库的操作,进过调查,发现了两个比较常用的Java API工具,分别是 docker-java 和 spotify-docker-client,Github地址分...

MrPei
2分钟前
0
0
关ASCII码中的特殊字符10和13

10 : 是 LF 即 "\n" 13:是CR 即 "\r" 在不同的操作系统中,表示的方式是不一样的。在UNIX系统中,换行符使用"\n" , 在 windows 系统中换行使用 "\r\n"; 在旧版macOS中换行使用回车符"/r",...

Canaan_
4分钟前
0
0
MaxCompute 表(Table)设计规范

表的限制项 表(Table)设计规范 表设计主要目标 表设计的影响 表设计步骤 表数据存储规范 按数据分层规范数据生命周期 按数据的变更和历史规范数据的保存 数据导入通道与表设计 分区设计与逻辑...

阿里云官方博客
11分钟前
0
0
border实现等高布局

效果图 实现上图效果的全部html+css代码 <div class="box"> <nav> <h3 class="nav">导航1</h3> <h3 class="nav">导航2</h3> </nav> <section> <div cla......

呵呵闯
21分钟前
0
0
MaxCompute 表(Table)设计规范

表的限制项 表(Table)设计规范 表设计主要目标 表设计的影响 表设计步骤 表数据存储规范 按数据分层规范数据生命周期 按数据的变更和历史规范数据的保存 数据导入通道与表设计 分区设计与逻辑...

阿里云云栖社区
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部