这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0705/270086.html