• 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(); //失去焦点关闭
    };
    }
    }

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

  • 相关阅读:
    离散数学随笔2
    离散数学随笔1
    java多线程实现线程同步
    c语言细节
    堆的简单实现和应用
    快速排序分析
    ORACLE PRAGMA AUTONOMOUS_TRANSACTION 自治事务 单独提交某一段操作
    System.out.println() 输出 快捷键
    最全最新🇨🇳中国【省、市、区县、乡镇街道】json,csv,sql数据
    使用 js 设置组合快捷键,支持多个组合键定义,还支持 React
  • 原文地址:https://www.cnblogs.com/wx-ym-good/p/9313324.html
Copyright © 2020-2023  润新知