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>

    实现简单效果也不错

  • 相关阅读:
    每日一道面试题-02
    JAVA获取对象的四种方式
    每日一道面试题-01
    MD5算法原理浅谈
    JAVA--时间格式转换
    数据库-union和union all
    Struts1和Struts2的区别
    Java定时器Timer
    webView调试
    webView和js交互规范
  • 原文地址:https://www.cnblogs.com/qingfengliuyun092815/p/5971885.html
Copyright © 2011-2022 走看看