jQuery div鼠标移动效果

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-1.7.2.min.js"></script>
    <title></title>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        .a {
            position:fixed;
            width:100%;
            height:100%;
            background-color:red;
        }
        .aa {
            height: 100px;
            width: 200px;
            position: absolute;
            background-color: green;
        }
</style>
</head>
<body>
    <div class="a">
    <div class="aa"></div>
        </div>
    <div style="position:absolute;z-index:1;"><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
</body>
</html>
<script>

    $(".aa").mousedown(function (e) {
//设置移动后的默认位置
var endx = 0;
var endy = 0;

//获取div的初始位置，要注意的是需要转整型，因为获取到值带px
var left = parseInt($(".aa").css("left"));
var top = parseInt($(".aa").css("top"));

//获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
var downx = e.pageX;
var downy = e.pageY;   //pageY的y要大写，必须大写！！

//  鼠标按下时给div挂事件
        $(".a").mousemove("mousemove", function (es) {

//es.pageX,es.pageY:获取鼠标移动后的坐标
var endx = es.pageX - downx + left;   //计算div的最终位置
var endy = es.pageY - downy + top;

//带上单位
            $(".aa").css("left", endx + "px").css("top", endy + "px")
        });
    })


    $(".aa").mouseup(function () {
//    鼠标弹起时给div取消事件
        $(".aa").unbind("mousemove");
        $(".a").unbind("mousemove")
    })


//$(".aa").mousedown(function (e) {
//    $(document).bind("mousemove", function (e) {
//        $(".aa").css("left", e.pageX).css("top", e.pageY)
//    });
//})
//$(".aa").mouseup(function () {
//    $(document).unbind("mousemove")
//})


</script>
秒客网

jQuery div鼠标移动效果

相关文章
