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 代码集(学习js的朋友可以看下)
Jul 22 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
JavaScript享元模式原理与用法实例详解
Mar 09 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
MySQL修改密码方法总结
2008/03/25 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python中的列表推导浅析
2014/04/26 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
财务人员求职自荐书范文
2014/02/10 职场文书
离婚起诉状范本
2015/05/19 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Django如何创作一个简单的最小程序
2021/05/12 Python