通过设置新的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加速的高性能移动端相框组件！的更多相关文章

  1. ubuntu 15 安装cuda，开启GPU加速

    1 首先要开启GPU加速就要安装cuda.安装cuda,首先要安装英伟达的驱动.ubuntu有自带的开源驱动,首先要禁用nouveau.这儿要注意,虚拟机不能安装ubuntu驱动.VMWare下显卡只 ...

  2. 【python基础】python开启GPU加速

    前言 训练时使用GPU可以加速程序运行,本文介绍如何使用GPU加速. 前提条件 1. 机子有GPU显卡,并安装GPU显卡驱动: 2. 安装GPU的使用环境,CUDA等: 3. 打开nvidia-smi ...

  3. 使用css3实现动画来开启GPU加速

    参考文章: https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html http:// ...

  4. python开启GPU加速

    看了好多教程都提到了使用 os.environ["CUDA_VISIBLE_DEVICES"] = "1" 或者export CUDA_VISIBLE_DEVI ...

  5. 用CSS开启硬件加速来提高网站性能

    国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamt ...

  6. 用CSS开启硬件加速来提高网站性能（转）

    翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cs ...

  7. GPU加速有坑？

    大多数人都知道有动画的地方可以使用GPU来加速页面渲染. 例如,做优化的时候,将使用left和top属性的动画修改成使用transform属性的CSS动画.或者听到别人教你使用transform:tr ...

  8. CSS开启硬件加速提高网站性能

    国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/yzw7489757/ 原文地址:http://blog.teamtreehouse.com/i ...

  9. 使用css来开启硬件加速来提高网站性能

    一.什么是硬件加速 硬件加速就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器,这样就可以使得animation与transition更加顺畅.我们可以在浏览器中用css开启硬件加速 ...

随机推荐

  1. R&S学习笔记（三）

    1.GRE OVER  IPv4 GRE协议栈:IPSEC只支持TCP/IP协议的网络,GRE则支持多协议,不同的网络类型.(如IPX,APPLETALK):通常IPSEC over gre结合使用, ...

  2. js中使用进行字符串传参

    在js中拼接html标签传参时,如果方法参数是字符串需要加上引号,这里需要进行字符转义 <a href='javascript:addMenuUI("+"\"&qu ...

  3. [转帖]The Lambda Calculus for Absolute Dummies (like myself)

    Monday, May 7, 2012 The Lambda Calculus for Absolute Dummies (like myself)   If there is one highly ...

  4. GCD、dispatch函数介绍

    iOS多线程的方法有3种: NSThread NSOperation GCD(Grand Central Dispatch) 其中,由苹果所倡导的为多核的并行运算提出的解决方案:GCD能够访问线程池, ...

  5. mac系统下Ruby环境安装

    在我们编写代码过程中,会用到一系列的第三方开源类库,我们可以选择手动去一个个添加需要的库,但这非常麻烦.因此我们可以使用CocoaPods来帮助我们自动添加.使用CocoaPods需要先安装Ruby环 ...

  6. html特殊字符 编码css3 content:"我是特殊符号"

    项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; he ...

  7. myeclipse中将整块的代码所选中的代码左右移动的快捷键

    myeclipse中将整块的代码/所选中的代码左右移动的快捷键选择你要移动的代码,TAB 右移ctrl+TAB左移(我的使用Shift+TAB管用)要是不使用快捷键就是:选中代码,点击右键选中Shif ...

  8. rabbitMQ学习（二）

    一端发送,多端消费 发送端: import java.io.IOException; import com.rabbitmq.client.ConnectionFactory; import com. ...

  9. 38、重新复习javascript之三

    前言 虽然吧,每天都没有什么太有技术性的工作者,但是技术不能丢,希望也要有,人如果没有希望那不就和咸鱼一样了吗?小伙加油吧 1.html与javascript结合 <!DOCTYPE html ...

  10. IntelliJ IDEA 15.0.2远程debug tomcat

    背景 在最近的java项目中使用了linux环境下编译的so文件,所以无法在window环境下debug,故此有了这篇文章 环境 jdk:jdk-8u101-linux-x64 os:CentOS r ...