鼠标滑过出现提示层效果 js代码

本文介绍了一种使用JavaScript实现的鼠标滑过元素时显示提示信息的效果。通过修改HTML、CSS及JavaScript代码,可以在页面滚动时准确地展示出带有透明度及自定义样式的提示层。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

把下面的代码保存为文件,再在目录下放一张名为200708171844190.gif图片就可以了,而且在面页滚动时可以准确显示
文件代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标滑过出现提示层效果 js代码 javascript</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    
function enableTooltips(id)
    
{
       
        
var links,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");
        
else 
            links
=document.getElementById(id).getElementsByTagName("a");
        
for(i=0;i<links.length;i++)
        
{
            Prepare(links[i]);
        }

        
    }

    
function Prepare(el)
    
{
        
var tooltip,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)
             l
=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;
    }

    
function showTooltip(e)
    
{
        document.getElementById(
"btc").appendChild(this.tooltip);      
    }

    
function hideTooltip(e)
    
{
        
        
var d=document.getElementById("btc");
        
if(d.childNodes.length>0)
        d.removeChild(d.firstChild);
    
    }

    
function setOpacity(el)
    
{
        el.style.filter
="alpha(opacity:95)";
        el.style.KHTMLOpacity
="0.95";
        el.style.MozOpacity
="0.95";
        el.style.opacity
="0.95";
    }

    
function CreateEl(t,c)
    
{
        
var x=document.createElement(t);
        x.className
=c;
        x.style.display
="block";
        
return(x);
    }

    
function AddCss()
    
{
        
var l=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);
    }

    
function Locate(e)
    
{
        
if(document.all)
             e
=event;
        
var posx=0,posy=0;
        
if(e==null
        
{    
             e
=window.event;             
             posx
=e.clientX;
             posy
=e.clientY;
        }

        
else if(e.clientX || e.clientY)
        
{
            
var d=document.getElementById("btc").firstChild;
            
//alert(d.offsetTop);
            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+2)+"px";
        document.getElementById(
"btc").style.left=(posx-30)+"px";
    }

</script>
<script type="text/javascript">
window.onload
=function(){enableTooltips();};
</script>

</head>
<body style="text-align:center">    

      
<id="text" href="http://www.51flash.cn" title="this is the title" >51flash.cn</a>

</body>
</html>

样式文件
.tooltip
{
    width
: 200px; color:#000;
    font
:lighter 11px/1.3 Arial,sans-serif;
    text-decoration
:none;text-align:center
}

.tooltip span.top
{
    padding
: 30px 8px 0;
     background
: url(200708171844190.gif) no-repeat top
 
}

 .tooltip b.bottom
 
{
    padding
:3px 8px 15px;color: #548912;
    background
: url(200708171844190.gif) no-repeat bottom
 
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值