<head>
<title>Jqurey拖动DIV</title>
<style type="text/css">
.show{
background:#7cd2f8;
width:300px;
height:180px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
cursor:move;
}
.show input{
width:100px;
}
</style>
<script type="text/javascript" src="jQuery 2.0.3.js"></script>
<script type="text/javascript"><!--
$(document).ready(function ()
{
$("#showmsg").mousedown(function (e)//e鼠标事件
{
$(this).css("cursor", "move"); //改变鼠标指针的形状
var offset = $(this).offset(); //DIV在页面的位置
var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
$("#showmsg").stop(); //加上这个之后
var _x = ev.pageX - x; //获得X轴方向移动的值
var _y = ev.pageY - y; //获得Y轴方向移动的值
$("#showmsg").animate({ left: _x + "px", top: _y + "px" }, 10);
});
});
$(document).mouseup(function ()
{
$("#showmsg").css("cursor", "default");
$(this).unbind("mousemove");
})
})
// --></script>
</head>
<body>
<div id="showmsg" class="show">
</div>
</body>
</html>
637
09-06
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
