您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery实现鼠标经过提示信息的地图热点效果
作者：佚名 责任编辑：admin 更新时间：2022-06-22
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</- 上一个程序编程： jquery获取节点名称
- 下一个程序编程： jquery插件qrcode在线生成二维码
