快捷導(dǎo)航

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

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

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

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

<html>

<head>

<title>jQuery實(shí)現(xiàn)DIV層淡入淡出的拖動(dòng)效果)</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;//移動(dòng)標(biāo)記

var _x,_y;//鼠標(biāo)離控件左上角的相對(duì)位置

$(document).ready(function(){

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

        //alert("click");//點(diǎn)擊（松開后觸發(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);//點(diǎn)擊后開始拖動(dòng)并透明顯示

    });

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

        if(_move){

            var x=e.pageX-_x;//移動(dòng)時(shí)根據(jù)鼠標(biāo)位置計(jì)算控件左上角的絕對(duì)位置

            var y=e.pageY-_y;

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

        }

    }).mouseup(function(){

    _move=false;

    $("#div2").fadeTo("fast", 1);//松開鼠標(biāo)后停止移動(dòng)并恢復(fù)成不透明

  });

});

</script>

</head>

<body>

<h4>看不到效果，請(qǐng)刷新一下本頁面。</h4>

    <div id="div2">支持拖拽<br>如果不能拖動(dòng)，請(qǐng)刷新本頁面</div>

</body>

</html>