zoukankan      html  css  js  c++  java
  • jQuery实现ToolTip元素定位显示功能示例

    记录下,以备将来用到

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题页</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
    <script type="text/javascript">
      function ShowTip(event,obj,message)
      {
       var xOffset = -10; // x distance from mouse
       var yOffset = 10; // y distance from mouse
       //obj.style.top = (event.clientX + yOffset)+"px";
       //obj.style.left = (event.clientY + xOffset)+"px";
       //获取元素 $(obj).width();
       //获取元素height:$(obj).height()
       //获取元素位置:$(obj).position().top和$(obj).offset().top
       $('body').append( '<div id="tipmessage">'+message+'</div>');
       $('div#tipmessage').css("top", $(obj).position().top+$(obj).height() + "px").css("left", $(obj).position().left+"px").fadeIn("slow");
      }
      function HideTip()
      {
       $("div#tipmessage").fadeOut("slow").remove();
      }
     </script>
     <style type="text/css">
      #tipmessage
      {
      display:none;
      z-index:1000;
      border:1px solid #448833;
      position:absolute;
      background:#ffffff;
      max-200px;
      max-height:30px;
      padding:5px 10px;
      }
    </style>
    </head>
    <body>
    <a href="#" onmouseover="ShowTip(event,this,'欢迎访问脚本之家')" onmouseout="HideTip()">Tip</a>
    </body>
    </html>
  • 相关阅读:
    OpenStack 多节点纳管 vCenter 5.5
    OpenStack 多节点纳管 vCenter 5.5
    java.utils.UUID类介绍
    BeanUtils工具类
    Request笔记
    JavaEE_XMind总结
    JavaSE_XMind总结
    完成页面的定时跳转
    使用jsp完成商品列表的动态显示
    Respone笔记
  • 原文地址:https://www.cnblogs.com/sjqq/p/6360403.html
Copyright © 2011-2022 走看看