zoukankan      html  css  js  c++  java
  • 制作图片墙

      今天学习了HTML加上CSS 简单JS实现图片墙代码如下

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        window.onload=function(){
            var oUl = document.getElementsByTagName('ul')[0];
            var aLiUl = oUl.getElementsByTagName('li');
    
            var oOl = document.getElementsByTagName('ol')[0];
            var aLiOl = oOl.getElementsByTagName('li');
            for( var i=0;i<aLiOl.length;i++){
                aLiOl[i].index = i;
                aLiOl[i].onmouseover=function(){
                    for( var i=0;i<aLiOl.length;i++){
                       aLiOl[i].className='' ;
                       aLiUl[i].style.display='none';
                    }
                    this.className='active';
                    aLiUl[this.index].style.display = 'block';
                }
            }
        }
        </script>
        <style type="text/css">
            body,ul,ol{margin: 0;padding: 0;}
            li{list-style: none;}
            img{border: none;vertical-align: top;}
            #box{width: 470px;height: 150px;position: relative;margin: 30px auto;overflow: hidden;}
            ul{width: 470px;position: absolute;left: 0;top: 0;z-index: 1;}
            ul li{width: 470px;display: none;}
            ol{z-index: 2;width: 120px;position: absolute;right: 10px;bottom: 10px;}
            ol li{width: 20px;height: 20px;float: left;margin: 0 2px;display: inline;;background: #fff;color: #f60;line-height: 20px;text-align: center;}
            ol .active{background-color: #f60;color: #fff;}
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li style="display: block"><img src="1.jpg"></li>
                <li><img src="2.jpg"></li>
                <li><img src="3.jpg"></li>
                <li><img src="4.jpg"></li>
                <li><img src="5.jpg"></li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
    </body>
    
    </html>

    实现简单效果也不错

  • 相关阅读:
    对称加密和非对称加密
    SpringMVC 请求调用过程
    Swagger2常用注解和使用方法
    玩转汉诺塔
    java序列化
    判断当前时间是否在某时间段内
    docker限制容器日志大小
    MySQL数据库备份与恢复
    MySQL事物
    MySQL用户
  • 原文地址:https://www.cnblogs.com/qingfengliuyun092815/p/5971885.html
Copyright © 2011-2022 走看看