通过设置新的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加速会导致设备耗电量增加
时间： 2024-10-21 13:26:35