zoukankan      html  css  js  c++  java
  • Jquery实现ToolTip之元素定位

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <script type="text/javascript" src="JS/jquery-1.3.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,'aaaaaaaaa')" onmouseout="HideTip()">Tip</a>
    </body>
    </html>
  • 相关阅读:
    CF961E Tufurama 主席树
    [BZOJ3638 && BZOJ3272]带修区间不相交最大K子段和(线段树模拟费用流)
    [BZOJ5294][BJOI2018]二进制(线段树)
    [BZOJ5293][BJOI2018]求和(倍增)
    [BZOJ5306][HAOI2018]染色(容斥+FFT)
    [BZOJ5303][HAOI2018]反色游戏(Tarjan)
    [CF1053C]Putting Boxes Together(线段树)
    整体二分
    JSOI2018R2题解
    LCT维护子树信息
  • 原文地址:https://www.cnblogs.com/hubcarl/p/1835396.html
Copyright © 2011-2022 走看看