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

jQuery控制div层，使其移动、改变位置

2014-02-26 17:00 295 查看

1、移动div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>test2.html</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">

var b = function(){

$("body").append("<div id='hid' style='background:red;position:absolute;width:880;height:120'>我是可以拖动的半透明div，Firefox下暂时只能获取点击事件，event无解</div>");

$("#hid").fadeTo("slow", 0.5);

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

var offset=$("#hid").offset();

x1=event.clientX-offset.left;

y1=event.clientY-offset.top;

$("#hid").mousemove(function(event){

$("#hid").css("left",(event.clientX-x1)+"px");

$("#hid").css("top",(event.clientY-y1)+"px");

/*

$("#hid").animate({
left : _x + "px",
top : _y + "px"
}, 10);

*/

});

$("#hid").mouseup(function(event){

$("#hid").unbind("mousemove");

});

});

}

</script>

</head>

<body>

<input type=button value="点我显示div" onclick="b()">

</body>

</html>

View Code
2、div跟随某个控件的位置改变而改变

var offset = $("#selectInfoDiv").offset();  //获取相对控件的偏移位置
var left=offset.left;
var top=offset.top;
var width = $("#selectInfoDiv").width();   //该控件的宽度和高度
var height= $("#selectInfoDiv").height();
top=(top+(height-206)/2)<200?200:(top+(height-206)/2);
$("#addDiv").css({left:left+((width-666)/2),top:top});   //addDiv是跟随selectInfoDiv的位置变化而变化

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

标签：

相关文章推荐

新的分享

章节导航