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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
React组件的三种写法总结
Jan 12 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
超棒的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
多重?l件?合查?(二)
2006/10/09 PHP
简明json介绍
2008/09/28 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
深入学习js瀑布流布局
2016/10/14 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
jQuery实现网页拼图游戏
2020/04/22 jQuery
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
react 生命周期实例分析
2020/05/18 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
见习期自我鉴定
2013/11/07 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
给校长的一封检讨书
2014/09/20 职场文书
员工工作自我评价
2014/09/26 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
人与自然观后感
2015/06/16 职场文书
MySQL 数据类型详情
2021/11/11 MySQL