zoukankan      html  css  js  c++  java
  • JS淘宝浏览商品

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相册</title> 
        <style>
            *{
                margin:0;
                padding:0;

            }
            ul{
                list-style: none;
                overflow: hidden;
            }
            ul li{
                float: left;
                 55px;
                height: 40px;
                margin-top: 10px;
                margin-left: 10px;
                border: 2px solid #fff;
            }
                ul li.active{
                    border-color: red;
                }
        </style>
    </head>

    <body>
            <img src="img/1.jpeg" id="img">
            <ul>
                <li>
                    <a href="">
                        <img src="img/1.jpeg" width="55px" height="40px" class="small">
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="img/2.jpeg" width="55px" height="40px"  class="small">
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="img/3.jpeg" width="55px" height="40px" class="small">
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="img/4.jpeg" width="55px" height="40px"  class="small">
                    </a>
              </li>
            </ul>
       <script>
        var big=document.getElementById('img');
        var small=document.getElementsByClassName('small');
        for(var i=0;i<small.length;i++)
        {
            small[i].onmouseover=function()
            {
                for(var j=0;j<small.length;j++)
                {
                    small[j].parentNode.parentNode.setAttribute('class','');
                }
                var smalls=this.getAttribute('src');
                big.setAttribute('src',smalls);

                this.parentNode.parentNode.setAttribute('class','active');
            }
        }
        </script>
    </body>

    </html>
  • 相关阅读:
    c#Socket通讯
    LeetCode 836. 矩形重叠
    AOP之SpringAOP、AspectJ、CGlib
    Springboot启动流程,跟着源码看看启动的时候都做了什么
    Mybatis/Mybatis plus/Hibernate如何忽略指定的字段不与数据库映射
    LeetCode 206. 反转链表
    LeetCode 1071. 字符串的最大公因子
    LeetCode 994. 腐烂的橘子
    Java生鲜电商平台-监控模块的设计与架构
    Java生鲜电商平台-售后模块的设计与架构
  • 原文地址:https://www.cnblogs.com/lxabner/p/12340928.html
Copyright © 2011-2022 走看看