每天一个效果：（6）相册选择功能

最新推荐文章于 2023-02-20 16:36:55 发布

liuyang___

最新推荐文章于 2023-02-20 16:36:55 发布

阅读量543

点赞数

分类专栏： css样式 js学习积累文章标签： javascript html 前端

本文链接：https://blog.csdn.net/liuyang___/article/details/123908470

版权

js学习积累同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

css样式

18 篇文章 0 订阅

订阅专栏

今天来写一个功能，就是鼠标放在那个小图片上，小图就会变到大图的位置上去。下面我们来看一下html代码

 <div>
        <img src="https://img0.baidu.com/it/u=2309643650,2890855463&fm=26&fmt=auto" alt="" class="big">
    </div>
    <div class="small">
        <img src="https://img0.baidu.com/it/u=2309643650,2890855463&fm=26&fmt=auto" alt="">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20200721ac%2F285%2Fw614h471%2F20200721%2F46f5-iwtqvyi9444293.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651243261&t=9632e6b36e740bc4994fac0e46652bde" alt="">
        <img src="https://img2.baidu.com/it/u=3604067922,525804311&fm=26&fmt=auto" alt="">
        <img src="https://img2.baidu.com/it/u=3562558155,1107192441&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=711" alt="">
    </div>

css代码

    <style>
        * {
            padding: 0;
            margin: 0;
        }
       .big {
           
            width: 415px;
            height: 400px;
        }
        .small>img {
            width: 100px;
            height: 100px;
        }
    </style>

接着看一下效果

写一下逻辑：其实就是写一个鼠标放上去的事件onmouseover，当鼠标放上去时候，可以把小图的src放在大图的src上面。我们看一下js代码。

    <script>
        //逻辑：本质上，把小图的src赋值给大图的src
        //图片元素.src =''
        let imgs = document.getElementsByTagName('img');
            console.log(imgs);
        for(let i = 1;i < imgs.length;i++) {
            imgs[i].onmouseover = function(){
                //把当前小图的src给到大图src
                imgs[0].src = this.src;
            
            }
        }

    </script>

看最后效果