快捷導航

jQuery實現(xiàn)DIV層淡入淡出拖動特效的方法

更新時間：2015年02月13日 14:31:04 作者：代碼家園

這篇文章主要介紹了jQuery實現(xiàn)DIV層淡入淡出拖動特效的方法,涉及jQuery針對鼠標操作的常用技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)DIV層淡入淡出拖動特效的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<html>

<head>

<title>jQuery實現(xiàn)DIV層淡入淡出的拖動效果)</title>

<style type="text/css">

#div2

{

    position:absolute;

    width:400px;

    height:300px;

    border:1px solid #333333;

    background-color:#777788;

    text-align:center;

    line-height:400%;

    font-size:13px;

    left:80px;

    top:20px;

}

</style>

<script type="text/javascript" language="javascript" src="/images/jquery.js"></script>

<script type="text/javascript" language="javascript">

var _move=false;//移動標記

var _x,_y;//鼠標離控件左上角的相對位置

$(document).ready(function(){

    $("#div2").click(function(){

        //alert("click");//點擊（松開后觸發(fā)）

        }).mousedown(function(e){

        _move=true;

        _x=e.pageX-parseInt($("#div2").css("left"));

        _y=e.pageY-parseInt($("#div2").css("top"));

        $("#div2").fadeTo(20, 0.25);//點擊后開始拖動并透明顯示

    });

    $(document).mousemove(function(e){

        if(_move){

            var x=e.pageX-_x;//移動時根據(jù)鼠標位置計算控件左上角的絕對位置

            var y=e.pageY-_y;

            $("#div2").css({top:y,left:x});//控件新位置

        }

    }).mouseup(function(){

    _move=false;

    $("#div2").fadeTo("fast", 1);//松開鼠標后停止移動并恢復成不透明

  });

});

</script>

</head>

<body>

<h4>看不到效果，請刷新一下本頁面。</h4>

    <div id="div2">支持拖拽<br>如果不能拖動，請刷新本頁面</div>

</body>

</html>