- <html>
- <head>
- <title>title及alt提示特效</title>
- <styletype="text/css">
- body{font-size:12px;color:#000000}
- td{font-size:12px;color:#000000}
- a:link{font-size:12px;color:#000000}
- </style>
- <scriptlanguage="javascript">
- varpltsPop=null;
- varpltsoffsetX=12;//弹出窗口位于鼠标左侧或者右侧的距离;3-12合适
- varpltsoffsetY=15;//弹出窗口位于鼠标下方的距离;3-12合适
- varpltsTitle="";
- document.write('<divid=pltsTipLayerstyle="display:none;position:absolute;z-index:10001"></div>');
- functionpltsinits()
- {
- document.onmouseover=plts;
- document.onmousemove=moveToMouseLoc;
- }
- functionplts()
- {varo=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='';
- varMsg=pltsPop.replace(/\n/g,"<br>");
- MsgMsg=Msg.replace(/\0x13/g,"<br>");
- varre=/\{(.[^\{]*)\}/ig;
- if(!re.test(Msg))pltsTitle="『水木设计联盟』";
- else{
- re=/\{(.[^\{]*)\}(.*)/ig;
- pltsTitle=Msg.replace(re,"$1")+"";
- re=/\{(.[^\{]*)\}/ig;
- MsgMsg=Msg.replace(re,"");
- MsgMsg=Msg.replace("<br>","");}
- varcontent=
- '<tablestyle="FILTER:alpha(opacity=90);border:1pxsolid#cccccc"id="toolTipTalbe"cellspacing="1"cellpadding="0"><tr><tdwidth="100%"><tablebgcolor="#ffffff"cellspacing="0"cellpadding="0">'+
- '<trid="pltsPoptop"><tdheight="20"bgcolor="#0094bb"><fontcolor="#ffffff"><b><pid="topleft"align="left">↖'+pltsTitle+'</p><pid="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>'+
- '<trid="pltsPopbot"style="display:none"><tdheight="20"bgcolor="#0094bb"><fontcolor="#ffffff"><b><pid="botleft"align="left">↙'+pltsTitle+'</p><pid="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();
- returntrue;
- }
- else
- {
- pltsTipLayer.innerHTML='';
- pltsTipLayer.style.display='none';
- returntrue;
- }
- }
- functionmoveToMouseLoc()
- {
- if(pltsTipLayer.innerHTML=='')returntrue;
- varMouseX=event.x;
- varMouseY=event.y;
- varpopHeight=pltsTipLayer.clientHeight;
- varpopWidth=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;
- returntrue;
- }
- pltsinits();
- </script>
- </head>
- <body>
- 链接提示效果:<ahref="http://www.lanrentuku.com/"target="_blank"title="title及alt提示特效,本程序由水木设计联盟整理推荐,希望大家喜欢">一个很酷的鼠标悬停特效,但有问题指教,我想知道怎么控制悬停时间</a>
- </body>
- </html>
分享到:
相关推荐
title及alt提示个性化特效
title及alt提示个性化特效! 很值得下载看看!资源免费,大家分享!!
css模拟title和alt的提示效果,可以查看淘宝网里的产品展示页面,用于显示产品的规格和相关信息.
设置网页元素 提示信息 如title,alt提示,在没有任何处理的时候设置提示,一般都会在默认时间后自动消失,要完成鼠标不离开,就不会消失提示信息。
因为日常的需要,TITLE或ALT属性不能满足我的开发需要,也不能对提示框外观进行修改,故而自己写了个提示框,纯JS调用简单,比写CSS快捷,希望大家喜欢 关闭本来打算鼠标移开监听目标就关闭的,但是我希望可以利用...
js 特效 html 特效 Title特效
js 特效 html 特效 Title栏特效三
Title特效.rarTitle特效.rarTitle特效.rarTitle特效.rarTitle特效.rarTitle特效.rar
Title特效三.rarTitle特效三.rarTitle特效三.rarTitle特效三.rarTitle特效三.rarTitle特效三.rar
最新 [seo]贴内alt及title优化 2.0商业版dz插件,增加贴内图片自动添加title及title等
js 特效 html 特效 Title栏特效一
js 特效 html 特效 title变化特效
而对于图片标签img也有一个alt属性可以起到类似的作用。但很显然这种提示框太单调... 含注释代码: 代码如下: /*********************************************** 一个JavaScript Title、alt提示(Tips)源码解读 代码
js 特效 html 特效 Title特效三
WordPress上传图片时图片不会自动添加ALT和TITLE,这样非常不利于SEO优化,手动添加又非常good。微范儿分享一段WordPress图片自动添加Alt和title方法。 将下面的代码添加到当前主题函数模板functions.php中: 代码...
js 特效 html 特效 title显示日期
js 特效 html 特效 Title栏特效二
js 特效 html 特效 Title栏闪烁