如何实现鼠标放在图片上出现文字说明效果？

最新推荐文章于 2022-09-09 13:46:20 发布

AlloyTeam-Zy

最新推荐文章于 2022-09-09 13:46:20 发布

阅读量1.7w

点赞数 8

分类专栏：我写的一些web前端小特效

本文链接：https://blog.csdn.net/zygg5521/article/details/47394679

版权

我写的一些web前端小特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在浏览网页时，看到一些图片，鼠标一放上去呢，就会有说明文字“浮”上来，移开又“沉”下去，感觉好炫！自己就在网上找实现代码啊，看看事件是怎么实现的！然后就找到了如下的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
        .main{
            width:738px;
            height:280px;
            margin:0px auto;
            border:5px solid #696;
            position:relative;
        }
        a{text-decoration:none}
        .main .cite{
            width:738px;
            position:absolute;
            bottom:0px;
            left:0px;
            text-align:center;
            -moz-opacity:0.5;
            filter:alpha(opacity=50);
            opacity:0.5;
            background:#333;
            border-bottom:2px solid #000;
            border-top:2px solid #000;
            color:white;
            overflow:hidden;
            display:none;
        }
        .main .word{
            position:absolute;
            height:0px;
            width:738px;
            text-align:center;
            bottom:0px;
            left:0px;
            color:white;
            display:block;
            overflow:hidden;
        }
    </style>
    <script type="text/javascript">
        var speed=10;
        var citeH=0;
        var flag;
        window.οnlοad=function(){
            var cite=document.getElementById("cite");
            var word=document.getElementById("word");
            var main=document.getElementById("main");

            function addHeight(){
                clearInterval(flag);
                cite.style.display="block";
                if(citeH<86){
                    citeH=citeH+1;
                    cite.style.height=citeH+"px";
                    word.style.height=citeH+"px";
                }
                else{
                    clearInterval(flag);
                    return;
                }
                flag=setInterval(addHeight,speed);
            }

            function reduceHeight(){
                clearInterval(flag);
                if(citeH>0){
                    citeH=citeH-1;
                    cite.style.height=citeH+"px";
                    word.style.height=citeH+"px";
                }
                else{
                    clearInterval(flag);
                    cite.style.display="none";
                    return;
                }
                flag=setInterval(reduceHeight,speed);
            }

            if(main.addEventListener){
                main.addEventListener("mouseover",addHeight,false);
                main.addEventListener("mouseout",reduceHeight,false);
            }
            else{
                main.attachEvent("onmouseover",addHeight);
                main.attachEvent("onmouseout",reduceHeight);
            }
        }
    </script>
</head>
<body>
<div class="main" id="main">
    <a href="#">
        <img src="1.jpg" border="0">
        <div class="cite" id="cite"></div>
        <div class="word" id="word">爱护大自然，共享自然风光</div>
    </a>
</div>
</body>
</html>

恩呢，放在编译器里，的确有效果，的确是我想象中的那样，可是，我自己感觉写的太复杂了，挺简单的一个问题对吧？然后就自己写了，刚开始有点小问题，不知道怎么实现那个上浮效果，最后想到了overflow这个属性，写出了以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="txex/html charset=utf-8" >
    <script src="jquery-1.11.1.js"></script>
    <style type="text/css">
        body{

            font-family: simhei;
        }
        p{
            color: #ffffff;
        }
        div{
            overflow: hidden;
        }
        </style>
    <script type="text/javascript">
        $(document).ready(function(){

            $(".pic").mouseover(function()


            {  $(".he").animate({top:'280px'},500);})

            $(".pic").mouseout(function()

                    {$(".he").animate({top:'330px'},500);}
            )
            });
        </script>
</head>
<body>
<div style="position: relative">
    <img src="test.png"  class="pic">
     <div style="width:231px;height: 50px;background-color: orange;position: absolute;top:330px" class="he">
          <p align="center" >开始答题</p>
        </div>
    </div>
</body>
</html>

是不是比上边那个简单多了，也很容易理解，实现了同样的效果。所以总结了，写代码也要讲究简单高效，是要靠“智商”去写的，恩恩，问题本身还是比较简单的，就是自己的“灵机一动”后，有点感概，与大家分享分享！

AlloyTeam-Zy

关注

8
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
如何实现鼠标放在图片上出现文字说明效果？

最近在浏览网页时，看到一些图片，鼠标一放上去呢，就会有说明文字“浮”上来，移开又“沉”下去，感觉好炫！自己就在网上找实现代码啊，看看事件是怎么实现的！然后就找到了如下的代码：蚂蚁部落 .main{ width:738px; height:280px; margin
复制链接

扫一扫