前言：
当前兄弟们对“javascript鼠标移上去换色”大致比较看重，姐妹们都需要了解一些“javascript鼠标移上去换色”的相关知识。那么小编同时在网上收集了一些有关“javascript鼠标移上去换色””的相关内容，希望看官们能喜欢，各位老铁们一起来学习一下吧！简易拖拽
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:200px; height:200px; background:red; position:absolute;}</style><script>window.onload=function (){var oDiv=document.getElementById('div1');var disX=0;var disY=0;oDiv.onmousedown=function (ev){var oEvent=ev||event;disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距离disY=oEvent.clientY-oDiv.offsetTop; //拖拽距离oDiv.onmousemove=function (ev){var oEvent=ev||event;oDiv.style.left=oEvent.clientX-disX+'px';oDiv.style.top=oEvent.clientY-disY+'px';};oDiv.onmouseup=function (){oDiv.onmousemove=null;oDiv.onmouseup=null;};};};</script></head><body><div id="div1"></div></body></html>程序问题:鼠标拖拽过快,鼠标指针与拖拽div对象脱离
解决方法:直接给document加事件(因为div对象范围太小,鼠标移动就与拖拽div对象脱离)
将oDiv改成document对象
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:200px; height:200px; background:red; position:absolute;}</style><script>window.onload=function (){var oDiv=document.getElementById('div1');var disX=0;var disY=0;oDiv.onmousedown=function (ev){var oEvent=ev||event;disX=oEvent.clientX-oDiv.offsetLeft;disY=oEvent.clientY-oDiv.offsetTop;document.onmousemove=function (ev){var oEvent=ev||event;oDiv.style.left=oEvent.clientX-disX+'px';oDiv.style.top=oEvent.clientY-disY+'px';};document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};};};</script></head><body><div id="div1"></div></body></html>程序问题: FF下，空Div拖拽Bug(残影)
解决方法: 阻止默认事件
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:200px; height:200px; background:red; position:absolute;}</style><script>window.onload=function (){var oDiv=document.getElementById('div1');var disX=0;var disY=0;oDiv.onmousedown=function (ev){var oEvent=ev||event;disX=oEvent.clientX-oDiv.offsetLeft;disY=oEvent.clientY-oDiv.offsetTop;document.onmousemove=function (ev){var oEvent=ev||event;oDiv.style.left=oEvent.clientX-disX+'px';oDiv.style.top=oEvent.clientY-disY+'px';};document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};return false; //阻止默认事件(拖动残影)};};</script></head><body><div id="div1"></div></body></html>防止拖出页面
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:200px; height:200px; background:red; position:absolute;}</style><script>window.onload=function (){var oDiv=document.getElementById('div1');var disX=0;var disY=0;oDiv.onmousedown=function (ev){var oEvent=ev||event;disX=oEvent.clientX-oDiv.offsetLeft;disY=oEvent.clientY-oDiv.offsetTop;document.onmousemove=function (ev){var oEvent=ev||event;var l=oEvent.clientX-disX;var t=oEvent.clientY-disY;//修正拖动位置if(l<0){l=0;}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){l=document.documentElement.clientWidth-oDiv.offsetWidth;}if(t<0){t=0;}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){t=document.documentElement.clientHeight-oDiv.offsetHeight;}oDiv.style.left=l+'px';oDiv.style.top=t+'px';};document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};return false;};};</script></head><body><div id="div1"></div></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
