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

jQuery 实现Div 可拖动

2013-05-30 15:17 309 查看
<!DOCTYPE html>

<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.7.2.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>

效果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航