基於jquery的可拖拽浮動層
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-git1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var moveFlag = false;
var _x,_y;
var $movediv = $("#d1");
$window = $(window);
$movediv.css({left:($window.width()-$movediv.width()) /2,top:10}); //居中顯示
$movediv.mousedown(function(event) {
moveFlag = true;
$(this).addClass("hand"); //移動標識
_x = event.pageX - parseInt($(this).css("left"));
_y = event.pageY - parseInt($(this).css('top'));
$(this).fadeTo(20,0.3); //透明處理
});
$(document).mousemove(function(e){
if(moveFlag) {
var x = e.pageX - _x;
var y = e.pageY - _y;
$movediv.css({top:y,left:x});
}
}).mouseup(function(e){
moveFlag = false;
$movediv.fadeTo("fast",1);
$movediv.removeClass("hand");
});
});
</script>
<style type="text/css">
#d1 {
/* top: 10px;
left: 10px; */
width: 300px;
height: 300px;
margin: 0 auto;
background-color: green;
box-shadow: 0px 0px 20px blue;
border-radius: 10px;
position: absolute;
}
.hand {
cursor: move;
}
</style>
</head>
<body>
<div id="d1">
<H2 align="center" valign="center">drag me!</H2>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章