• html页面设置一个跟随鼠标移动的DIV(jQuery实现)


    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动

    html页面(直接放body里面):

          <a href="#" id="'+data[i].refundId+'"OrderInform"" data-placement="right" onmouseover="tip.start(this)" style="color:#00FFCC;left:;top:;"> 测试标签</span></a>

            <div class="" id="OrderInform" style="position:absolute;display:none;217px;height:500px;border:solid 5px #000000">测试框</div>

    jQuer:

    var tip={ 

      $:function(ele){
      if(typeof(ele)=="object")
      return ele;
      else if(typeof(ele)=="string"||typeof(ele)=="number")
      return document.getElementById(ele.toString());
      return null;
      },
      mousePos:function(e){
      var x,y;
      var e = e||window.event;
      return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
      y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
      },
      start:function(obj){
      var self = this;
      obj.onmousemove=function(e){
      console.log(e)
      var mouse = self.mousePos(e);
      console.log(mouse)
      var left= mouse.x + 'px';
      var top= mouse.y + 'px';

      if(mouse.y+400>900){
      top=mouse.y-500+'px';
      }

      $("#OrderInform").css({'top':top,'left':left});
      $("#OrderInform").show();
    };
    obj.onmouseout=function(){
    $("#OrderInform").hide(); //失去焦点关闭
    };
    }
    }

     (没有太按语法结构来弄,但是主要代码都在上面)

  • 相关阅读:
    poj2388-Who's in the Middle(排序)
    poj1543-Perfect Cubes(暴力)
    poj1664-放苹果(递归)
    快速幂
    poj2389-Bull Math(大整数乘法)
    HDU2608-0 or 1(数论+找规律)
    poj1131-Octal Fractions(进制转换)
    [noip2011 d1t2]选择客栈
    [周记]8.7~8.16
    [noip2012d1t2] 国王游戏
  • 原文地址:https://www.cnblogs.com/wx-ym-good/p/9313324.html
Copyright © 2020-2023  润新知