今天需要做一个悬浮效果,做了一个简单的拖拽
<script language="javascript">
var firstX=0; var firstY=0;
var relativeX=0; var relativeY=0;
var move=false;
//mouse position
function mouseCoords()
{
var ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function StartDrag(obj)
{
obj.setCapture();
obj.style.background="#5684FE";
relativeX=parseInt(mouseCoords().x)-parseInt(obj.style.left);
relativeY=parseInt(mouseCoords().y)-parseInt(obj.style.top);
move=true;
}
function Drag(obj)
{
if(move)
{
obj.style.left=parseInt(mouseCoords().x)-parseInt(relativeX);
obj.style.top=parseInt(mouseCoords().y)-parseInt(relativeY);
}
}
function StopDrag(obj)
{
obj.style.background="#5684FE";
obj.releaseCapture();
move = false;
}
</script>
<div runat="server" id="divInstance" style="display: none; position: absolute;
width: 400px; height: 30px; top: 50px; left: 50px; z-index: 1000; background: #5684FE"
onmousedown="StartDrag(this)" onmousemove="Drag(this)" onmouseup="StopDrag(this)">
123456
</div>