虽然IE也带提示功能,只要给title属性赋值,如下代码 <a href="http://chenxp2032.blog.163.com/blog/#" title="this a test">自带的提 示</a>这样的提示很单调,鼠标移上去的时候显示出来,当鼠标在上面移动的时候,提示信息不会跟随,对比下面自定义的提示信息,差别就很明 显,所以自定义的提示信息是很有必要的。
 方法一:
  把鼠标放到链接上看提示信息如何定制提示信息,说起来很简单,先画出提示信息层,然后定位 到目标对象。下面把实现分三部来说明:

  1)绘制信息层

  有两种方式,一种是静态,把层的html代码写在文档 中,另外一种是动态,运用javascript脚本动态的创建层。静态方式简单,不灵活,动态的灵活,但比较困难,需要熟悉脚本和Dom结构,下面的代码 是动态方式创建提示层

  function createDivTooltip()

  {

   var divTips = document.createElement(’div’);//create div element

   divTips.id=’tooltip’;

  divTips.style.display=’none’//invisible

  document.body.appendChild(divTips);

  }

  2)定 位信息层

  function locate(e)

  { e=e||window.event;

   var divTips = document.getElementById(’tooltip’);

   var mousePos=getMousePosition(e);//get the coordinate of the mouse

   divTips.style.top=mousePos.top-12+"px";

   divTips.style.left=mousePos.left-8+"px";

  }关于如何定位鼠标在文档中的位置请参考《获 取鼠标的坐标》

  3)附加事件

   <a href="http://chenxp2032.blog.163.com/blog/" title="this is a test for tooltip" οnmοuseοver="showTooltip(event);" οnmοusemοve="locate(event);" οnmοuseοut="hideTooltip(event);"& gt;click to do something</a>上面代码给一个链接添加了三个事件,onmouseover鼠标移到链接上的时候 显示提示信息,onmousemove鼠标在链接上移动的时候提示信息跟随,onmouseout鼠标移开链接时隐藏提示信息,虽然上面的代码能够实现功 能,但不是很好,因为需要为每个链接一一添加事件,而实际开发中一个页面就会有很多链接,这样就不方便,比较好的方法是下面代码这样实现

   function prepare(id)

  {

   if(id==null) links=document.getElementsByTagName("a");

   else links=document.getElementById(id)。getElementsByTagName("a");

   for(i=0;i<links.length;i++){

  attachEvent(links[i]);

   }

  }

  function attachEvent(link)

  {

   if(!link) return;

   link.attachEvent("onmouseover",showTooltip);

   link.attachEvent("onmousemove",locate);

   link.attachEvent("onmouseout",hideTooltip);

  }

  完成上面的三 部简单的自定义提示信息就完成啦,一些特别的提示信息是对创建的层做了特殊处理,如我们经常看到圆角提示信息,是在层上添加了背景图片。

方法二:

var div_xx = 0;
var div_yy = 0;
function keyd(divid){
 var obj = document.getElementById(divid);
 obj.style.cursor = "move";
 div_xx = event.clientX-obj.getBoundingClientRect().left;
 div_yy = event.clientY-obj.getBoundingClientRect().top;
 tow(obj);
}
function keyu(divid){
 var obj = document.getElementById(divid);
 window.document.onmousemove = null;
 obj.style.cursor = "default";
}
function tow(obj){
window.document.onmousemove = function(){
 modiv(obj);
};
}
function modiv(obj){
 obj.style.top = event.clientY+document.body.scrollTop-div_yy;
 obj.style.left = event.clientX+document.body.scrollLeft-div_xx;
}

在div 中的子元素中添加事件:

onMouseDown="keyd('divid')"

onMouseUp="keyu('divid')"

转载于:https://www.cnblogs.com/liufei88866/archive/2010/12/23/1914487.html

