效果预览：http://keleyi.com/keleyi/phtml/jqtexiao/2.htm
原文：http://keleyi.com/a/bjac/hxv86dyi.htm
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery动态提示消息框效果 - 柯乐义</title><base target="_blank" /> 6 <style type="text/css"> 7 * { font-family: monaco; } 8 div.item_keleyi_com { width:100px; height:50px; background-color: maroon; text-align:center; padding-top:25px; } 9 div#item_keleyi_com_1 { position: absolute; top: 50px; left: 50px;color: white; } 10 div#item_keleyi_com_2 { position: absolute; top: 500px; left: 0px;color: white; } 11 div#item_keleyi_com_3 { position: absolute; top: 0px; left: 500px;color: white; } 12 div#item_keleyi_com_4 { position: absolute; top: 500px; left: 500px; color: white;} 13 ul{ list-style:none;padding:0px 0px 0px 10px;}a{color:Blue;} 14 </style> 15 <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/2/stylesheets/jquery.tooltip/jquery.tooltip.css" type="text/css" /> 16 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 17 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/2/javascripts/jquery.tooltip.js"></script> 18 <script type="text/javascript"> 19 $j = jQuery.noConflict(); 20 $j(document).ready(function(){ 21 $j("div.item_kel"+"eyi_com").tooltip(); 22 }); 23 </script> 24 </head> 25 26 <body> 27 <div id="item_keleyi_com_1" class="item_keleyi_com"> 28 柯乐义 29 <div class="tooltip_description" style="display:none" title="柯乐义详细信息"> 30 本网站的名称：柯乐义<br /> 31 本网站的网址： keleyi.com <br /> 32 本站提供jQuery特效,Javascript实例，ASP.NET源码等内容资料，欢迎访问！柯 乐 义 33 <br />工具：http://tool.keleyi.com 34 <br />搜索本站内容：http://so.keleyi.com 35 </div> 36 </div> 37 38 <div id="item_keleyi_com_2" class="item_keleyi_com"> 39 jQuery 40 <div class="tooltip_description" style="display:none" title="jQuery介绍"> 41 网址：http://keleyi.com/menu/jquery/ 42 <br />柯乐义网上有许多jQuery的特效和知识，欢迎访问。 43 jQuery实现脚本与页面的分离<br /> 44 节省开发者学习时间<br /> 45 让JavaScript编程变得有趣<br /><br /><br /> 46 更多信息请访问：http://so.keleyi.com/ <br /> 47 搜索：jQuery的优势与不足 48 </div> 49 </div> 50 51 <div id="item_keleyi_com_3" class="item_keleyi_com"> 52 HTML5 53 <div class="tooltip_description" style="display:none" title="HTML5介绍"> 54 HTML5的发展越来越迈向成熟，很多的应用已经逐渐出现在你我日常生活中了，不只让传统网站上的互动Flash逐渐的被HTML5的技术取代，更重要的是可以透过HTML5的技术来开发跨平台的手机软件，让许多开发者感到十分兴奋！<br /> 55 一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，不单单只是HTML部分而已，CSS 3和JavaScript也有许多的创新，让整个网页程序功能更加缤纷。<br /> 56 keleyi.com 57 </div> 58 </div> 59 60 <div id="item_keleyi_com_4" class="item_keleyi_com"> 61 Javascript 62 <div class="tooltip_description" style="display:none" title="Javascript介绍"> 63 在javascript中，变量的作用域有全局（window对象）作用域和函数调用作用域。<br /> 64 js获取本机的外网/广域网ip地址<br /><br /><br /> 65 更多信息请访问：http://so.keleyi.com/ <br /> 66 搜索：Javascript作用域<br /> 67 js获取本机的外网/广域网ip地址<br /> 68 69 </div> 70 </div> 71 <div style="clear:both;margin-top:130px;width:960px;"> 72 <h3>jQuery动态提示消息框效果</h3> 73 <p>请把光标移动到四个矩形上。适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br />来源：<a href="http://keleyi.com/">柯乐义</a> <a href="http://keleyi.com/a/bjac/hxv86dyi.htm">原文</a></p> 74 <ul> 75 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li> 76 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">导航样式</a></li> 77 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航</a></li> 78 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li> 79 <li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">jquery ui 可折叠手风琴菜单</a></li><li><a href="http://keleyi.com/a/bjac/r55i6646.htm">jQuery :even 偶数选择器</a></li><li><a href="http://keleyi.com/a/bjac/9rf4gedp.htm">展开、收起div的jQuery代码</a></li><li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">jQuery图片走马灯示例</a></li> 80 </ul> 81 </div> 82 </body> 83 </html>
