通过设置新的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. jquery 中post 、get的同步问题

    jquery 中post .get的同步问题 解决方法1: 在全局设置: $.ajaxSetup({ async : false }); 然后再使用post或get方法 $.get("reg ...

  2. apache配置Allow详解及25个常见问题

    http://www.cnblogs.com/top5/archive/2009/09/22/1571709.html apache常见25个问题:http://blog.csdn.net/keda8 ...

  3. jQuery校验validate详解（转）

    jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...

  4. python 核心编程课后练习(chapter 5)

    5-2 #5-2 def mul(x, y): return x * y print mul(4,5) 5-3 #5-3 def value_score(num): if 90<=num< ...

  5. Window对象方法

    Window对象方法 scrollBy() 按照指定的像素值来滚动内容. scrollTo() 把内容滚动到指定的坐标. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式. ...

  6. ubuntu-利用pdnsd-TCP方式获取IP-拒绝DNS污染

    那,自从国内技术出现了DNS污染问题呢,时常导致很多国外网站访问不正常,所以通过参考一些博客所属避免DNS污染的方法,决定搭建一个Ubuntu JeOS下的DNS缓存服务器,该服务器利用TCP方式获取 ...

  7. 文本编辑的css常用属性

    white-space:pre //保留空格,不然又多个空格值显示一个 white-space:nowrap //强制不换行,知道遇到</br> letter-spacing //字母间的 ...

  8. 浅尝辄止——在C++中调用C#的回调函数——COM方式

    这种方式比较简单,给大家分享一下,同时讲一下SafeArray内定义结构体的方法 1. 需求描述 需求是这样的,C++代码和C#代码相互通信(C++一般做服务,C#做客户端),C++一侧准备好数据,然 ...

  9. 1.使用Entity Framwork框架常用的技术手段Code First 和Reverse Engineer Code First

    提示:VS版本2013,  Entity Framwork版本5.0.0,Mysql数据库  使用Entity FrameWork的好处就不多说,直接上手如何使用.两种形式:1.将代码映射到数据库实体 ...

  10. VS2013安装

    下载 等待下载完成之后,虽然下载文件是ios格式,但可以用解压缩工具解压打开.解压好后,双击vs_ultimate.exe,开始安装. 自定义选择安装路径,同意许可条款,进行下一步. 在选择安装的可选 ...