zoukankan      html  css  js  c++  java
  • js 布局转换问题

    <!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">
    <head>
        <title>无标题页</title>
        <style type="text/css">
           *
           {
                   margin:0px;
                   padding:0px;
               } 
          ul
          {
            width:360px;
           
            position:absolute;    
           left:350px;
            top:100px;
            
          }
          ul li 
          {
            list-style:none;
            float:left;    
            margin:10px;
          }
          div
          {
            width:100px;
            height:100px;    
            background:#4AA0EF;
            z-index:1px;
            
          }
        </style> 
    
        <script src="../ajax/Move.js" type="text/javascript"></script>
    
        
        <script type="text/javascript">
            window.onload = function(){
                var oUl = document.getElementById("main");
                
                var oLi = oUl.getElementsByTagName("li");
            
                var mixZIndex= 2;
                for(var i=0;i<oLi.length;i++)
                {
                    //布局转换 (第一步)
                    oLi[i].style.left = oLi[i].offsetLeft+"px";
                    oLi[i].style.top = oLi[i].offsetTop +"px";
                }
                
                for(var i=0;i<oLi.length;i++)
                {
                    //将li绝对定位 (第二步)
                    oLi[i].style.position="absolute";
                }
                
                //备注:
                //第一步与第二步不能写在一个for循环之中
                //不然li不能起到绝对定位作用效果
                
                for(var i=0;i<oLi.length;i++)
                {
                    var oDiv = oLi[i].getElementsByTagName("div")[0];
                    
                    mixZIndex++;
                    oDiv.style.zIndex = mixZIndex;
                    oDiv.onmouseover = function(){
                        //alert(2);
                        move(this,{height:200,200,marginLeft:-50,marginTop:-50});
                    };
                    
                    oDiv.onmouseout = function(){
                        move(this,{height:100,100,marginLeft:0,marginTop:0});
                    };
                    
                }
               
            }
        </script>
    </head>
    
    <body>
        <ul id="main">
          <li>
            <div></div>
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
           <li>
            <div></div> 
          </li>
        </ul>
    </body>
    </html>

    move.js

    //运动框架
    //链式运动
    function move(obj,json,fun)
    {
        //先关闭定时器
        clearInterval(obj.timer);
        
        obj.timer = setInterval(function(){
            
            //是否停止运行
            var isStop = true;
            
            for(var attr in json)
            {
                //1、当前值
                var current = 0;
                //目标值
                var target = json[attr];
                //判断是否是透明度属性
                if(attr=="opacity")
                {
                     current = parseInt(parseFloat(getStyle(obj,attr))*100);
                }
                else
                {
                     current = parseFloat(getStyle(obj,attr));
                }
                
                //2、计算速度
                var speed = (target-current)/6;
                
                //如果速度大于0  向上取整   如果速度小于0 向下取整
                speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
                
                //计算运行结果
                if(attr=="opacity")
                {
                    //透明度兼容性
                    obj.style.filter="alpha(opacity:"+(current + speed)+")";
                    obj.style.opacity = (current + speed)/100;
                }
                else
                {   
                    //计算运动结果值
                    obj.style[attr] = current + speed +"px";
                }
                //判断是否所有属性都运动完成
                if(current!=target)
                {
                    isStop = false;
                }
            }
            
            //3、关闭定时器
            //所有属性运动完成 就闭关定时器
            if(isStop)
            {
                //关闭定时器
                clearInterval(obj.timer);
                //链式运动
                if(fun)
                {
                   fun();  
                }
            }
            
        },30);
    }
    
    //对象style属性值
    function getStyle(obj,attr)
    {
        if(obj.currentStyle)
        {
            return obj.currentStyle[attr];
        }
        else
        {
            return getComputedStyle(obj,null)[attr];
        }
    }
  • 相关阅读:
    linux下运行、停止jar包
    .net开发CAD2008无法调试的解决方法
    【转】C#获取当前程序运行路径的方法集合
    如何在arcmap中调试addin或者插件
    【转】WriteMessage的信息在AutoCAD中命令行中实时显示
    ArcGIS10的附件功能
    CAD调试时抛出“正试图在 os 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码”异常的解决方法
    [转]Tesseract 3.02中文字库训练
    Truncated incorrect DOUBLE value
    tomcat无故停止
  • 原文地址:https://www.cnblogs.com/zoro-zero/p/4335341.html
Copyright © 2011-2022 走看看