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

 更新时间:2007年12月04日 18:17:56   投稿:mdxy-dxy  
这篇文章主要给大家介绍了关于在firefox浏览器下如何利用javascript实现拖动层效果,以及其中的原理分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,下面来一起看看吧

前言

本文主要给大家介绍了关于firefox下js实现拖动层效果的方法,下面话不多说了,来一起看看详细的介绍吧。

firefox下实现可拖动层代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.jb51.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"> 

<div id="aaa" style="background-color:red;width:200pt;height:200pt;position:absolute"> 
<div id="aa" style="width:200pt;height:20pt;background:blue;position:absolute" onmousedown="find(event,document.getElementById('aaa'))"></div> 
</div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 
</body> 
</html> 

JavaScript 中一些概念理解 :clientX、clientY、offsetX、offsetY、screenX、screenY

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的(this)对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的(this)对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

如图:图片来源于网络

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 在浏览器测试JavaScript的方法小结

    在浏览器测试JavaScript的方法小结

    测试JavaScript代码是一件很痛苦的事情,很多情况下都是写好代码不断刷新测试,其实chrome浏览器的console下就很方便,这里就为大家简单分享一下
    2023-03-03
  • js判断上传文件的类型和大小示例代码

    js判断上传文件的类型和大小示例代码

    上传文件的类型和大小可以js进行判断,在本文有个不错的示例,适合初学者,感兴趣的朋友可以参考下
    2013-10-10
  • weakMap为什么是弱引用原理

    weakMap为什么是弱引用原理

    这篇文章主要为大家介绍了weakMap为什么是弱引用原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

    JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

    这篇文章主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • JavaScript中Iterator迭代器接口和循环

    JavaScript中Iterator迭代器接口和循环

    这篇文章主要介绍了JavaScript中Iterator迭代器接口和循环,迭代器是数据结构遍历的一种机制迭代器主要是提供for...of使用,更多相关内推需要的小伙伴可以参考下面文章内容
    2022-06-06
  • JavaScript实现的可变动态数字键盘控件方式实例代码

    JavaScript实现的可变动态数字键盘控件方式实例代码

    本篇文章主要介绍了JavaScript实现的可变动态数字键盘控件方式实例代码,具有一定的参考价值,有兴趣的可以了了解一下
    2017-07-07
  • 浅析我对JS延迟异步脚本的思考

    浅析我对JS延迟异步脚本的思考

    这篇文章主要介绍了浅析我对JS延迟异步脚本的思考,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • jquery div模态窗口的简单实例

    jquery div模态窗口的简单实例

    下面小编就为大家带来一篇jquery div模态窗口的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript函数的特性与应用实践深入详解

    JavaScript函数的特性与应用实践深入详解

    这篇文章主要介绍了JavaScript函数的特性与应用实践,结合实例形式较为深入的分析了javascript函数相关概念、特性、用法及操作注意事项,需要的朋友可以参考下
    2018-12-12
  • JavaScript中boolean类型之三种情景实例代码

    JavaScript中boolean类型之三种情景实例代码

    下面小编就为大家带来一篇JavaScript中boolean类型之三种情景实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论