div层的移动及性能优化


Posted in Javascript onNovember 16, 2010

同样如果一个页面结构很复杂或者电脑配置不好的话也会出现这种情况。为了弄清变慢的原因,我们做了几个demo对比,最后发现在mousemove事件上加上定时器能改进这个体验。

整个代码的关键地方在于当鼠标按下时开始了的计时器,这样Onmousemove事件会每隔30ms执行一次,然后在鼠标松下的时候清除计时器。

timer=setInterval(function(){flag=true;},30);

这样可以减轻浏览器绘制div层的负担,不至于拖动时每时每刻都在移动,其实太短了人眼也感觉不到变化,延迟间隔可以自己根据体验设置。

function Endrag(source,target){ 
source=typeof(source)=="object" ? source:document.getElementById(source); 
target=typeof(target)=="object" ? target:document.getElementById(target); 
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100; 
var timer,flag=false; 
var i=0; 
source.onmousedown=function(e){ 
e = e ? e : (window.event ? window.event : null); 
x0 = e.clientX ; 
y0 = e.clientY ; 
x1 = isNaN(parseInt(source.style.left))?0:parseInt(source.style.left); 
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top); 
moveable = true; 
//当鼠标按下时,定时器开始工作,每隔50ms执行一次mousemove事件 
timer=setInterval(function(){flag=true;},30); 
}; 
//拖动; 
source.onmousemove=function(e){ 
e = e ? e : (window.event ? window.event : null); 
if(moveable){ 
if(flag){ 
i++; 
flag=false; 
target.style.left = (e.clientX + x1 - x0 ) + "px"; 
target.style.top = (e.clientY + y1 - y0 ) + "px"; 
} 
} 
}; 
//停止拖动; 
source.onmouseup=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
//停止拖动; 
source.onmouseout=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
}
Javascript 相关文章推荐
JS实现div居中示例
Apr 17 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 #Javascript
javascript Array对象基础知识小结
Nov 16 #Javascript
纯js实现背景图片切换效果代码
Nov 14 #Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 #Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 #Javascript
You might like
用libtemplate实现静态网页生成
2006/10/09 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
js常见遍历操作小结
2019/06/06 Javascript
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
2014年党员公开承诺践诺书
2014/03/25 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
项目建议书模板
2014/05/12 职场文书
委托书的写法
2014/09/16 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js