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

firefox下实现可拖动层代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.phpstudy.net 拖动层效果代码</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需刷新才能执行]

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类