开启gpu加速的高性能移动端相框组件！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开启gpu加速的高性能移动端相框组件！相关的知识，希望对你有一定的参考价值。
通过设置新的css3新属性translateX来代替传统的绝对定位改变left值的动画原理，新属性translateX会开启浏览器自带的gpu硬件加速动画性能，提高流畅度从而提高用户体验，
代码有很详细的注释，先上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--移动端相关声明--> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!--允许苹果设备全屏显示--> <meta name="apple-touch-fullscreen" content="YES"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>滑动相框组件</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background: #333;overflow: hidden;} #album{width: 100%;height: 100%;overflow: hidden;} #album ul,li{list-style: none;overflow: hidden;height: 100%;} /*用css3方式把li的内容居中显示，需要绝对定位的，在js中动态加入，js代码会说明*/ #album li{display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;} </style> </head> <body> <div id="album"></div> </body> <script src="js/myjs.js" type="text/javascript" charset="utf-8"></script> </html>
js代码部分
var list=[{ height:950, width:800, src:"img/1.jpg" }, { height: 1187, width: 900, src: "img/2.jpg" }, { height: 766, width: 980, src: "img/3.jpg" }, { height: 754, width: 980, src: "img/4.jpg" }, { height: 493, src: "img/5.jpg", width: 750 }, { height: 500, src: "img/6.jpg", width: 750 }, { height: 600, src: "img/7.jpg", width: 400 }]; function Silder(opts){ this.wrap=opts.obj; this.list=opts.list; //构造三部曲 this.init(); this.renderDOM(); this.bindDOM(); } //初次化 Silder.prototype.init=function(){ //算出窗口长宽比 this.radio=window.innerHeight/window.innerWidth; this.scaleW=window.innerWidth; //当前图片的索引值 this.index=0; } //根据数据渲染页面的原型链 Silder.prototype.renderDOM=function(){ var wrap =this.wrap; var data=this.list; var len=data.length; var scale=this.scaleW; this.Oul=document.createElement(‘ul‘); for(var i=0;i<len;i++){ var li=document.createElement(‘li‘); var item=data[i]; //设置li的相关参数 li.style.width=scale+‘px‘; li.style.webkitTransform=‘translateX(‘+i*scale+‘px)‘; //如果item存在，do某事 if(item){ //如果图片的高宽比大于屏幕的高宽比，以高度来进行缩放 if(item[‘height‘]/item[‘width‘]>this.radio){ li.innerHTML=‘<img height="‘+window.innerHeight+‘" src="‘+item[‘src‘]+‘"/>‘; }else{ li.innerHTML=‘<img width="‘+scale+‘" src="‘+item[‘src‘]+‘"/>‘; } } this.Oul.appendChild(li); } this.Oul.style.width=scale+‘px‘; wrap.style.height=window.innerHeight+‘px‘; wrap.appendChild(this.Oul); } //动画函数原型链 Silder.prototype.go=function(num){ var index=this.index; var lis=this.Oul.getElementsByTagName(‘li‘); var len=lis.length; var i; //把传入的转换位number类型 i=index+num*1 if(i>len-1){ i=len-1 }else if(i<0){ i=0 } //保留当前图片的索引值 this.index=i; //加入过渡效果 lis[i]&&(lis[i].style.webkitTransition=‘all 0.3s ease-out‘); lis[i-1]&&(lis[i-1].style.webkitTransition=‘all 0.3s ease-out‘); lis[i+1]&&(lis[i+1].style.webkitTransition=‘all 0.3s ease-out‘); //动态加入当前页，上一页，下一页绝对定位，过多绝对定位占用内存会过大，导致ios上浏览器闪退 lis[i].style.position = ‘absolute‘; lis[i-1] && (lis[i-1].style.position = ‘absolute‘); lis[i+1] && (lis[i+1].style.position = ‘absolute‘); //当前页，上一页，下一页的动画切换 lis[i]&&(lis[i].style.webkitTransform=‘translateX(0px)‘); lis[i-1]&&(lis[i-1].style.webkitTransform=‘translateX(-‘+this.scaleW+‘px)‘); lis[i+1]&&(lis[i+1].style.webkitTransform=‘translateX(‘+this.scaleW+‘px)‘); } //事件绑定的原型链 Silder.prototype.bindDOM=function(){ var that=this; var scale=that.scaleW; var Oul=that.Oul; var len=that.list.length; //触摸屏幕函数 var startHandler=function(event){ //记录刚接触屏幕的时间 that.startTime=new Date()*1; //记录刚接触屏幕的x坐标 that.startX=event.touches[0].pageX; //清楚位移量 that.offsetX=0; } //在触摸屏幕移动函数 var moveHandler=function(event){ event.preventDefault(); that.offsetX=event.touches[0].pageX-that.startX; var lis=Oul.getElementsByTagName(‘li‘); //关键点，取得当前页，上一页，下一页的索引值 var i=that.index-1; var n=i+3; //遍历选出当前页，上一页，下一页的索引来do 某事 for(i; i<n; i++){ //手指移动时候取消过渡效果 lis[i]&&(lis[i].style.webkitTransition=‘none‘); //图片跟随手指移动 lis[i]&&(lis[i].style.webkitTransform=‘translateX(‘+((i-that.index)*scale+that.offsetX)+‘px)‘); } } //触摸结束函数 var endHandler=function(event){ var boundary=scale/5; var endTime=new Date()*1; event.preventDefault(); if(endTime-that.startTime>300){ //用户慢滑动的情况 if(that.offsetX>=boundary){ //调用切换到下一页函数 that.go(‘-1‘); }else if(that.offsetX<0&&that.offsetX<-boundary){ //调用切换上一页函数 that.go(‘1‘); }else{ //调用留在此页函数 that.go(‘0‘); } }else{ //优化用户快速滑动的情况 if(that.offsetX>50){ that.go(‘-1‘); }else if(that.offsetX<-50){ that.go(‘1‘); }else{ that.go(‘0‘); } } } //绑定事件 Oul.addEventListener(‘touchstart‘,startHandler); Oul.addEventListener(‘touchmove‘,moveHandler); Oul.addEventListener(‘touchend‘,endHandler); } //传入数据调用 new Silder({ ‘obj‘:document.getElementById(‘album‘), ‘list‘:list })
最后说明一下开启gpu加速会导致设备耗电量增加
以上是关于开启gpu加速的高性能移动端相框组件！的主要内容，如果未能解决你的问题，请参考以下文章