当前位置：Gxlcms > JavaScript > firefox浏览器下javascript拖动层效果与原理分析代码_javascript技巧

firefox浏览器下javascript拖动层效果与原理分析代码_javascript技巧

时间：2021-07-01 10:21:17 帮助过：7人阅读

firefox下实现可拖动层代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.gxlcms.com 拖动层效果代码</title> 
<script> 
 var obj=0; 
 var x=0; 
 var y=0; 
 var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE 
 var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox 
 function find(evt,objDiv){ 
  obj = objDiv 
  if (ff){ 
    x = document.documentElement.scrollLeft + evt.layerX; 
    y = document.documentElement.scrollTop + evt.layerY; 
     
    if (document.documentElement.scrollTop > 0){ 
     y = evt.layerY - document.documentElement.scrollTop; 
    } 
     
    if (document.documentElement.scrollLeft > 0){ 
     x = evt.layerX - document.documentElement.scrollLeft; 
    } 
   } 
  if (ie){ 
    x = document.documentElement.scrollLeft + evt.offsetX; 
    y = document.documentElement.scrollTop + evt.offsetY; 
     
    if (document.documentElement.scrollTop > 0){ 
     y = evt.offsetY - document.documentElement.scrollTop; 
    } 
     
    if (document.documentElement.scrollLeft > 0){ 
     x = evt.offsetX - document.documentElement.scrollLeft; 
    } 
   } 
 } 
 function dragit(evt){ 
  if(obj == 0){ 
   return false 
  } 
  else{ 
   obj.style.left = evt.clientX - x + "px"; 
   obj.style.top = evt.clientY - y + "px"; 
  } 
 } 
</ script> 
</head> 
<body style="margin:0" onmousemove="dragit(event)" onmouseup="obj = 0">

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

firefox浏览器下javascript拖动层效果与原理分析代码_javascript技巧

人气教程排行