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

来源：互联网发布：c语言关机程序编辑：程序博客网时间：2024/05/01 18:26

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的位置变化而变化

0 0