`
- 浏览:
56113 次
- 性别:
- 来自:
北京
-
鼠标滑过出现提示层效果js代码 javascript(转)
-
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<htmlxmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
-
<title>鼠标滑过出现提示层效果js代码javascript</title>
-
<scripttype="text/javascript">
- functionenableTooltips(id){
- varlinks,i,h;
- if(!document.getElementById||!document.getElementsByTagName)return;
- AddCss();
-
h=document.createElement("span");
-
h.id="btc";
- h.setAttribute("id","btc");
-
h.style.position="absolute";
- document.getElementsByTagName("body")[0].appendChild(h);
-
if(id==null)links=document.getElementsByTagName("a");
-
elselinks=document.getElementById(id).getElementsByTagName("a");
-
for(i=0;i<links.length;i++){
- Prepare(links[i]);
- }
- }functionPrepare(el){
- vartooltip,t,b,s,l;
-
t=el.getAttribute("title");
-
if(t==null||t.length==0)t="link:";
- el.removeAttribute("title");
-
tooltip=CreateEl("span","tooltip");
-
s=CreateEl("span","top");
- s.appendChild(document.createTextNode(t));
- tooltip.appendChild(s);
-
b=CreateEl("b","bottom");
-
l=el.getAttribute("href");
-
if(l.length>30)ll=l.substr(0,27)+"...";
- b.appendChild(document.createTextNode(l));
- tooltip.appendChild(b);
- setOpacity(tooltip);
-
el.tooltip=tooltip;
-
el.onmouseover=showTooltip;
-
el.onmouseout=hideTooltip;
-
el.onmousemove=Locate;
- }functionshowTooltip(e){
- document.getElementById("btc").appendChild(this.tooltip);
- Locate(e);
- }functionhideTooltip(e){
-
vard=document.getElementById("btc");
-
if(d.childNodes.length>0)d.removeChild(d.firstChild);
- }functionsetOpacity(el){
-
el.style.filter="alpha(opacity:95)";
-
el.style.KHTMLOpacity="0.95";
-
el.style.MozOpacity="0.95";
-
el.style.opacity="0.95";
- }functionCreateEl(t,c){
-
varx=document.createElement(t);
-
x.className=c;
-
x.style.display="block";
- return(x);
- }functionAddCss(){
-
varl=CreateEl("link");
- l.setAttribute("type","text/css");
- l.setAttribute("rel","stylesheet");
- l.setAttribute("href","?.css");
- l.setAttribute("media","screen");
- document.getElementsByTagName("head")[0].appendChild(l);
- }functionLocate(e){
-
varposx=0,posy=0;
-
if(e==null)e=window.event;
- if(e.pageX||e.pageY){
-
posx=e.pageX;posy=e.pageY;
- }
- elseif(e.clientX||e.clientY){
- if(document.documentElement.scrollTop){
-
posx=e.clientX+document.documentElement.scrollLeft;
-
posy=e.clientY+document.documentElement.scrollTop;
- }
- else{
-
posx=e.clientX+document.body.scrollLeft;
-
posy=e.clientY+document.body.scrollTop;
- }
- }
-
document.getElementById("btc").style.top=(posy+10)+"px";
-
document.getElementById("btc").style.left=(posx-20)+"px";
- }
-
</script>
-
<scripttype="text/javascript">
-
window.onload=function(){enableTooltips()};
-
</script>
-
<styletype="text/css">
- body{font:76%/1.5Arial,sans-serif;background:#FFF;color:#333}
- div#container{width:500px;margin:0auto}
- h1{color:#3CA3FF;margin:1em00;letter-spacing:-2px}
- p{margin:001.7em}
- a{color:#F60;font-weight:bold}
- a:hover{color:#F00}
- .tooltip{
- width:200px;color:#000;
- font:lighter11px/1.3Arial,sans-serif;
- text-decoration:none;text-align:center}.tooltipspan.top{padding:30px8px0;
- background:url(http://www.51flash.cn/wp-content/uploads/2007/0908/200708171844190.gif)no-repeattop}.tooltipb.bottom{padding:3px8px15px;color:#548912;
- background:url(http://www.51flash.cn/wp-content/uploads/2007/0908/200708171844190.gif)no-repeatbottom}
-
</style>
-
</head>
-
<body>
-
<divid="container">
-
<p><ahref="http://www.51flash.cn"title="welcometoyou">51flash.cn</a></p>
-
</div>
-
</body>
-
</html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
鼠标滑过出现提示层效果js代码 javascript
js鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容
JavaScript实现的鼠标单击触发和鼠标滑过触发的tab标签页源码
实用CSS和JavaScript实现的当鼠标滑过图片出现的效果,很实用
JavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript ...
JavaScript实现简单的鼠标滑过下拉菜单源码
JavaScript实现的鼠标滑过斜着出现的菜单demo
纯CSS3鼠标滑过按钮流光效果代码.zip
jquery制作侧栏与工具提示信息鼠标滑过图片或文字提示详细内容.rarjquery制作侧栏与工具提示信息鼠标滑过图片或文字提示详细内容.rarjquery制作侧栏与工具提示信息鼠标滑过图片或文字提示详细内容.rarjquery制作侧栏...
hover3d.js是一款效果超酷的鼠标滑过图片3D卡片效果jQuery插件。通过该插件可以制作出鼠标滑过图片时,图片3D倾斜,旋转的效果,非常有层次感。
JavaScript实现鼠标滑过高亮显示纵向3级浅绿色的导航菜单源码
JavaScript写的模仿Google的鼠标滑过显示应用效果demo 运行效果 https://blog.csdn.net/chendongpu/article/details/124884142
js鼠标滑过标签选项卡切换代码.zip
Javascript+CSS 鼠标滑过显示图片的新闻...基于Javascript+CSS的鼠标特效,当鼠标滑过新闻列表时会显示对应的图片,本代码已经过多次修正,兼容性好,调用超方便。而且设计美观,功能实用,有很多朋友都挺喜欢的哦。
18:___JS+CSS给图片加上鼠标滑过的方框 19:___JS卡通图片切换 20:___JS图片切换,带缩略图版 21:___JS图片滚动代码(无缝、平滑) 22:___Js图片连续左右滚动 23:___Js拖动特效,一串水晶球(很强大) 24:___JS放大镜,...
[javascript]鼠标滑过列表文字显示图片及详细信息
本文实例讲述了jquery实现鼠标滑过显示提示框的方法。分享给大家供大家参考。具体如下: 一、jquery鼠标滑过显示提示框实例 1、效果图 2、实现代码 ( 需要自行添加 jquery.js、按钮图片、提示框图片 ) HTML 代码 ...
这是一款轻量级的纯JavaScript炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式:鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果,并且还可以将这两种放大镜效果结合在一起使用。
JavaScript实现鼠标滑过带箭头的纵向3级导航菜单源码
该程序能够实现鼠标滑过使图片变大的功能。网上好多类似程序都是用纯div实现的,该程序适合习惯使用表格的程序员。比较简单明了。