zoukankan      html  css  js  c++  java
  • [Js]布局转换

    为什么要布局转换?

    要这样的效果,单写css,只要给每个li浮动就行,不需要绝对定位。但是比如做一些效果(如鼠标移入图片变大),就需要改变位置了。直接给每个li在css上定好位置不方便,也不知道有几个li

    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    #ul1{position: relative; 500px; margin: 20px auto;}
    #ul1 li{ float: left; 100px; height: 100px; margin: 10px; border: 1px solid #000; list-style: none;}

    window.onload=function(){
        var ul1=document.getElementById("ul1");
        var oLi=ul1.getElementsByTagName("li");
        var i=0;
        for(i=0;i<oLi.length;i++){
            oLi[i].style.left=oLi[i].offsetLeft+'px';
            oLi[i].style.top=oLi[i].offsetTop+'px';        
        }
        for(i=0;i<oLi.length;i++){
            oLi[i].style.position='absolute';      //定好位置再循环设position,直接在上面设,会揉成一个li
            oLi[i].style.margin='0';
        }
    };   

  • 相关阅读:
    0.1.3 set的用法
    JoinPoint
    砝码组合(dfs)
    强大的【环绕通知】
    applicationContext.xml 模板
    各种jar包
    装饰博客(二)添加宠物
    装饰博客(一)添加背景图片
    拖拽功能的实现
    点击之后连接qq
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3671286.html
Copyright © 2011-2022 走看看