可拖拽(动)的DIV层代码 jQuery带渐变效果

http://www.veryhuo.com 烈火网 2010-07-14 投递稿件

　　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>
提示：可修改后代码再运行!

上一篇：CSS布局之底部导航代码(版权、联系方式等)
下一篇：CSS网站布局之图文简排效果上图文下列表

相关阅读

网友评论

栏目导航

本类年榜本类月榜

推荐软件

推荐阅读相关下载

关于我们 | 联系方式 | 广告服务 | 站内搜索 | 网站合作 | 免责声明 | 网站地图 | 反馈意见 | 回到顶部