文档章节

webapp图片滑动组件

tianyawhl
 tianyawhl
发布于 2016/11/28 16:38
字数 796
阅读 4
收藏 0
点赞 0
评论 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
博文 192
码字总数 88621
作品 0
常州
前端工程师
专注于移动端的滑动解决方案--iSlider

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

叶秀兰 ⋅ 2014/11/06 ⋅ 2

Web 端的 UI 框架--BlendUI

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

红薯 ⋅ 2014/06/27 ⋅ 3

移动前端 CSS 框架--密切

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

qietuwang ⋅ 2015/02/28 ⋅ 0

基于开源 Rexsee 的 UP 移动浏览器开放测试

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

yejiang ⋅ 2012/10/15 ⋅ 0

针对开发者的21款移动开发框架

随着移动互联网的持续升温,企业选择开发对应的webapp网站已经成为了必要。下面笔者收集了21款针对开发者的移动开发框架,基于它们可以快速开发一个webapp网页或者hybridapp混合app,或者一些...

丨小丶牧灬 ⋅ 2015/07/23 ⋅ 2

qietuwang/miqie

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

qietuwang ⋅ 2015/02/28 ⋅ 0

【WebApp】单页webapp应用开发总结【暂完】

(写在开头:优化篇大量都是传闻,大家自行挑拣中意的看。附个学习地址,当然,我还没看过,哈哈!尊重作者附地址:http://mobile.51cto.com/web-410291.htm) 性能体验优化: 1、是否需要小...

小小M ⋅ 2013/12/11 ⋅ 7

一个H5的3D滑动组件实现(兼容2D模式)

起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动、轮播组件。 实现思路 ...

撒网要见鱼 ⋅ 2016/12/13 ⋅ 0

ReactNative基础(三)了解ScrollView并打造一个Banner效果

此博客基于react-native-0.48.4 ScrollView简介 一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统。 这个就跟Android中的ScrollView总体来说是一样的,...

a_zhon ⋅ 2017/09/27 ⋅ 0

android中左右滑屏的实现(广告位banner组件)

原理 参见下图。整个组件是一个FrameLayout,里面有两个view,第一个是LinearLayout,承载了4个(或多个)可以滑动的view,见图中绿色背景的部分;第二个是一个RelativeLayout,在其底部放置...

长平狐 ⋅ 2013/12/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NFS介绍 NFS服务端安装配置 NFS配置选项

NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导...

lyy549745 ⋅ 32分钟前 ⋅ 0

Spring AOP 源码分析 - 筛选合适的通知器

1.简介 从本篇文章开始,我将会对 Spring AOP 部分的源码进行分析。本文是 Spring AOP 源码分析系列文章的第二篇,本文主要分析 Spring AOP 是如何为目标 bean 筛选出合适的通知器(Advisor...

java高级架构牛人 ⋅ 55分钟前 ⋅ 0

HTML-标签手册

标签 描述 <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <a> 定义锚。超链接 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <address> 定义文档作者或拥有者的联系信息。 <apple......

ZHAO_JH ⋅ 56分钟前 ⋅ 0

SylixOS在t_main中使用硬浮点方法

问题描述 在某些使用场景中,应用程序不使用动态加载的方式执行,而是跟随BSP在 t_main 线程中启动,此时应用代码是跟随 BSP 进行编译的。由于 BSP 默认使用软浮点,所以会导致应用代码中的浮...

zhywxyy ⋅ 今天 ⋅ 0

JsBridge原理分析

看了这个Github代码 https://github.com/lzyzsd/JsBridge,想起N年前比较火的Hybrid方案,想看看现在跨平台调用实现有什么新的实现方式。代码看下来之后发现确实有点独特之处,这里先把核心的...

Kingguary ⋅ 今天 ⋅ 0

Intellij IDEA神器常用技巧五-真正常用快捷键(收藏级)

如果你觉得前面几篇博文太啰嗦,下面是博主多年使用Intellij IDEA真正常用快捷键,建议收藏!!! sout,System.out.println()快捷键 fori,for循环快捷键 psvm,main方法快捷键 Alt+Home,导...

Mkeeper ⋅ 今天 ⋅ 0

Java 静态代码分析工具简要分析与使用

本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBugs,PMD,Jtest),最后从功能、特性等方面对它们进行分析和比较,...

Oo若离oO ⋅ 今天 ⋅ 0

SpringBoot自动配置小记

spring-boot项目的特色就在于它的自动配置,自动配置就是开箱即用的本源。 不过支持一个子项目的自动配置,往往比较复杂,无论是sping自己的项目,还是第三方的,都是如此。刚接触会有点乱乱...

大_于 ⋅ 今天 ⋅ 0

React jsx 中写更优雅、直观的条件运算符

在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_false 在jsx中书写条件语句我们经常都...

开源中国最帅没有之一 ⋅ 今天 ⋅ 0

vim编辑模式与命令模式

5.5 进入编辑模式 从编辑模式返回一般模式“Esc” 5.6 vim命令模式 命令 :“nohl”=no high light 无高亮,取消内容中高亮标记 "x":保存退出,和wq的区别是,当进入一个文件未进行编辑时,使...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部