jQuery 带渐变模块拖动,拖动的时候会渐入渐出,拖动结束后效果随即结束,其实不用jquery也能实现哦,这里主要是想练习一下jQuery技术,高手勿笑哦。
烈火提示:代码中有详细的注释,可根据自己的需要进行修改,例如:层的坐标、透明度等。
网页演示:点击这里
运行演示:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery拖动层 有淡入淡出效果 - 烈火学院 Liehuo.Net</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="/uploads/common/js/jquery-1.3.2.js"></script> <script type="text/javascript" language="javascript"> var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(document).ready(function(){ $("#div2").click(function(){ //alert("click");//点击(松开后触发) }).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;//移动时根据鼠标位置计算控件左上角的绝对位置 var y=e.pageY-_y; $("#div2").css({top:y,left:x});//控件新位置 } }).mouseup(function(){ _move=false; $("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明 }); }); </script> </head> <body> <div id="div2">烈火提示:拖拽试试,如不能运行效果,请刷新</div> </body> </html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行!