脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS跟随鼠标的链接文字提示框效果

JS实现跟随鼠标的链接文字提示框效果

 更新时间：2015年08月06日 12:35:54   作者：皮蛋  
这篇文章主要介绍了JS实现跟随鼠标的链接文字提示框效果,涉及javascript鼠标事件及页面元素样式操作的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了JS实现跟随鼠标的链接文字提示框效果。分享给大家供大家参考。具体如下：

这里使用JavaScript与CSS实现链接提示效果，不会改变你原来的链接结构，使用链接原有的title标签来实现，如果之前你使用有title标签，那你几乎只需把JS代码拷贝到你的网页中即可。你会发现，运行本效果后，鼠标在链接上移动的话，文字提示框会跟随鼠标而移动位置。

运行效果如下图所示：

具体代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font:12px/1.8 arial;}
a,a:visited{color:#3366cc;text-decoration:none;}
a:hover{color:#f60;text-decoration:underline;}
.tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}
img{border:none;}
</style>
<script type="text/javascript">
 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;
  var t = self.$("mjs:tip");
  obj.onmousemove=function(e){
   var mouse = self.mousePos(e);
   t.style.left = mouse.x + 10 + 'px';
   t.style.top = mouse.y + 10 + 'px';
   t.innerHTML = obj.getAttribute("tips");
   t.style.display = '';
  };
  obj.onmouseout=function(){
   t.style.display = 'none';
  };
 }
 }
</script>
</head>
<body>
<ol>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="2013年12月14日，嫦娥3号卫星登上月球，激动人心的一切终于到来了……">中国嫦娥飞天的一些感想</a></li>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="中国未来一定是世界上最强大的国家，你相信么？">中国是世界上最强大的国家</a></li>
</ol>
<div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS事件添加和移出的兼容写法示例

    JS事件添加和移出的兼容写法示例

    这篇文章主要介绍了JS事件添加和移出的兼容写法,结合实例形式分析了javascript针对不同浏览器实现实现添加与移除事件的相关技巧与使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 怎样在CocosCreator中使用物理引擎关节

    怎样在CocosCreator中使用物理引擎关节

    这篇文章主要介绍了怎样在CocosCreator中使用物理引擎关节，对物理引擎感兴趣的同学，着重要看一下
    2021-04-04
  • JavaScript实现table切换的插件封装

    JavaScript实现table切换的插件封装

    这篇文章主要为大家详细介绍了JavaScript实现table切换的插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript引用类型和基本类型详解

    JavaScript引用类型和基本类型详解

    这篇文章主要介绍了JavaScript引用类型和基本类型详解的相关资料,需要的朋友可以参考下
    2016-01-01
  • js实现数字滚动特效

    js实现数字滚动特效

    这篇文章主要为大家详细介绍了js实现数字滚动特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

    ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

    Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板
    2014-08-08
  • 获取layer.open弹出层的返回值方法

    获取layer.open弹出层的返回值方法

    今天小编就为大家分享一篇获取layer.open弹出层的返回值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 基于JS实现移动端左滑删除功能

    基于JS实现移动端左滑删除功能

    最近做个项目，需要实现移动端左滑删除功能，当时js代码将网上找的进行删减优化，下面通过本文给大家分享基于JS实现移动端左滑删除功能，感兴趣的朋友一起看看
    2017-07-07
  • 一文带你搞懂面试率超高的JS事件循环

    一文带你搞懂面试率超高的JS事件循环

    事件循环是 JavaScript 中一个非常重要的概念，下面就来看看浏览器和 Node.js 中的事件循环的原理，以及两者之间的差异，感兴趣的可以了解一下
    2022-10-10
  • JavaScript中使用document.write向页面输出内容实例

    JavaScript中使用document.write向页面输出内容实例

    这篇文章主要介绍了JavaScript中使用document.write向页面输出内容实例,本文讲解了输出普通文字、带HTML标签内容的方法,需要的朋友可以参考下
    2014-10-10

最新评论