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

jquery简单可拖动可关闭的div

2013-11-20 09:07 447 查看

引入文件：

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

CSS部分：

<style type="text/css">

#div1{

top:100px;

left:100px;

width:200px;

height:200px;

position:absolute;

background:pink;

display:none;

}

</style>

主体：

<body>

<input id="b1" type="button" value="点我，有div哦"/>

<div id="div1" align="center">

<div id="div2" align="right" style="float:right;background:pink;width:30px;height:30px;" ><font color="red">X</font></div>

<br/>

<br/>

我的青春谁做主？

</div>

</body>

JS:

<script type="text/javascript">

$("#b1").click(function(){

$("#div1").show();

});

$("#div2").click(function(){

$("#div1").hide();

});

var bool=false;

var x=null;

var y=null;

$("#div1").mousedown(function(event) {

bool = true;

if (x == null)

x= event.offsetX;

if(y==null)

y= event.offsetY;

$(this).css('cursor', 'move');

}).mouseup(function(){

bool=false;

});

$(document).mousemove(function(e){

if(!bool)

return;

var x1=event.clientX-x;

var y1=event.clientY-y;

$("#div1").css("left",x1);

$("#div1").css("top",y1);

});

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航