昨天閑着無聊寫了一個最簡單的彈出層效果,支持拖動,鼠標放在標題欄指針會變成十字,但是點下和拖動的時候卻變成了輸入,IE內核瀏覽器正常,哪個高手能幫着解決一下,感謝
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> 5 <style type="text/css"> 6 #login 7 { 8 display:none; 9 border:10px solid #3366FF; 10 height:30%; 11 width:50%; 12 position:absolute;/*讓節點脫離文檔流,我的理解就是,從頁面上浮出來,不再按照文檔其它內容布局*/ 13 top:24%;/*節點脫離了文檔流,如果設置位置需要用top和left,right,bottom定位*/ 14 left:24%; 15 z-index:2;/*個人理解為層級關系,由於這個節點要在頂部顯示,所以這個值比其余節點的都大*/ 16 background: white; 17 } 18 #over 19 { 20 width: 100%; 21 height: 100%; 22 opacity:0.8;/*設置背景色透明度,1為完全不透明,IE需要使用filter:alpha(opacity=80);*/ 23 filter:alpha(opacity=80); 24 display: none; 25 position:absolute; 26 top:0; 27 left:0; 28 z-index:1; 29 background: silver; 30 } 31 #title 32 { 33 background:greenyellow; 34 width:100%; 35 height:1.5em; 36 } 37 #title a 38 { 39 float:right; 40 } 41 </style> 42 </head> 43 <body> 44 <a href="javascript:show()">彈出</a> 45 <div id="login"> 46 <div id="title" style="cursor:move"> 47 <a href="javascript:hide()">關閉</a></div> 48 <div>這里是關閉彈窗的內容</div> 49 <div>點擊標題欄進行拖動</div> 50 </div> 51 <div id="over"></div> 52 </body> 53 </html> 54 <script type="text/javascript" src="jquery.min.js"></script> 55 <script type="text/javascript"> 56 var x_max = $(window).width(); 57 var y_max = $(window).height(); 58 var div_width = $("#login").width() + 20;//20是邊框 59 var div_height = $("#login").height() + 20; 60 var _x_max = x_max - div_width;//最大水平位置 61 var _y_max = y_max - div_height;//最大垂直位置 62 function show() 63 { 64 var x = (x_max - div_width) / 2;//水平居中 65 var y = (y_max - div_height) / 2;//垂直居中 66 $("#login").css({"left": x + 'px',"top": y + 'px'});//設置初始位置,防止移動后關閉再打開位置在關閉時的位置 67 $("#login").css("display","block"); 68 $("#over").css("display","block"); 69 } 70 function hide() 71 { 72 $("#login").css("display","none"); 73 $("#over").css("display","none"); 74 } 75 $(document).ready(function(){ 76 $("#title").mousedown(function(title){//title代表鼠標按下事件 77 var point_x = title.pageX;//鼠標橫坐標,有資料說pageX和pageY是FF獨有,不過經過測試chrome和IE8是可以支持的,其余的瀏覽器沒有裝,沒測 78 var point_y = title.pageY;//鼠標縱坐標 79 var title_x = $(this).offset().left;//標題橫坐標 80 var title_y = $(this).offset().top;//標題縱坐標 81 $(document).bind("mousemove",function(move){ 82 $(this).css("cursor","move"); 83 var _point_x = move.pageX;//鼠標移動后的橫坐標 84 var _point_y = move.pageY;//鼠標移動后的縱坐標 85 var _x = _point_x - point_x;//移動的水平距離 86 var _y = _point_y - point_y;//移動的縱向距離 87 // console.debug('水平位移: ' + _x + '垂直位移: ' + _y); 88 var __x = _x + title_x;//窗口移動后的位置 89 var __y = _y + title_y;//窗口移動后的位置 90 __x > _x_max ? __x = _x_max : __x = __x;//水平位置最大為651像素 91 __y > _y_max ?__y = _y_max : __y = __y;//垂直位置最大為300像素 92 __x < 0 ? __x = 0 : __x = __x;//水平位置最小為0像素 93 __y < 0 ?__y = 0 : __y = __y;//垂直位置最小為0像素 94 // console.debug('標題X:' + title_x + '標題Y:' + title_y); 95 $("#login").css({"left":__x,"top":__y}); 96 });//綁定鼠標移動事件,這里綁定的是標題,但是如果移動到區域外的話會導致事件不觸發 97 $(document).mouseup(function(){ 98 $(this).unbind("mousemove");//鼠標抬起,釋放綁定,防止松開鼠標后,指針移動窗口跟着移動 99 }); 100 }); 101 }); 102 </script>