开启gpu加速的高性能移动端相框组件！
通过设置新的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加速的高性能移动端相框组件！的更多相关文章
- ubuntu 15 安装cuda，开启GPU加速
1 首先要开启GPU加速就要安装cuda.安装cuda,首先要安装英伟达的驱动.ubuntu有自带的开源驱动,首先要禁用nouveau.这儿要注意,虚拟机不能安装ubuntu驱动.VMWare下显卡只 ...
- 【python基础】python开启GPU加速
前言 训练时使用GPU可以加速程序运行,本文介绍如何使用GPU加速. 前提条件 1. 机子有GPU显卡,并安装GPU显卡驱动: 2. 安装GPU的使用环境,CUDA等: 3. 打开nvidia-smi ...
- 使用css3实现动画来开启GPU加速
参考文章: https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html http:// ...
- python开启GPU加速
看了好多教程都提到了使用 os.environ["CUDA_VISIBLE_DEVICES"] = "1" 或者export CUDA_VISIBLE_DEVI ...
- 用CSS开启硬件加速来提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamt ...
- 用CSS开启硬件加速来提高网站性能（转）
翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cs ...
- GPU加速有坑？
大多数人都知道有动画的地方可以使用GPU来加速页面渲染. 例如,做优化的时候,将使用left和top属性的动画修改成使用transform属性的CSS动画.或者听到别人教你使用transform:tr ...
- CSS开启硬件加速提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/yzw7489757/ 原文地址:http://blog.teamtreehouse.com/i ...
- 使用css来开启硬件加速来提高网站性能
一.什么是硬件加速 硬件加速就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器,这样就可以使得animation与transition更加顺畅.我们可以在浏览器中用css开启硬件加速 ...
随机推荐
- 初学PHP
这东西必须得静下心来学,快是快不来的,得有一个痛苦的过程.<PHP和MySQL WEB开发>这本书很值得一看,有了坚实的基础,推荐看<深入php++面向对象.模式与实践+第三版> ...
- sqlserver表分区
参考:http://www.cnblogs.com/knowledgesea/p/3696912.html 及百度搜索sqlserver表分区 create partition function sg ...
- 异步编程，采用WorkgroupWorker，async和await关键字
金科玉律:不要在UI线程上执行耗时的操作:不要在除了UI线程之外的其他线程上访问UI控件! NET1.1的BeginInvoke异步调用,需要准备3个方法:功能方法GetWebsiteLength,结 ...
- linux VI search command 搜索 加入行号
VI COMMAND:set number :set nonumber VI COMMAND/keywork //search
- C#调用C++编写的DLL函数, 以及各种类型的参数传递 （转载）
C#调用C++编写的DLL函数, 以及各种类型的参数传递 1. 如果函数只有传入参数,比如: C/C++ Code Copy Code To Clipboard //C++中的输出函数 int ...
- C# 软件绑定QQ群类开源放出
周天闲来无事写个公共类,可以添加到你们自己项目中限制必须加入你QQ群才可以使用. 代码简单,高手勿喷,有哪里不合理的请回帖让大家学习学习. using System; using System.Tex ...
- android 非activity如何得到布局文件 （java文件中获取布局文件）
Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...
- MySQL 第十天（视图、存储过程、函数、触发器）
MySql高级-视图.函数.存储过程.触发器 目录 一.视图 1 1.视图的定义 1 2.视图的作用 1 (1)可以简化查询. 1 (2)可以进行权限控制, 3 3.查询 ...
- 转 Jmeter之Bean shell使用(一)
一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...
- iBatis的SQL注入
sqlMap中尽量不要使用$;$使用的是Statement(拼接字符串),会出现注入问题.#使用的是PreparedStatement(类似于预编译),将转义交给了数据库,不会出现注入问题:.前者容易 ...