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

时间:2023-02-10 00:43:40

说明业务:鼠标放到某个标签上,显示一个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;width: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(); //失去焦点关闭
};
}
}

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

html页面设置一个跟随鼠标移动的DIV(jQuery实现)的更多相关文章

  1. &lbrack;Js&rsqb;跟随鼠标移动的div

    例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动 document.onmouseover=function(ev){ var oEvent=ev||event; var b ...

  2. 鼠标移动事件(跟随鼠标移动的div)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. 在vue中写一个跟着鼠标跑的div,div里面动态显示数据

    1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...

  4. 一款基于TweenMax跟随鼠标单击移动的div

    今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  5. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  6. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...

  7. Javascript之盒子拖拽(跟随鼠标、边界限定、轨迹回放)

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  8. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  9. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

随机推荐

  1. C&plus;&plus; I&sol;O stream

    C++ I/O stream Ø The first, you should understand following: ... Ø Text: Ø Version: Visual studio 20 ...

  2. CSS层叠样式表的层叠是什么意思(转自知乎)

    转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...

  3. Codeforce 216 div2

    D 只要搞清楚一个性质:确定了当前最大和次大的位置,局面就唯一确定了; 根据这个性质设计dp,统计到达该局面的方法数即可. E 询问的要求是: 求有多少个区间至少覆盖了询问的点集中的一个; 转化成逆命 ...

  4. WinFom中经典小游戏&lpar;含源码&rpar;

    最近整理了若干经典的小游戏,无聊时可以打发时间.程序本身不大,练手非常不错,主要是GDI编程,主界面地址如下图所示 源码下载方式 1,关注微信公众号:小特工作室(也可直接扫描签名处二维码) 2,发送: ...

  5. Docker 备份、恢复、迁移数据卷

    可以利用数据卷对其中的数据进行进行备份.恢复和迁移. 备份 首先使用 --volumes-from 标记来创建一个加载 dbdata 容器卷的容器,并从本地主机挂载当前到容器的 /backup 目录. ...

  6. Mybatis技术原理理——整体流程理解

    前言:2018年,是最杂乱的一年!所以你看我的博客,是不是很空! 网上有很多关于Mybatis原理介绍的博文,这里介绍两篇我个人很推荐的博文 Mybatis3.4.x技术内幕和 MyBaits源码分析 ...

  7. Vue报错——&OpenCurlyDoubleQuote;Trailing spaces not allowed”

    在VSCode中开发Vue 报错:“Trailing spaces not allowed” 这是空格多了,删除多余的空格就可以了

  8. C&num;与SQL Server数据库连接

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. 微信小程序图片上传并展示

    1.首先编写微信小程序的页面和样式: index.js var total = []; Page({ data: { perImgSrc: [] }, onLoad: function (option ...

  10. Merge语句中NULL的陷阱

    NULL表示unknown,不确定值,所以任何值(包括null值)和NULL值比较都是不可知的,在on子句,where子句,Merge或case的when子句中,任何值和null比较的结果都是fals ...