webapp图片滑动组件 转
在慕课网上看到的课程，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>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/11/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读