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,width:200,marginLeft:-50,marginTop:-50});
                };

                oDiv.onmouseout = function(){
                    move(this,{height:100,width: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];
    }
}
时间: 2024-10-11 22:09:08

js 布局转换问题的相关文章

【前端】Vue.js实现网格列表布局转换

网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

javascript布局转换

javascript布局转换是将原有的浮动布局通过JS里面的javascript属性 offsetLeft 和offsetTop默认值来给元素设置绝对定位. 原来的:缺点——我们想给网页中的图片添加拖拽事件 我们发现没有定位是无法完成的 所有我们必须要用到下面的布局转换 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

《Ext.net》布局以及Ext JS布局

今天主要对Ext.net布局和Ext js 布局的一个学习. Ext.Net布局概述 Ext.Net中的布局是对ExtJS布局的封装,可以用在panel控件,或者继承自panel的控件,例如window.form.gridpanel.treepanel等.首先来看一个简单的例子: <ext:Window runat="server" ID="win1" Title="Layout示例" Width="600" Heigh

布局转换——考验CSS功底的时刻到来

前几天的时候在QQ群里有一位朋友遇到了这样一个问题,是关于布局转换的,在说这个问题之前,我希望给大家介绍一下什么叫布局转换. 首先我们经常会遇到这种布局: 我想大家一看就会想到外面一个父级,里面6个子元素,一浮动,OK了,只有脑子稍稍不正常的人才会用position:absolute定位一个一个定.我和大家想的也一样,因此这样一个布局自然就出来了 1 <ul id="ul1" class="clear"> 2 <li>1</li>

js字符串转换成数字,数字转换成字符串

js字符串转换成数字   将字符串转换成数字,得用到parseInt函数. parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseInt('123') : 返回 123(int): parseInt('1234xxx') : 返回 1234(int): 如果解析不到数字,则将返回一个NaN的值,可以用isNaN()函数来检测: 举例 : var i = parseInt('abc'); if (isNaN(i)) { alert('NaN value

Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局

首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计: 比如: 分辨率宽度1200像素以上的屏幕上,网格的宽度会由60px变为70px,且网格与网格之间的距离由20px变为30px 在平板电脑的垂直状

js 字符串转换数字

js 字符串转换数字  方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示例如下: parseInt("1234blue"); //returns 1234parseInt("0xA"); //ret

js 字符串转换成数字的三种方法

在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才

jquery 和 js 对象转换

核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id')得到的是jquery对象,它不能使用js中的dom方法.所以,如果jquery对象要使用标准的dom方法,就需要进行对象转换. 刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间