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>
  • 相关阅读:
    【数据库开发】在Windows上以服务方式运行 MSOPenTech/Redis
    【数据库开发】在Windows上以服务方式运行 MSOPenTech/Redis
    【数据库开发】windows环境下通过c++使用redis
    【数据库开发】windows环境下通过c++使用redis
    【VS开发】【miscellaneous】windows(64位)下使用curl命令
    【VS开发】【miscellaneous】windows(64位)下使用curl命令
    【数据库开发】windows下使用c++调用redis
    【数据库开发】windows下使用c++调用redis
    【VS开发】【miscellaneous】 Windows下配置Git
    【VS开发】【miscellaneous】 Windows下配置Git
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14179210.html
Copyright © 2011-2022 走看看