层的效果-可以拖动的层
——————————————————————————
<script type="text/javascript">
var isOver = false; //是否正在移动的标志变量
var l = 0; //left变量
var t = 0; //top变量
//监听网页加载完成的事件
function init(){
//获取层box的DOM
var boxTitle = document.getElementById('boxTitle');
boxTitle.onmousedown = mouseDown; //设置mousedown事件
boxTitle.onmousemove = mouseMove; //设置mousemove事件
boxTitle.onmouseup = mouseUp; //设置mouseup事件
}
//定义box的鼠标按下事件
function mouseDown(event){
var e = event; //定义事件e变量
x = e.clientX; //得到事件发生的x坐标
y = e.clientY; //得到事件发生的y坐标
//得到box的左上角的坐标
l = parseInt(document.getElementById("box").style.left);
t = parseInt(document.getElementById("box").style.top);
isOver=true; //把正在移动变量设置为true
}
function mouseMove(event){
if(isOver){ //当正在移动的时候
var e = event; //得到事件变量e
//得到box的DOM
var box = document.getElementById("box");
var newleft = l + e.clientX - x;//计算新的left的值
var newtop = t + e.clientY - y; //计算新的top的值
box.style.left = newleft + "px";//设置新的left值，带上单位
box.style.top = newtop + "px"; //设置新的top值，带上单位
}
}
function mouseUp(event){ //鼠标按下释放事件
if(isOver){
isOver = false; //设置变量为false
}
}
</script>
————————————————————————————————
<body style="text-align:center" onload="init();">
<div id="box" style="border: 1px solid black; position: absolute; left: 200px; top: 100px; width: 300px; height: 200px; z-index: 99;">
<h4 align="right" id="boxTitle" style="margin: 0px; padding: 3px; opacity: 0.75; border: 1px solid black; height: 18px; cursor: pointer;">
<span style="float:left; color:white;">这里是标题栏</span></h4>
<div id="boxMsg">这是一个可拖动的层</div>
</div>
</body>
——————————————————————————————
浙公网安备 33010602011771号