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

1、移动div

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

<html>  

    <head>  

        <title>test2.htmltitle>  

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

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

         

        <script type="text/javascript">  

var b = function(){   

    $("body").append("
我是可以拖动的半透明div,Firefox下暂时只能获取点击事件,event无解
"); $("#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的位置变化而变化

 

你可能感兴趣的:(JQuery)