<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery 模塊拖動,拖動層效果</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="js/jquery-1.9.1.min.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>
jquery實現可拖拽的浮動框
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.