• 妙味——布局转换的应用


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #ul1{
        width: 366px;
        margin: 0 auto;
        position: relative;
    }
    #ul1 li{
        list-style: none;
        width: 100px;
        height: 100px;
        background: #ccc;
        border: 1px solid black;
        float: left;
        margin: 10px;
        z-index: 1;
    }
    </style>
    <script src="http://files.cnblogs.com/baixc/move.js"></script>
    <script>
    window.onload=function(){
        var oUl = document.getElementById('ul1');
        var aLi = oUl.getElementsByTagName('li');
        var iMinZindex = 2;
        var i = 0;
    
        //布局转换
        for(i=0;i<aLi.length;i++){
            // aLi[i].innerHTML='left:'+aLi[i].offsetLeft+'<br />top:'+aLi[i].offsetTop;
            aLi[i].style.left=aLi[i].offsetLeft+'px';
            aLi[i].style.top=aLi[i].offsetTop+'px';
        };
    
        for(i=0;i<aLi.length;i++){
            aLi[i].style.position='absolute';
            aLi[i].style.margin='0';
        };
    
        //加事件
        for(i=0;i<aLi.length;i++){
            aLi[i].onmouseover=function(){
                this.style.zIndex=iMinZindex++;
                startMove(this,{200,height:200,marginLeft:-50,marginTop:-50});
            };
    
            aLi[i].onmouseout=function(){
                startMove(this,{100,height:100,marginLeft:0,marginTop:0});
            };
        };
    };
    </script>
    </head>
    <body>
        <ul id="ul1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    </html>
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    数据结构与算法——红黑树
    JAVA数据结构——Map之HashMap
    JAVA数据结构——集合之LinkedList
    在Mac OS X下让你的Terminal带上Color
    Git使用指南(一)
    《乔布斯传》摘录
    必应语音API(Bing text to speech API)
    《设计心理学2》 摘录
    《设计心理学1》 摘录
    第10组 Beta冲刺(4/4)
  • 原文地址:https://www.cnblogs.com/baixc/p/3489816.html
Copyright © 2020-2023  润新知