网页特效

最新推荐文章于 2024-09-03 09:51:41 发布

唥颜

最新推荐文章于 2024-09-03 09:51:41 发布

阅读量289

点赞数

分类专栏： javaScript基础

本文链接：https://blog.youkuaiyun.com/qq_40351096/article/details/78228511

版权

javaScript基础专栏收录该内容

6 篇文章

订阅专栏

这里写图片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

        <style>
            #img_show img{
                width: 500px;
            }


            #small_show img{
                width: 100px;
                /*border: 1px solid #eeeeee;*/
            }
            #small_show img:hover{
                cursor: pointer;
                border: 1px solid red;
            }
        </style>

        <script>
            window.onload=function(){
                photo = document.getElementById("photo");

            }

            function over(obj){
                photo.src=obj.src;

            }
        </script>
    </head>
    <body>
        <div id="img_show">
            <img id="photo" src="img/01.jpg"  />
        </div>
        <div id="small_show">
            <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>