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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > firefox浏览器下javascript 拖动层效果与原理分析代码

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 355 ::

收藏到网摘: n/a

javascript下拉框不被选中大类的区别方法 javascript 常用关键字列表集合

firefox下实现可拖动层代码

点击运行可以看到效果:

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

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript下拉框不被选中大类的区别方法 javascript 常用关键字列表集合

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

评论 (0) All