萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery實現鼠標經過提示信息的地圖熱點效果
jQuery實現鼠標經過提示信息的地圖熱點效果
jQuery實現鼠標經過提示信息的地圖熱點效果
這是一個升級版本，更新了一個在IE8裡的小問題，加入了提示框的內容自動換行處理(北京點上有演示)!估計差不多該是最後樣式了。IE6、IE8、谷歌、火狐、測試正常。
jQuery實現鼠標經過提示信息的地圖熱點效果
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>地圖熱點效果-鼠標經過彈出提示信息</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script><!-- 建議用1.7的jquery --> <script type="text/javascript">var jq = jQuery.noConflict();</script><!-- 為了讓DZ X2支持jquery 加載時替換庫中的$為jq --> <style type="text/css"> .map img { width:496px; height: 415px; } .mapDiv { padding: 5px; width:170px; height:61px; color:#369; background: url('hotarrow.gif') no-repeat; } </style><!-- CSS樣式 --> <body> <!-- JS 如果需要讀取變量最好寫在網頁裡,也可以寫在JS文件裡!--> <script type="text/javascript"> jq(document).ready(function(){ jQuery.fn.extend({ TitleShow: function(strHTML) { var xOffset = 80; var yOffset = -75; var preview = jq("#preview_container"); if(preview.length<=0){ jq("body").append("<div id='preview_container'></div>"); preview = jq("#preview_container"); } preview.css({ "display":"none", "position":"absolute", "width":"150px", "word-break":"break-all" }); return this.each(function() { var _this = jq(this); _this.hover( function(e){ preview.html(strHTML); preview .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .css("opaticy",0) .show() .stop() .animate({"opacity":0.9},300); },function(){ preview .stop() .animate({"opacity":0},300,function(){ jq(this).hide(); }); } ) _this.mousemove(function(e){ preview .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }); } }); jq("#beijing").TitleShow("<div class='mapDiv'>北京地圖熱點效果-這裡是測試換行效果-這裡是測試換行效果</div>"); jq("#tianjin").TitleShow("<div class='mapDiv'>天津地圖熱點效果2</div>"); jq("#shanghai").TitleShow("<div class='mapDiv'>上海地圖熱點效果3</div>"); jq("#chongqing").TitleShow("<div class='mapDiv'>重慶地圖熱點效果4</div>"); jq("#hebei").TitleShow("<div class='mapDiv'>河北地圖熱點效果5</div>"); jq("#shanxi").TitleShow("<div class='mapDiv'>山西地圖熱點效果6</div>"); jq("#neimenggu").TitleShow("<div class='mapDiv'>內蒙古地圖熱點效果7</div>"); jq("#liaoning").TitleShow("<div class='mapDiv'>地圖熱點效果8</div>"); jq("#jilin").TitleShow("<div class='mapDiv'>地圖熱點效果9</div>"); jq("#heilongjiang").TitleShow("<div class='mapDiv'>黑龍江地圖熱點效果10</div>"); jq("#jiangsu").TitleShow("<div class='mapDiv'>地圖熱點效果11</div>"); jq("#zhejiang").TitleShow("<div class='mapDiv'>地圖熱點效果12</div>"); jq("#anhui").TitleShow("<div class='mapDiv'>地圖熱點效果13</div>"); jq("#fujian").TitleShow("<div class='mapDiv'>地圖熱點效果14</div>"); jq("#jiangxi").TitleShow("<div class='mapDiv'>地圖熱點效果15</div>"); jq("#shandong").TitleShow("<div class='mapDiv'>山東地圖熱點效果16</div>"); jq("#henan").TitleShow("<div class='mapDiv'>河南地圖熱點效果17</div>"); jq("#hubei").TitleShow("<div class='mapDiv'>湖北地圖熱點效果18</div>"); jq("#hunan").TitleShow("<div class='mapDiv'>地圖熱點效果l9</div>"); jq("#guangdong").TitleShow("<div class='mapDiv'>地圖熱點效果20e</div>"); jq("#guangxi").TitleShow("<div class='mapDiv'>地圖熱點效果21</javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved