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

JQuery实现可移动的窗口

2012-09-05 16:00 423 查看
JS代码

function dialogMove(which){//which参数指定的是哪一个窗口的id,比如"#dialog"
var offestLeft;
var offestTop;
var right=false;
$(which).mousedown(function(e){
var x=e.clientX;
var y=e.clientY;
var styleLeft=$(which).css("left");
var styleTop=$(which).css("top");
offestLeft=x-parseInt(styleLeft);
offestTop=y-parseInt(styleTop);
right=true;
});

$(which).mousemove(function(e){
if(right){
var nowLeft=e.clientX-offestLeft;
var nowTop=e.clientY-offestTop;
$(which).css("left",nowLeft).css("top",nowTop);}
});
$(which).mouseup(function(e){
right=false;
});
CSS 代码
#dialog{display:none;
position:absolute;
top:0px;
left:0px;
z-index:1;
background-color:#38B0DE;

-moz-border-radius: 8px 0 0 0;
-webkit-border-radius: 8px 0 0 0;
border-radius: 8px 0 0 0;

}
#title{position:absolute;

background: black;
opacity: 0.2;
filter: alpha(opacity=20);
margin-left:0px;
margin-top:0px;
-moz-border-radius: 8px 0 0 0;
-webkit-border-radius: 8px 0 0 0;
border-radius: 8px 0 0 0;

}
#content{position:absolute;
background-color:#38B0DE;
}
Html代码
<div id="dialog">
<div id="title"> <img id="close" src="../images/desktopPicture/close.png" width="25" height="25" style="float:right"/> </div>
<div id="content">
<iframe id="contentIframe"></iframe>
</div>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息