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 相关文章推荐
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
Vue Router的手写实现方法实现
Mar 02 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
基于vue.js实现分页查询功能
2018/12/29 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
使用Template格式化Python字符串的方法
2019/01/22 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
华为python面试题
2016/05/03 面试题
优秀护士获奖感言
2014/02/20 职场文书
读群众路线的心得体会
2014/09/03 职场文书
幼儿园感谢信
2015/01/21 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
施工安全协议书
2016/03/22 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server