当前位置: 首页  >  JQuery  >  jQuery实现鼠标移到元素上动态提示消息框效果

jQuery实现鼠标移到元素上动态提示消息框效果 TOP

当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下

当光标移动到某些元素上时,会弹出像tips的提示框。
 
  1. <!DOCTYPE html>    
  2.  <html>    
  3.  <head>    
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  5.  <title>jQuery动态提示消息框效果--www.jbxue.com</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://jbxue.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://jbxue.com/">脚本学堂</a> <a href="http://jbxue.com/a/bjac/hxv86dyi.htm">原文</a></p>    
  74.  <ul>    
  75.  <li><a href="http://jbxue.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>    
  76.  <li><a href="http://jbxue.com/a/bjac/182di68b.htm">导航样式</a></li>    
  77.  <li><a href="http://jbxue.com/a/bjac/mt97p5y9.htm">侧边导航</a></li>    
  78.  <li><a href="http://jbxue.com/dev/3068696139522ae4.htm">树形菜单</a></li>    
  79.  <li><a href="http://jbxue.com/a/bjac/ck9atu5j.htm">jquery ui 可折叠手风琴菜单</a></li><li><a href="http://jbxue.com/a/bjac/r55i6646.htm">jQuery :even 偶数选择器</a></li><li><a href="http://jbxue.com/a/bjac/9rf4gedp.htm">展开、收起div的jQuery代码</a></li><li><a href="http://jbxue.com/a/bjac/mnmpm4bv.htm">jQuery图片走马灯示例</a></li>    
  80.  </ul>    
  81.  </div>    
  82.  </body>    
  83.  </html>   

 

Views:1406   Posted at:2013-10-21
收藏 推荐 打印 | 录入:Admin | 阅读:0