標籤：style http io os ar java sp div on
<html>
<head>
<style type="text/css">
.show{
background:#7cd2f8;
width:300px;
height:180px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}
.show input{
width:100px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function()
{
$(".show").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元素的事件
{
$(".show").stop();//加上這個之後
var _x = ev.pageX - x;//獲得X軸方向移動的值
var _y = ev.pageY - y;//獲得Y軸方向移動的值
$(".show").animate({left:_x+"px",top:_y+"px"},10);
});
});
$(document).mouseup(function()
{
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})
})
// --></script>
</head>
<body>
<div class="show">
使用者名稱：<input type="text" name="username" /><br />
密 碼：<input type="password" name="password" /><br />
<input type="button" value="提交" onclick="javascript:window.location.href=‘http://www.163.com‘;" />
</div>
</body>
</html>
jquery 拖動DIV
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
