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


Posted in Javascript onDecember 04, 2007

前言

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

firefox下实现可拖动层代码

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

<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 像素坐标。

如图:图片来源于网络

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

总结

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

Javascript 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
JavaScript中string对象
Jun 12 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
JS函数式编程实现XDM一
Jun 16 Javascript
超棒的javascript页面顶部卷动广告效果
Dec 01 #Javascript
js同时按下两个方向键
Dec 01 #Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 #Javascript
jquery api参考 visualjquery 中国线路 速度快
Nov 30 #Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 #Javascript
jquery 指南/入门基础
Nov 30 #Javascript
Prototype1.6 JS 官方下载地址
Nov 30 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
会计出纳员的自我评价
2014/01/15 职场文书
中学生期末评语
2014/02/03 职场文书
会计专业自我鉴定
2014/02/10 职场文书
爱心倡议书范文
2014/05/12 职场文书
项目合作意向书模板
2014/07/29 职场文书
小学生节水倡议书
2015/04/29 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
新党员入党决心书
2015/09/22 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server