通过设置新的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. Python-5 数据类型、操作符

    #1 数值类型: 整型int.浮点型float(科学记数法 e 或 E).布尔型bool #2 字符串: 与整型.浮点型转化:int()--截断处理 float() str() #3 获取数据类型: ...

  2. 【练习】数据移动---导入（IMPDP）

    1.导入表并验证: :: SYS@ORA11GR2>grant connect,resource to jj identified by jj; Grant succeeded. :: SYS@ ...

  3. 数据库—SQL语句

    下列语句部分是Mssql语句,不可以在access中使用. SQL分类:   DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE)   DML—数据操纵语言(SELECT,DEL ...

  4. css3动画3

    1.transition过渡动画 2.@keyframes关键帧动画,配合transform.animation使用

  5. ES6与ES5差别

    1.ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { var a = 1; let b = 1; } a; b;/ let不像var ...

  6. win2008下安装SQL SERVER 2005出现IIS功能要求 警告解决方案

    原因: 出现此问题的原因取决于 SQL Server 的不是所有 IIS 7.0 组件都安装在计算机上.下表列出了受影响的组件. 收起该表格展开该表格   组件 文件夹 静态内容 常见的 HTTP 功 ...

  7. [转]：C#的ToString如何格式化字符串

    C 货币 2.5.ToString("C") ￥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToString ...

  8. 20个编写现代CSS代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  9. Unity3D 学习——入门资料整理

    感觉可以写3D游戏,还是用C#,很好玩的样子.整理最近学习资料 介绍:游戏引擎,可以用C#配置的游戏引擎.嗯,就这样.其余度娘. 安装:官网,因为现在个人版是免费的.直接官网下.干净利落. 调试插件: ...

  10. FAST特征点检测features2D

    #include <opencv2/core/core.hpp> #include <opencv2/features2d/features2d.hpp> #include & ...