本文實例講述了jQuery實作DIV層淡入淡出拖曳特效的方法。分享給大家供大家參考。具體實作方法如下： 複製程式碼 程式碼如下: jQuery實現DIV層淡入淡出的拖曳效果) <br /> #div2<br /> {<br /> position:absolute;<br /> width:400px;<br /> height:300px;<br /> border:1px solid #333333;<br /> background-color:#777788;<br /> text-align:center;<br /> line-height:400%;<br /> font-size:13px;<br /> left:80px;<br /> top:20px;<br /> }<br /> <br /> var _move=false;//移動標記<br /> var _x,_y;//滑鼠離控制左上角的相對位置<br /> $(document).ready(function(){<br /> $("#div2").click(function(){<br /> //alert("click");//點選（放開後觸發）<br /> }).mousedown(function(e){<br /> _move=true;<br /> _x=e.pageX-parseInt($("#div2").css("left"));<br /> _y=e.pageY-parseInt($("#div2").css("top"));<br /> $("#div2").fadeTo(20, 0.25);//點擊後開始拖曳並透明顯示<br /> });<br /> $(document).mousemove(function(e){<br /> if(_move){<br /> var x=e.pageX-_x;///移動時依照滑鼠位置計算控制項左上角的絕對位置<br /> var y=e.pageY-_y;<br /> $("#div2").css({top:y,left:x});//控制新位置<br /> }<br /> }).mouseup(function(){<br /> _move=false;<br /> $("#div2").fadeTo("fast", 1);//放開滑鼠後停止移動並恢復到不透明<br /> });<br /> });<br /> 看不到效果，請重新整理本頁。 支援拖曳如果無法拖曳，請刷新本頁 希望本文所述對大家的jQuery程式設計有所幫助。
