图片展示的制作

时间：2022-06-12 04:16:01

在这里，我实现了在页面内进行图片展示，当鼠标移动到相应的图片上后，图片下方的文字介绍会上移，并完整显示，半透明的文字介绍会覆盖掉图片，当鼠标移开之后，文字又会回到原来的位置。

要实现这样的图片展示，我主要是通过改变文字介绍的top值来实现的。

在编码的过程中，我犯了一个错误，就是将js代码写在head标签内的时候并没有使用window.onload事件，导致页面功能受到影响。这样的情况，是因为没有保证页面加载完成。如果把这段js代码放在body结束标签前，就不会出错。

<!DOCTYPE html>
<html>
<head>
    <title>文字上移</title>
    <meta charset="utf-8">
    <style type="text/css">
    div{
        width:280px;
        height:290px;
        float:left;
        position:relative;
        overflow:hidden;
    }
                    
    a{
        position:absolute;
        top:270px;
        left:0;
        display:block;
        text-decoration:none;
        font-size:18px;
        line-height: 20px;
        font-weight: bold;
        width:280px;
        height:290px; 
        color:white;
        background: #000;
        opacity: 0.5;
        text-align: center;
    }
    </style>

    <script type="text/javascript">
    window.onload=function(){
    function showD(){
        var divs=document.getElementsByTagName("div");
        for(var i=0;i<divs.length;i++){
            divs[i].onmouseover=show;
            divs[i].onmouseout=unshow;
        }
    }
        function show(){
            this.getElementsByTagName("a")[0].style.top=0;
        }
        function unshow(){
            this.getElementsByTagName("a")[0].style.top=270+"px";
        }
        showD();
        }
    </script>
</head>
<body>

    <div id="box1">
            <img src="晋江封面.jpg">
            <a href="#">我的第一本小说<br/>
            在小说中描述了一段青梅竹马的故事
            </a>
    </div>
    <div id="box2">
        <img src="晋江封面.jpg">
            <a href="#">我的第一本小说<br/>
            在小说中描述了一段青梅竹马的故事
            </a>
    </div>


</body>
</html>

 

标签：

相关文章