zoukankan      html  css  js  c++  java
  • 多图片放大显示

    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            *{
                    margin:0;
                    padding:0}
            #box{
                366px;
                height:366px;
                border:2px solid red;
                margin:50px auto;
                position: relative;
            }
                li{
                    100px;
                    height:100px;
                    border:1px solid #999;
                    background: green;
                    float:left;
                    list-style:none;
                    margin:10px;
                }
            </style>
            <script src="move.js"></script>
            <script>
                window.onload=function(){
                    var oBox=document.getElementById("box");
                    var aLi=oBox.children;
                    var arr=[];//用来存放每个li的位置;
                    for(var i=0;i<aLi.length;i++){
                        arr[i]={left:aLi[i].offsetLeft, //获取到float布局中oBox的相对左距离
                                top:aLi[i].offsetTop}
                            }
                    //布局转换,float--position
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].style.position='absolute';
                        aLi[i].style.left=arr[i].left+'px';
                        aLi[i].style.top=arr[i].top+'px';
                        aLi[i].style.margin=0;  //定位布局后不需要margin,因为已经设定了位置;
                        }
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].onmouseover=function(){
                            move(this,{200,height:200,marginLeft:-50,marginTop:-50},{time:500,easing:'ease-out'});
                            this.style.zIndex=i++;//保证移上去的那个层级最高
                        }
                        aLi[i].onmouseout=function(){
                            move(this,{100,height:100,marginLeft:0,marginTop:0},{time:500,easing:'ease-out'});
                        }
                    }
                }
            </script>
        </head>
        <body>
            <ul id="box">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </body>
    </html>
  • 相关阅读:
    Java 8 的内存结构
    数据库锁和隔离级别
    MySQL中的where和having
    单例对象线程安全问题
    计算机速成课 第6集:寄存器 & 内存
    多叉树的深度优先和广度优先遍历
    javascript中异步任务的执行顺序
    错误:C2062:意外的类型"unsigned int"问题的排查
    键值类型QMap、QHash等区别
    qt中文不相等问题
  • 原文地址:https://www.cnblogs.com/yang0902/p/5705367.html
Copyright © 2011-2022 走看看