通过设置新的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. Java多线程之并发协作生产者消费者设计模式

    两个线程一个生产者个一个消费者 需求情景 两个线程,一个负责生产,一个负责消费,生产者生产一个,消费者消费一个 涉及问题 同步问题:如何保证同一资源被多个线程并发访问时的完整性.常用的同步方法是采用标 ...

  2. Swift版的SQLiteHelper

    SQLiteHelper 创建SQLiteHelper类 /// SQLite数据库处理帮助类 /// /// 此类中封装了关于SQLite数据库处理的业务函数 class SQLiteHelper ...

  3. stimulsoft Report报表使用笔记

    1.使用设计器设计mrt报表模板,或者从其他文件复制修改 2.删除business object 数据源 3.使用代码添加数据源 ParcelChangeItem change = new Parce ...

  4. 自己用C语言写单片机PIC16 serial bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 为什么自己写bootl ...

  5. 解决linux 无法下载 oracle 官网 java的 安装包

    wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup-co ...

  6. linux(Debian) 中的cron计划任务配置方法

    cron服务每分钟不仅要读一次/var/spool/cron内的所有文件,还需要读一次/etc/crontab,因此我们配置这个文件也能运用cron服务做一些事情.用crontab配置是针对某个用户的 ...

  7. nice-validator验证插件

    主要是作为form表单的验证,密码,确认密码的验证,远程验证的功能: 1:先导包:nice-validator 2:引入文件css,js 3: 使用 使用文档:http://www.niceue.co ...

  8. OPTIMIZE TABLE 小解

    首先看一下语法:  OPTIMIZE [NO_WRITE_TO_BINLOG | LOCAL] TABLE tbl_name [, tbl_name] ... 我们知道mysql存储引擎里面的数据和索 ...

  9. RocketMQ与Kafka对比（18项差异）

          转自:https://github.com/alibaba/RocketMQ/wiki/rmq_vs_kafka 淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysq ...

  10. Java入门记(二)：向上转型与向下转型

    在对Java学习的过程中,对于转型这种操作比较迷茫,特总结出了此文.例子参考了<Java编程思想>. 目录 几个同义词 向上转型与向下转型 例一:向上转型,调用指定的父类方法 例二:向上转 ...