Jquery实现可移动的窗口
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>