您的位置：首页 > Web前端 > JavaScript

js实现层的移动与上下层的切换,模仿他人代码 --firefox无法实现

2011-06-10 10:43 671 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:script language="javascript" type="text/javascript"><!--
var currentMoveObj = null;         //当前拖动对象
var indexnum=0;
var relLeft;         //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
//当对象被按下时，记录该对象
indexnum++;
currentMoveObj = obj;
//setCapture()可以让对象捕捉到鼠标事件，跟随着鼠标做出响应
currentMoveObj.setCapture();
//设置对象的定位方式为absolute，便于计算拖动位置
currentMoveObj.style.position = "absolute";
currentMoveObj.style.zIndex=indexnum;
//记录鼠标按下时距离被移动物体的左上角的偏移量
//以便在移动鼠标的时候正确计算位移
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.attachEvent('onmouseup',function(){
//releaseCapture()执行和setCapture()相反的操作
currentMoveObj.releaseCapture();
currentMoveObj = null;      //当鼠标释放时同时释放拖动对象
});
function f_move(obj)
{
if(currentMoveObj != null)
{
//真正移动鼠标的时候，计算被移动物体的实际位置
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}
// --></mce:script>
</head>
<body>
<div id="1234" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)">
<img style="background-color:#cccccc;width:60px;height:60px;"></img>1
</div>
<div id="12345" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)">
<img style="background-color:#ccccc;width:60px;height:60px;"></img>2
</div>
<div id="12346" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)">
<img style="background-color:#ccccc;width:60px;height:60px;"></img>3
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航