DIV层跟随鼠标位置显示提示相关推荐

  1. 【Unity3D】人物跟随鼠标位置

    1 游戏对象 2D动画和人体模型及动画中介绍了 Aniamtion.Animator.人体模型.人体骨骼.人体动画等基础知识,本文将通过 "人物跟随鼠标位置" 案例加强对 Unit ...

  2. JavaScript实现心形div块跟随鼠标移动(幻影效果)

    JavaScript实现心形div块跟随鼠标移动(幻影效果) 上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动,然后有轩辕问我,想给女朋友做一个好看的可不可以.现在我们来实现 ...

  3. ROOT学习——跟随鼠标位置动态显示TH2切片(DynamicSlice.C)

    显示动态切片的二维直方图是数据处理中常用的方法.本文根据ROOT官方教程DynamicSlice.C介绍如何制作显示动态切片并且高斯拟合. 首先通过Rannor函数对二维直方图进行填充,然后通过Add ...

  4. HTML鼠标悬停显示隐藏div,JQ实现鼠标悬停显示或隐藏DIV层

    $(document).ready(function(){ $("#div1").hide();   //先将层隐藏起来 var canHide = false; //标记是否可隐 ...

  5. PyQt5 技术篇-鼠标移动控件显示提示,Qt Designer控件提示设置方法。

    当你想用一些图标作为按钮时,为了让用户可以更清楚的知道按钮的功能,加个提示再好不过了. 如图:当我鼠标移动到第一个图标,会提示-"开始". 设置方法: self.toolButto ...

  6. div根据滑动页面位置显示

    今天在pc端做了一个页面.表格形式主要是以公司产品价目做的价目单.其中有一个需求导航栏为侧栏展示,根据描点定位方式展示,根据#id定位当前产品 第二个需求是导航栏在滑动页面到一定的位置时显示,浮动在当 ...

  7. html鼠标悬停边框变虚线,css设置表格的边框为实线还是虚线,+鼠标悬停显示提示字...

    虚线 在css里面添加 td {border-bottom:1px dashed #000000;} 实线 在css里面添加 td {border:1px solid black;} -------- ...

  8. cesium 实现测距离测面积 (划线画面 跟随鼠标位置 )

    效果图 方法一:使用插件 cesium_measure.js 下载地址:https://github.com/zhangti0708/cesium-measure/blob/master/src/ce ...

  9. vtkImageCheckerboard生成棋盘格,跟随鼠标移动显示

    棋盘格用途 在进行图像配准时,棋盘格供用户浏览和查看,观察配准前后两组数据的变化.视觉上可以检验配准的效果,一般情况下,CBCT图像引导系统软件均包含有这类功能(如瓦里安). 基本流程 假设两组数据分 ...

最新文章

  1. GaitSet:通过交叉视角步态识别
  2. MVC 源码系列之路由(一)
  3. 利用GNU的parted进行分区
  4. 增量值编码器、单圈绝对值编码器、多圈绝对值编码器
  5. 洛谷 P2084 进制转换
  6. satd残差_RDO、SAD、SATD、λ相关概念【转】
  7. 第六章 实验报告(函数与宏定义)
  8. linux通过操作界面和命令行的方式查看ip地址、mac地址
  9. php自动加载规范 PSR4 (Thinkphp)
  10. php如何进行微信支付宝,php实现微信和支付宝支付的示例代码
  11. ubuntu 如何关闭笔记本触摸板
  12. 借助Grub4DOS的grldr启动Windows PE(软启动)
  13. Python面试简历工作描述写法总结
  14. 趣图 | EDG牛逼!!!
  15. 当 webpack 遇上 symlink
  16. excel怎么统计相同名字的数量
  17. 树莓派设置自动连接无线网络
  18. 这款国产工具,让我电脑里的PS、XD都落灰了
  19. 腾讯最难lua面试题答案及解析
  20. 【微信小程序】小程序入门app.js、app.json、app.wxss解说

热门文章

  1. 互联网架构,究竟为啥要做服务化?
  2. Vector找最大值 最小值
  3. 【Python】青少年蓝桥杯_每日一题_11.27_电梯用电量
  4. 安川g7接线端子图_常用变频器接线端子集锦及接线示意图
  5. html5 datalist属性,HTML5 元素 datalist 介绍
  6. mysql字符集相关问题_MySQL 字符集相关问题
  7. 重磅|施耐德电气O2O数字化咨询服务强势来袭
  8. 怎么样条件需要做屏蔽机房,屏蔽机房建设标准是什么?
  9. java打印 a b c,创建一个java程序,按顺序给出3个术语作为输入(a,b,c)打印它们的根...
  10. roobo机器人怎么唱歌_智能机器人都长什么样?提前探秘中国智能机器人大赛