<html>

<head>

<title>title及alt提示特效</title>

<style type="text/css">

body{font-size:12px;color:#000000}

td{font-size:12px;color:#000000}

a:link{font-size:12px;color:#000000}

</style>

<script language="javascript">

var pltsPop=null;

var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适

var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适

var pltsTitle="";

document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');

function pltsinits()

{

 document.onmouseover = plts;

 document.onmousemove = moveToMouseLoc;

}

function plts()

{ var o=event.srcElement;

 if(o.alt!=null  &&  o.alt!=""){oo.dypop=o.alt;o.alt=""};

 if(o.title!=null  &&  o.title!=""){oo.dypop=o.title;o.title=""};

 pltsPop=o.dypop;

 if(pltsPop!=null && pltsPop!="" && typeof(pltsPop)!="undefined")

 {

 pltsTipLayer.style.left=-1000;

 pltsTipLayer.style.display='';

 var Msg=pltsPop.replace(/\n/g,"<br>");

 MsgMsg=Msg.replace(/\0x13/g,"<br>");

 var re=/\{(.[^\{]*)\}/ig;

 if(!re.test(Msg))pltsTitle="『水木设计联盟』";

 else{

 re=/\{(.[^\{]*)\}(.*)/ig;

 pltsTitle=Msg.replace(re,"$1")+" ";

 re=/\{(.[^\{]*)\}/ig;

 MsgMsg=Msg.replace(re,"");

 MsgMsg=Msg.replace("<br>","");}

 var content =

 '<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+

 '<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+

 '<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+

 '<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+

 '</table></td></tr></table>';

 pltsTipLayer.innerHTML=content;

 toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);

 moveToMouseLoc();

 return true;

 }

 else

 {

 pltsTipLayer.innerHTML='';

 pltsTipLayer.style.display='none';

 return true;

 }

}

function moveToMouseLoc()

{

 if(pltsTipLayer.innerHTML=='')return true;

 var MouseX=event.x;

 var MouseY=event.y;

 var popHeight=pltsTipLayer.clientHeight;

 var popWidth=pltsTipLayer.clientWidth;

 if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)

 {

 popTopAdjust=-popHeight-pltsoffsetY*1.5;

 pltsPoptop.style.display="none";

 pltsPopbot.style.display="";

 }

 else

 {

 popTopAdjust=0;

 pltsPoptop.style.display="";

 pltsPopbot.style.display="none";

 }

 if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)

 {

 popLeftAdjust=-popWidth-pltsoffsetX*2;

 topleft.style.display="none";

 botleft.style.display="none";

 topright.style.display="";

 botright.style.display="";

 }

 else

 {

 popLeftAdjust=0;

 topleft.style.display="";

 botleft.style.display="";

 topright.style.display="none";

 botright.style.display="none";

 }

 pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;

 pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;

 return true;

}

pltsinits();

</script>

</head>

<body>

链接提示效果：<a href="http://www.lanrentuku.com/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a>

</body>

</html>

　　

title及alt提示特效的更多相关文章

  1. title与alt的区别

    html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的, ...

  2. 【转】title与alt的区别

    html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的,当 ...

  3. html中的title和alt

    alt是html标签的属性,而title既是html标签,又是html属性. title标签这个不用多说,网页的标题就是写在<title></title>这对标签之内的.tit ...

  4. <img>的title和Alt有什么区别？

    Alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示,读屏器阅读图片. title 可提高图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析.鼠 ...

  5. 如何写一个网页标题title的闪动提示(转)

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  6. 如何写一个网页标题title的闪动提示

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  7. css3 小图标提示特效

    最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...

  8. 手写一个关于title属性自定义提示框解决浏览器（IE）不兼容问题

    <html> <head> <meta charset="utf-8"> <title>无标题页</title> < ...

  9. 5.href和src区别? title和alt【CSS】

    1.href (Hypertext Reference)指定网络资源的位置(超文本引用),从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,在 link和a 等元素 ...

随机推荐

  1. EBS 用户及其联系人的失效时间

    联系人失效时间还有一个SQL,从页面的联系人详情简化取得的,不如直接用pos_supplier_users_v视图 SELECT * FROM (SELECT NULL contact_req_id, ...

  2. 【转】Python Twisted介绍

    Python Twisted介绍 作者:Jessica McKellar 原文链接 Twisted是用Python实现的基于事件驱动的网络引擎框架.Twisted诞生于2000年初,在当时的网络游戏开 ...

  3. LeetCode Question Difficulty Distribution

    参考链接:https://docs.google.com/spreadsheet/pub?key=0Aqt--%20wSNYfuxdGxQWVFsOGdVVWxQRlNUVXZTdEpOeEE& ...

  4. C#中无边框窗体移动

    拖动无边框窗体Form至桌面任何位置 首先建一个Windows应用程序将Form1的 FormBorderStyle属性设置为Noe Point mouseOff;//鼠标移动位置变量 bool le ...

  5. [MCSM]Exponential family: 指数分布族

    Exponential family(指数分布族)是一个经常出现的概念,但是对其定义并不是特别的清晰,今天好好看了看WIKI上的内容,有了一个大致的了解,先和大家分享下.本文基本是WIKI上部分内容的 ...

  6. HoloLens开发手记 - Unity之Spatial Sounds 空间声音

    本文主要讲述如何在项目中使用空间声音特性.我们主要讲述必须的插件组件和Unity声音组件和属性的设置来确保空间声音的实现. Enabling Spatial Sound in Unity 在Unity ...

  7. 文件夹文件遍历并插入数据库的操作，IO Directory File的递归操作

    在我们管理内容管理系统时,数据量大时,对机器的依赖性就比较强了,比如,我要将一个文件夹中的很多图片上传到网站,一个个上传会很花时间,就想到了通过遍历文件夹得到文件名,并将路径与文件保存到数据库中对应的 ...

  8. 每天一个linux命令（31）：grep 命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  9. beta版本工作百分比

    1.附上github上,beta阶段的整体工作情况 2.beta版本分工情况: 马凛凛 031302620(组长):主要负责任务分配和规划,编码工作主要是系统的“实时编辑”功能,以及服务器的配置和部署 ...

  10. SSH框架整合配置所需JAR包(SSH整合)

    转载于:http://www.cnblogs.com/kaige123/p/5719662.html Hibernate Jar: 1.hibernate3.jar,这个是hibernate3.0的核 ...