js 增强型title信息提示效果

效果图:

演示代码:

.xstooltip
{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
font: normal 8pt sans-serif;
padding: 3px;
border: solid 1px;
}

显示注释

jb51www.jb51.net

Time spent: 00:00:08

Page viewed: 4

Browser: Mozilla – 1.7.11

Operating system: Linux - i686 (x86_64)

function xstooltip_findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function xstooltip_findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function xstooltip_show(tooltipId, parentId, posX, posY)
{
it = document.getElementById(tooltipId);
if ((it.style.top == '' || it.style.top == 0)
&& (it.style.left == '' || it.style.left == 0))
{
// need to fixate default size (MSIE problem)
it.style.width = it.offsetWidth + 'px';
it.style.height = it.offsetHeight + 'px';
img = document.getElementById(parentId);
// if tooltip is too wide, shift left to be within parent
if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
if (posX

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JavaScript获取当前网页标题（title）的方法

    本文实例讲述了JavaScript获取当前网页标题(title)的方法.分享给大家供大家参考.具体如下: JS中的document.title可以获取当前网页的标题 <!DOCTYPE html> <html> <head> <title>jb51.net</title> </head> <body> current document's title is: <script> document.write(do

  • JavaScript Title、alt提示（Tips）实现源码解读

    JavaScript Title、alt提示（Tips）实现源码解读

    而对于图片标签img也有一个alt属性可以起到类似的作用.但很显然这种提示框太单调了,为此有人用JavaScript实现了漂亮的提示框效果,这种效果常用在WEB游戏中,其中下图的网易邮箱与迅雷影视页面就用到这种效果,虽然彼此实现效果有些差异,但整体实现思路是不变的.为了方便大家了解实现的细节,以方便定制自己想要的效果,我上网找了一段不错的源码,并对其进行了详细的注释,希望对大家有帮助. 含注释代码: 复制代码 代码如下: /************************************

  • JS实现闪动的title消息提醒效果

    有时候我们需要提醒用户,有新的消息,这个可以使用下面的方法实现. 效果就是网页窗口在没有获取焦点并且最小化的时候,网页窗口的标题栏"title"显示的内容为"[ ]","[新消息]"的闪烁效果. <script language="JavaScript"> setTimeout('flash_title()',2000); //2秒之后调用一次 function flash_title() { //当窗口效果为最小

  • 利用JS实现浏览器的title闪烁

    主要是通过setTimeout方法设置一个定时器,切换消息提示,从而达title到消息提示的闪烁. 复制代码 代码如下: <html>  <head>      <title>JS效果-浏览器标题栏闪烁</title>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />      <script type

  • 基于JavaScript实现 网页切出 网站title变化代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>这里是网站标题</title> </head> <body> <script type="text/javascript"> document.body.onfocus = function

  • js鼠标移动在title中显示图片的效果代码

    1.js代码 复制代码 代码如下: //***********默认设置定义.********************* tPopWait=50;//停留tWait豪秒后显示提示. tPopShow=5000;//显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFa

  • js每次Title显示不同的名言

    每次都有不同的名言出来. 实现方法: 1.上传title.js到网站目录 2.在页面相应位置添加以下代码: <script type="text/javascript" src="file/title.js" charset="UTF-8"></script> 3.title.js代码如下: _VC_DocumentTitles = new Array('世间的活动,缺点虽多,但仍是美好的', '真正没有资格谈明天的人,是

  • ToolTip 通过Js实现代替超链接中的title效果

    自定义Tooltip特效 body ul { list-style: none; } body li { margin: 60px; } div { border: 1px solid #CCC; padding: 10px; background: #dff5ff; margin-left: 30px; } function initEvent() { var links = document.getElementsByTagName("a"); for (var i = 0; i

  • Jquery修改页面标题title其它JS失效的解决方法

    Jquery代码 复制代码 代码如下: $("title").html("hello"); 后来只好用下面这段js代码来实现 Js代码 复制代码 代码如下: document.title="hello";

  • js下用层来实现select的title提示属性

    复制代码 代码如下: <script>              function opts(selectObj){                          var optDivs=document.createElement("div");                          var objTable=document.createElement("table");                          var ob

  • 使用JavaScript让网页的title动起来

    HTML Title: 复制代码 代码如下: <title>你好,Mr-S.R Lee</title> JavaScript: 复制代码 代码如下: <script type="text/javascript"> function scroll() { //获取title信息. var titleInfo = document.title; //获取title第一个汉字(数字.字母). //注释:字符串中第一个字符的下标是 0.如果参数 index

  • 一个JS函数搞定网页标题(title)闪动效果

    复制代码 代码如下: <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title></head><body><script language="JavaScript"> step=0 function fla

随机推荐