开启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开启硬件加速 ...
随机推荐
- FreeBSD从零开始---安装后配置（二）
系统优化及安全设置 上次说了FreeBSD基本的软件安装和配置,接下来会说系统的详细配置和安全性设置 一.系统优化设置 1.网络相关设置 网卡和IP地址设置: 如果在安装时没有设置IP ...
- workplace background
class:SysSetupFormRun public void run() { super(); this.design().colorScheme(FormColorScheme::RGB); ...
- jquery让滚动条跳到最底部
selector.scrollTop(50000); 添加一个最大的数值: 或者 公式:内容器的高度加上外层容器的padding,再减去外层容器的高度: var tableHeight = $(' ...
- c#winform程序，修改MessageBox提示框中按钮的文本
用winform的MessageBox是实现不了的,这里我用的是DevExpress控件的XtraMessageBoxForm 例如如果想在一个提示框里修改"是","否& ...
- SQL Server提高事务复制效率优化（四）修改数据同步过程优化
1.原理 我说的数据修改同步过程指的是在快照生成完毕,分发代理将快照应用于订阅服务器完成订阅服务器初始化后,发布服务器后续的更改同步到订阅服务器过程,这也就是我们常常关注的延迟.此过程主要 ...
- long l=88;这个表达式是正确的，因为long比int类型大，会发生自动转换
long l=88;这个表达式是正确的,因为long比int类型大,会发生自动转换
- 从不同方面寻找bug
从小学生的角度,为了熟能生巧,更好掌握知识,那就需要不断的练习,然而app没有重新开始的功能,要退出再重新进入,很麻烦.还有,如果小学生只想做一类的计算,例如,只想做减法或乘法,那么它就不能满足. 我 ...
- maven出现 -Dmaven.multiModuleProjectDirectory system propery错误
1.使用myeclipse10整合maven插件时出现错误: -Dmaven.multiModuleProjectDirectory system propery is not set. Check ...
- Find the largest K numbers from array （找出数组中最大的K个值）
Recently i was doing some study on algorithms. A classic problem is to find the K largest(smallest) ...
- Express安装过程
1,首选全局安装express,进入nodejs的安装目录执行以下语句 npm install -g express 2,安装工具 npm install -g express-generator 3 ...