本文实例讲述了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程序设计有所帮助。
