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

基于jquery的可拖拽浮动层

2014-03-08 00:11 211 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery javascript 可拖拽div

相关文章推荐

新的分享

章节导航