JQueryウィンドウのドラッグ効果
2275 ワード
JQueryコード
Htmlコード
効果:http://oospace.sinaapp.com/1.php
使用方法:
1、divにclass=“window”を追加すればいい
2,divは一定の幅と高さが必要です
実現原理:
未完待续..
var _z=9999;
$(document).ready(function(){
var _move=false;//
var _x,_y;//
var wd;//
$(".window").click(function(){
//alert("click");// （ ）
this.style.cursor = "default";//
//this.style.zIndex = 999;
}).mousedown(function(e){
_move=true;
wd=$(this);
this.style.cursor = "move";//
this.style.zIndex = _z;//
_z++;
_x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
_y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));
/* wd.fadeTo(20, 0.25); *///
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//
var y=e.pageY-_y;
wd.css({top:y,left:x});//
}
}).mouseup(function(){
_move=false;
/* wd.fadeTo("fast", 1); *///
});
});
});Htmlコード
<style>
.window{
width:100px;
height:100px;
cursor:pointer;
position: relative;
left:100px;
top:90px;
background-color:#DCDCDC;
border-radius: 7px;
z-index: 1;
border:1px solid black;
padding:50px;
}
.body{
padding:20px 30px 30px 30px;
position:absolute;
top:150px;
left:50%;
margin-left:-500px;
width:940px;
min-width:940px;
background-color:#F8F8FF;
border:1px solid #DCDCDC;
border-bottom:5px solid #BA55D3;
border-radius:3px;
behavior:url(js/PIE.htc);
}
</style>
</head>
<body>
<div class="body" >
<div class="window" title=" "> </div>
</div>
</body>効果:http://oospace.sinaapp.com/1.php
使用方法:
1、divにclass=“window”を追加すればいい
2,divは一定の幅と高さが必要です
実現原理:
未完待续..