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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP自定义多进制的方法
2016/11/03 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python如何访问字符串中的值
2020/02/09 Python
Django用户身份验证完成示例代码
2020/04/03 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
北体毕业生求职信
2014/02/28 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
宣传口号大全
2014/06/16 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python