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


Posted in Javascript onAugust 06, 2015

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

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

运行效果如下图所示:

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程序设计有所帮助。

Javascript 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
js获取页面description的方法
May 21 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
解析原生JS getComputedStyle
May 25 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 #Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 #Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 #Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 #Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 #Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
You might like
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
推荐11个实用Python库
2015/01/23 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python实现文件的分割与合并
2019/08/29 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python的json包位置及用法总结
2020/06/21 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
法律顾问服务方案
2014/05/15 职场文书
百万英镑观后感
2015/06/09 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
深入理解go缓存库freecache的使用
2022/02/15 Golang
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL