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)擊（松開(kāi)后觸發(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)擊后開(kāi)始拖動(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);//松開(kāi)鼠標(biāo)后停止移動(dòng)并恢復(fù)成不透明

  });

});

</script>

</head>

<body>

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

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

</body>

</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery表單提交帶錯(cuò)誤信息提示效果
本篇文章主要介紹了jquery表單提交帶錯(cuò)誤信息提示效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果
這篇文章主要給大家介紹了關(guān)于ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
JQuery樣式與屬性設(shè)置方法分析
這篇文章主要介紹了JQuery樣式與屬性設(shè)置方法,結(jié)合實(shí)例形式分析了jQuery屬性的獲取與設(shè)置、以及樣式的添加與刪除相關(guān)操作技巧,需要的朋友可以參考下
2019-12-12
用jQuery實(shí)現(xiàn)檢測(cè)瀏覽器及版本的腳本代碼
2008-01-01
jQuery+css實(shí)現(xiàn)百度百科的頁(yè)面導(dǎo)航效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)百度百科的頁(yè)面導(dǎo)航效果,需要的朋友可以參考下
2014-12-12
jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例,需要的朋友可以參考下
2014-04-04
jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁(yè)面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
Jquery 獲取checkbox的checked問(wèn)題
這個(gè)郁悶了，今天寫(xiě)這個(gè)功能的時(shí)候發(fā)現(xiàn)了問(wèn)題，上網(wǎng)找了好多資料對(duì)照，更加糾結(jié)
2011-11-11
針對(duì)初學(xué)者的jQuery入門(mén)指南
這篇文章主要介紹了針對(duì)初學(xué)者的jQuery入門(mén)指南,jQuery是當(dāng)下人氣最高的JavaScript庫(kù),需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)列表的全選功能
本文給大家分享的是使用jquery實(shí)現(xiàn)的全選刪除插件的代碼，非常的實(shí)用，本文示例是結(jié)合的ThinkPHP,小伙伴們可以自由擴(kuò)展。
2015-03-03