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

最新推荐文章于 2020-12-03 14:40:40 发布
最新推荐文章于 2020-12-03 14:40:40 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 心得 文章标签： stylesheet null function url c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/magicdreaming/article/details/2378646
本文介绍了一种使用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">    

      <a 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
 }
js实现跟随鼠标移动的提示框
zlinhua的专栏
10-26 3742
js实现文本框内跟随鼠标移动的提示框，即当鼠标在指定的文本框内时，弹出一个提示，根据鼠标移动显示在鼠标右下角，鼠标离开文本框时提示消失，效果如下： 首先需要定义一个div块，弹出的提示实际上就是div块 然后在需要提示的文本框绑定鼠标移动事件 onmousemove="seashowtip(1,80)" onmouseout="seashowtip(0,80);" 最后
纯JS实现鼠标划过时显示提示框
12-27
js提示框特效制作多种js提示框效果,如js文字提示框,js图片提示框,js tooltip文字与图片提示框。一款很实用的js提示框插件。
鼠标滑过出现提示层效果js代码 javascript（转）
刘大富的专栏
11-06 328
演示 源码source code： &lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;htmlxmlns="http://www.w3.org/1999/xhtml...
鼠标滑过出现提示层效果js代码 javascript
02-20
鼠标滑过出现提示层效果js代码 javascript
js 提示框插件鼠标滑过提示文章内容信息
09-26
avascript内容提示框tooltips轻量级鼠标滑过显示描述内容，内容只能写在A标签的title里面并且光标不能定位内容区域。
网站底部代码_底部客服二维码动态导航代码_鼠标滑过显示层代码
06-08
纯css实现底部动态效果代码，企业网站底部通用代码。Html5网站底部导航通用代码。
鼠标滑过图片出现大图片提示层效果js特效代码
03-20
在网页设计中，为了增强用户体验，常常会使用各种交互效果，其中之一就是“鼠标滑过图片出现大图片提示层效果”。这种特效通常应用于产品展示或图片预览，让用户在不离开当前页面的情况下，能够预览图片的详细内容。...
鼠标滑过图片出现大图片提示层效果js代码.rar
07-04
本资源提供的"鼠标滑过图片出现大图片提示层效果js代码"正是实现这一功能的JavaScript代码。 首先，我们需要理解JavaScript在网页中的作用。JavaScript是一种客户端脚本语言，它可以与HTML和CSS结合，为网页添加...
鼠标滑过图片出现大图片提示层效果js代码
05-25
"鼠标滑过图片出现大图片提示层效果"是一种常见的交互设计手法，它使得用户在不离开当前页面的情况下预览图片的详细内容，尤其适用于产品展示或者图像丰富的网站。这种效果通常通过JavaScript实现，因为它能提供动态...
纯css实现鼠标滑过弹出层效果
09-25
这个纯CSS实现的鼠标滑过弹出层效果不仅简化了代码，还提高了页面性能，因为不依赖JavaScript，对于那些禁用JavaScript的用户也能正常工作。此外，通过调整样式和元素结构，这种技术可以应用于各种各样的场景，如...
JavaScript滑过效果
bansong2170的博客
11-09 93
2007-06-28 17:25:06<html><head><title>DIV层切换</title><script language="JavaScript" type="text/javascript">/*********************************************功能: 通用DIV切换函...
js固定在网站底部在线客服代码.zip
07-11
js固定在网站底部在线客服代码
鼠标移动到某处弹出一个显示信息框 代码
dw_java08的专栏
07-05 6577
body, div { font-size: 0.9em; font-family: verdana; } .copyright { text-align: center; font-size: 1em; } .tips { border: 1px solid #666666; padding: 5px 10px 5px 10px; position: absolute
鼠标滑过 下拉菜单CSS3
NIJIADALINGE的博客
03-31 519
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .hezi{ position: relative; display: inline-block;
JS特效：鼠标悬停显示提示
热门推荐
snoopy的专栏
04-13 1万+
function showtip2(current,e,text) { if (document.readyState=="complete") { document.all.tooltip2.innerHTML=''+text+'' document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLef
js实现鼠标移到链接文字弹出一个提示层的方法
晨港飞燕的专栏
03-08 1万+
本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法。分享给大家供大家参考。具体分析如下： 这里实现鼠标移动到链接文字上面，弹出一个已定义好的DIV层的效果。在这个层里你可以加入与此链接对应的信息，这样就成了一个信息提示窗，在淘宝、新浪都能看到这种效果，很实用。 鼠标移到文字上弹出提示层 #box { display: none; width:
js鼠标悬停事件_鼠标悬停出现提示信息怎么做
weixin_39936403的博客
12-03 3928
概述–提示：指启示，提起注意或给予提醒和解释。在 excel 中会经常用到给某个格子增加提醒信息，比如金额提示输入数值或最大长度值等等。设置方式也有多种，简单的，仅为单元格插入批注就可以了，也有复杂的有效性验证方式。下图为批注方式：另外，在网页设计中也常常看到同样功能，常见的帮助提示框（tips），鼠标悬停在帮助图标上时，显示所有的帮助信息。也不难，几行 JS 脚本的事儿。润乾报表支持在 Web ...
鼠标划过链接时弹出窗口
weixin_34327761的博客
05-21 196
       从某控件中，提取的Javascript鼠标划过链接时弹出窗口。直接看代码：   1 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &gt;  2 &lt;HTML&gt;  3     &lt;HEAD&gt;  4         &lt;title&gt;MouseOverPopWindowDe...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值