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 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
javascript实现智能手环时间显示
Sep 18 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版)
2006/10/09 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
php-fpm中max_children的配置
2019/03/15 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python连接oracle数据库实例
2014/10/17 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python中format()格式输出全解
2019/04/12 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
求职信写作要突出重点
2014/01/01 职场文书
学校元旦晚会方案
2014/02/19 职场文书
工作态度不好检讨书
2015/05/06 职场文书
思品教学工作总结
2015/08/10 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书