div的提示框显示(转载)

最新推荐文章于 2022-03-18 17:19:55 发布

左之右

最新推荐文章于 2022-03-18 17:19:55 发布

阅读量518

点赞数

分类专栏：前端文章标签： jquery javascript jsp

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

借鉴来自于：

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

收藏

觉得还不错? 一键收藏
0
评论
div的提示框显示(转载)

jsp页面：String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> My
复制链接

扫一扫