js 让鼠标右下角有一排小字_JS实现跟随鼠标的链接文字提示框效果

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

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

运行效果如下图所示：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

跟随鼠标的文字提示框

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;}

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.οnmοusemοve=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.οnmοuseοut=function(){

t.style.display = 'none';

};

}

中国嫦娥飞天的一些感想
中国是世界上最强大的国家

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

js 让鼠标右下角有一排小字_JS实现跟随鼠标的链接文字提示框效果相关推荐

js 让鼠标右下角有一排小字_js布局中一排大字下面接着一排小字怎么打出来？...
展开全部可以使用 TypewriterJS 实现效果是这样 ,百度图片少了一部分,可以通过链接32313133353236313431303231363533e78988e69d833133343 ...
js 让鼠标右下角有一排小字_JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码...
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮 ...
html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
python物体跟着鼠标走_用Python写一个跟随鼠标运动的自定义窗口
背景:因为项目需要,要开发一个在PC上运行的应用程序,生成一个跟随鼠标运动的窗口,并且监听鼠标的点击事件,并在窗口上做相应的显示. 平台:Win7 64位 + Python27 64位支持库:PyH ...
html5动态效果随鼠标动,html5+CSS3心形动画跟随鼠标光标运动特效
html5+CSS3心形动画跟随鼠标光标运动特效代码片段: this.update = function () { var lastPoint = { x: _this.x, y: _this.y ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
P5.js之数组使用——绘制水墨画笔，实现跟随鼠标移动的效果
数组实践首先需要说明,p5和processing数组的使用有所不同数组的声明和初始化为: var pox =new Array(50); var poy=new Array(50); 实现思路: ...
鼠标点击某处时可以让小精灵移动到鼠标点击的地方, 让精灵跟随鼠标移动
鼠标点击页面某处的时候可以让小精灵移动到该处 css代码: <style>html,body {height: 100%;width: 100%;background-color: bla ...
鼠标悬停帮助图标显示文字提示框代码
<style type="text/css">.help-tip {cursor:pointer;text-align: left;font-size: 14px;ba ...
C#中在鼠标经过Button控件时显示提示信息（弹出气泡提示框）
C#有个ToolTip的控件是弹出气泡提示框的,在界面上放一个ToolTip1控件,可以在所有需要弹出气泡的控件的属性中的"toolTip1的ToolTip"填写需要提示的信息就行 ...

js 让鼠标右下角有一排小字_JS实现跟随鼠标的链接文字提示框效果

js 让鼠标右下角有一排小字_JS实现跟随鼠标的链接文字提示框效果相关推荐

最新文章

热门文章