div的提示框显示(转载)

来源：互联网发布：最新网络盗刷编辑：程序博客网时间：2024/05/16 09:03

借鉴来自于：

http://www.cnblogs.com/gulixiang/archive/2010/03/18/1688595.html

http://blog.csdn.net/huchiwei/article/details/7898627

为了增加用户体验，当我们的鼠标进行的触碰到页面的某个位置的时候，可以显示出相应的具体的信息，提高的用户体验。

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>    <style type="text/css">        .receiptInfo{            border: 2px solid #3AA7ED;            height:200px;            width:200px;            display:none;        }        .line_index{            background-color:#3AA7ED;            height:1px;            width:100%;        }        .mtab{            font-size:18px;        }                </style>  </head>    <body>    <a id="viewReInfo" href="#" >查看div层</a>    <div id="receiptInfo" class="receiptInfo"></div>    <table  width="0" border="0" cellpadding="0"  cellspacing="0" style="display:none" >        <tr><td> absolute ['æbsəluːt]</td></tr>        <tr><td>基本翻译</td></tr>        <tr><td>n. 绝对；绝对事物</td></tr>        <tr><td>adj. 绝对的；完全的；专制的</td></tr>        <tr><td>网络释义</td></tr>        <tr><td>Absolute:绝对 | 完全的 | 纯粹</td></tr>    </table>  </body>    <script type="text/javascript">      $(function(){          $('#viewReInfo').myHoverTip('receiptInfo');      });      $.fn.myHoverTip = function(divId) {            var div = $("#" + divId); //要浮动在这个元素旁边的层            div.css("position", "absolute");//让这个层可以绝对定位            var self = $(this); //当前对象            self.hover(function() {                div.css("display", "block");                var p = self.position(); //获取这个元素的left和top                var x = p.left + self.width();//获取这个浮动层的left                var docWidth = $(document).width();//获取网页的宽                if (x > docWidth - div.width() - 20) {                    x = p.left - div.width();                }                div.css("left", x);                div.css("top", p.top+20);                var hcontent="<table  width='0' border='0' cellpadding='0'  cellspacing='0' id='mtab' class='mtab' ><tr><td> absolute ['æbsəluːt]<div class='line_index'></td></tr><tr><td>基本翻译<div class='line_index'></td></tr><tr><td>n. 绝对；绝对事物</td></tr><tr><td>adj. 绝对的；完全的；专制的<div class='line_index'></td></tr><tr><td>网络释义<div class='line_index'></div></td></tr><tr><td>Absolute:绝对 | 完全的 | 纯粹</td></tr></table>";              div.append(hcontent);              div.show();            },            function() {                div.css("display", "none");                  $("#mtab").remove();          }            );            return this;        }    </script></html>

0 0