webapp图片滑动组件
2016-11-28 00:00
204 查看
在慕课网上看到的课程,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>
相关文章推荐
- ios web App 使正文中的图片、视频根据屏幕尺寸自适应
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
- 利用 ViewPager 等,实现带小圆球的图片滑动,并且只有第一次安装app时才出现欢迎界面(图片)
- ReactNative学习-滑动查看图片第三方组件react-native-swiper
- 一个图片滑动组件
- org.xml.sax.SAXParseException: 组件类型web-app 未被声明”的问题
- 解决webview加载过大的图片导致水平滑动的视觉
- WebApp图标导航HTML5实例-支持手机左右滑动
- 移动手机APP手指滑动切换图片特效附源码下载
- webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
- WebView加载图片部分不在app中打开!!
- ListView 滑动时组件数据或图片变化
- WebApp图片轮播banner
- 关于SDWebImage加载高清图片导致app崩溃的问题
- android Gallery组件实现的iPhone图片滑动效果实例
- 图片滑动组件iSlider
- WebView中查看图片(多张图片滑动查看)
- 手机web图片左右滑动动画效果分享
- webview加载html图片过大左右滑动的解决/webview加载图片自适应大小