zoukankan      html  css  js  c++  java
  • 03 衣服相册切换效果

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            /*<!-- *选中所有标签 -->*/
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
                overflow: hidden;
            }

            ul li{
                float: left;
                 100px;
                height: 100px;
                margin-left: 10px;
                margin-top: 20px;
                border: 2px solid #fff;
            }

            ul li.active{
                border-color: red;
            }

        </style>
    </head>
    <body>
        <img src="./image/1.jpg" id="bigImg" width="400px" height="400px">
        <ul>
            <li class="active">
                <a href=""><img src="./image/2.jpg" width="100px" class="smallImg"></a>
            </li>

            <li>
                <a href=""><img src="./image/3.jpg"width="100px"class="smallImg"></a>
            </li>

            <li>
                <a href=""><img src="./image/4.jpg"width="100px"class="smallImg"></a>
            </li>

            <li>
                <a href=""><img src="./image/5.jpg"width="100px"class="smallImg"></a>
            </li>

        </ul>

        <script type="text/javascript">
            //1.获取事件源
            var bigImg = document.getElementById('bigImg');
            var smallImg = document.getElementsByClassName('smallImg');
            
            for(var i = 0;i < smallImg.length;i++){
                //遍历集合,给每个img标签添加事件
                smallImg[i].onmouseover = function(){
                    //再悬浮到每个li标签之前,先把所有的li标签的类名都置为空值
                    for(var j = 0;j < smallImg.length;j++){
                        smallImg[j].parentNode.parentNode.setAttribute('class','');
                    }

                    //修改大图的src属性值
                    var smallImgsrc = this.getAttribute('src');
                    bigImg.setAttribute('src',smallImgsrc);

                    //给鼠标悬浮的img标签的父标签添加类
                    this.parentNode.parentNode.setAttribute('class','active');
                }
            }


        </script>

    </body>
    </html>
  • 相关阅读:
    CDH5.13 集成Kerberos配置
    使用bash脚本删除文件最后几行
    yolov3模型微调(fine-tune)备忘
    ubuntu 18.04 rsync 命令使用 服务端配置
    python 子包调用 跨目录调用
    [转]命令行界面 (CLI)、终端 (Terminal)、Shell、TTY的联系与区别
    bash shell 判断变量是否在列表中
    TensorFlow 图像分类模型 inception_resnet_v2 模型导出、冻结与使用
    numpy 数组集合运算及下标操作
    Win10 Service'MongoDB Server' failed to start. Verify that you have sufficient privileges to start system services【简记】
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14179210.html
Copyright © 2011-2022 走看看