返回列表 回复 发帖 ‹‹ 上一主题 | 下一主题 ››

JQuery实现感应鼠标弹出气泡框悬停提示的js特效

JQuery实现感应鼠标弹出气泡框悬停提示的js特效

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>JQuery实现感应鼠标弹出气泡框悬停提示的js特效</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. $(".menu li").hover(function() {
  10.   $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
  11. }, function() {
  12.   $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
  13. });
  14. });
  15. </script>

  16. <style type="text/css">
  17. body {
  18. margin: 10px auto;
  19. width: 570px;
  20. font: 75%/120% Arial, Helvetica, sans-serif;
  21. }
  22. .menu {
  23. margin: 100px 0 0;
  24. padding: 0;
  25. list-style: none;
  26. }
  27. .menu li {
  28. padding: 0;
  29. margin: 0 2px;
  30. float: left;
  31. position: relative;
  32. text-align: center;
  33. }
  34. .menu a {
  35. padding: 14px 10px;
  36. display: block;
  37. color: #000000;
  38. width: 144px;
  39. text-decoration: none;
  40. font-weight: bold;
  41. background: url('http://www.csrcode.cn/imagesforcode/201203/button.gif') no-repeat center center;
  42. }
  43. .menu li em {
  44. background: url('http://www.csrcode.cn/imagesforcode/201203/hover.png') no-repeat;
  45. width: 180px;
  46. height: 45px;
  47. position: absolute;
  48. top: -85px;
  49. left: -15px;
  50. text-align: center;
  51. padding: 20px 12px 10px;
  52. font-style: normal;
  53. z-index: 2;
  54. display: none;
  55. }
  56. </style>
  57. </head>

  58. <body>

  59. <ul class="menu">
  60. <li>
  61.   <a href="http://www.websjy.com">网页特效</a>  
  62.   <em>设计源资源网站<br />www.websjy.com</em>
  63. </li>
  64. <li>
  65.   <a href="http://www.websjy.com">设计源网</a>

  66.   <em>珊珊影视在线:bbs.websjy.com </em>
  67. </li>
  68. <li>
  69.   <a href="http://www.websjy.com ">素材下载</a>
  70.   <em>三七分类目录:
  71. www.websjy.com </em>
  72. </li>
  73. </ul>
  74. </body>
  75. </html>
  76. <br><br><br><br>第一次运行本代码,请刷新一下页面先~~
复制代码
附件: 您需要登录才可以下载或查看附件。没有帐号?快速注册  
设计源微博 http://weibo.com/websjy

顶啊顶啊,好贴不顶是一种罪过











官居一品 黑道特种兵

TOP

雅漾晒后修复

TOP

谢谢你哦,你是最棒的











官居一品 黑道特种兵

TOP

谢谢楼主啦~~~~











锦衣夜行 凡人修仙传

TOP

谢谢分享了!

TOP

有意义,有收获,谢谢提供

TOP

好东西哦,大家不要光看不顶

TOP

强烈感谢楼主。www.235ad.com

TOP

谢谢分享!!











唐门高手在异世
独步天下

TOP

返回列表 回复 发帖 ‹‹ 上一主题 | 下一主题 ››

站长推荐 关闭


自由、春天与戒烟主义

自由、春天与戒烟主义  李少君   《初春》  当鸡的小分队向草丛深处探险的时候 牛在田野,狗在路边,蝴蝶在溪流旁 ...


查看

本论坛已升级,此站将停止注册、发帖、回复!
10 秒钟将自动跳转到新站。

等不及了,直接点击

本站通用下载
帐号:test

密码:websjy