通过设置新的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. 安装过程中出现PKG_CONFIG_PATH的问题解决方法

    在安装开源软件的过程中, 经常会碰到提示配置PKG_CONFIG_PATH路径, 或者直接提示没有安装某某库, 但是我们已经安装了啊. 其实造成这种情况的原因很简单, 就是安装的目录不能被依赖程序找到 ...

  2. Happy New Year

    今年的元旦能明显感觉到节日的狂欢.一方面,论文的事情,压抑了好久,另一方面,把自己融入节日之中.所以才有了节日的深度参与. 早上还是按时的起床,看了朋友圈,内心却能专注于平静.因为见到了优秀的人,才发 ...

  3. 原生态ajax 传递json参数到服务器端

    案例说明:通过ajax将用户名和密码以json形式传递给服务器端,然后服务器端接受数据,进行处理返回json数据到前端 首先,在客户端,通过JavaScript脚本将页面表单数据封装成JSON格式.L ...

  4. EL表达式显示数据取整问题

    第一 插入fmt标签库 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%&g ...

  5. 基于 HTTP/2 的全新 APNs 协议

    https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotifi ...

  6. SQL Server提高事务复制效率优化（三）订阅初始化优化

    初始化订阅主要是由分发代理分发和应用快照代理之前生成的快照,所以优化的主体是分发代理. 1.初始化订阅 首先在本地创建一个订阅,发布服务器.分发服务器和订阅服务器都在同一台服务器上,仅为了测试生产环境 ...

  7. td的所有style

    td.style.clear= td.style.posRight=0 td.style.backgroundRepeat= td.style.borderTopStyle= td.style.mar ...

  8. 学习 Linux，101: Linux 命令行

    概述 本教程将简要介绍 bash shell 的一些主要特性,涵盖以下主题: 使用命令行与 shell 和命令交互 使用有效的命令和命令序列 定义.修改.引用和导出环境变量 访问命令历史和编辑工具 调 ...

  9. 多媒体（1）：MCI接口编程

    目录 多媒体(1):MCI接口编程 多媒体(2):WAVE文件格式分析 多媒体(3):基于WindowsAPI的视频捕捉卡操作 多媒体(4):JPEG图像压缩编码 多媒体(1):MCI接口编程

  10. Res_Orders_02

    一.燃尽图展示 二.项目进展 1.实现用户名找回 2.css样式嵌入