div层的移动及性能优化

 更新时间:2010年11月16日 23:00:24   作者:  
层的移动本来很简单,用jquery插件或者自己写一个也不难,但是最近一个ipad项目里,发现用手移动div会感觉很卡,体验很差(可能是ipad的配置根不上pc)。
同样如果一个页面结构很复杂或者电脑配置不好的话也会出现这种情况。为了弄清变慢的原因,我们做了几个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 getElementByTagName的使用

    javascript getElementByTagName的使用

    javascript getElementByTagName当鼠标放上去时将超链接的颜色设为蓝色的。
    2009-06-06
  • js实现简单分页导航栏效果

    js实现简单分页导航栏效果

    这篇文章主要为大家详细介绍了js实现简单分页导航栏效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 微信小程序实现登录遮罩效果

    微信小程序实现登录遮罩效果

    这篇文章主要为大家详细介绍了微信小程序实现登录遮罩效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Web 开发中Ajax的Session 超时处理方法

    Web 开发中Ajax的Session 超时处理方法

    下面小编就为大家带来一篇Web 开发中Ajax的Session 超时处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 网页中右键功能的实现方法之contextMenu的使用

    网页中右键功能的实现方法之contextMenu的使用

    本文介绍一种网页中实现右键功能的方案–contextMenu,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • javascript倒计时效果实现

    javascript倒计时效果实现

    这篇文章为大家分享了javascript倒计时效果实现代码段,现今团购网、电商网、门户网等,常使用时间记录重要的时刻,如时间显示、倒计时差、限时抢购等,特别是双十一活动,需要的朋友可以参考下
    2015-11-11
  • 原生JS下拉加载插件分享

    原生JS下拉加载插件分享

    本文主要分享了原生JS下拉加载插件的实现代码。具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JS使用正则表达式找出最长连续子串长度

    JS使用正则表达式找出最长连续子串长度

    这篇文章主要介绍了js 正则找出最长连续子串长度的实现代码,需要的朋友可以参考下
    2017-10-10
  • 利用ES6实现单例模式及其应用详解

    利用ES6实现单例模式及其应用详解

    单例是在程序设计非常基础的东西,这篇文章主要给大家介绍了关于利用ES6实现单例模式及其应用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-12-12
  • 使用javascript做时间倒数读秒功能的实例

    使用javascript做时间倒数读秒功能的实例

    今天小编就为大家分享一篇关于使用javascript做时间倒数读秒功能的实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论