前端设计之图片的展示

最新推荐文章于 2024-06-24 23:32:45 发布

wf_旧时光

最新推荐文章于 2024-06-24 23:32:45 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/misswangfeng/article/details/78226824

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

此篇为图片展示的放大展示，主要是运用HTML和js

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #img_small img{

                border: 1px solid gray;
                height: 100px;

            }
            #img_show img{
                border: 1px solid gray;
                height: 600px;
                width: 400px;

            }
            #img_small img:hover{

                cursor: pointer;
                border:1px solid red;

            }

        </style>
        <script>

            function over(obj){
                document.getElementById("img").src = obj.src;
            }

        </script>

    </head>
    <body>
        <div id="img_show">
            <img id="img" src="img/01.jpg" />
        </div>

        <div id="img_small">
            <img src="img/01.jpg" onmouseover="over(this)"/>
            <img src="img/02.jpg" onmouseover="over(this)"/>
            <img src="img/03.jpg" onmouseover="over(this)"/>
            <img src="img/04.jpg" onmouseover="over(this)"/>
            <img src="img/05.jpg" onmouseover="over(this)"/>


        </div>


    </body>
</html>