<!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];

    }

}

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

  1. [Js]布局转换

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

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

    网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...

  3. 布局转换：文档流->绝对定位

    布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大 ...

  4. javascript布局转换

    javascript布局转换是将原有的浮动布局通过JS里面的javascript属性 offsetLeft 和offsetTop默认值来给元素设置绝对定位. 原来的:缺点--我们想给网页中的图片添加拖 ...

  5. Js 日期转换函数(UTC时间转换及日期想加减)

    IOS上Js日期转换中new Date("yyyy-mm-dd")不能正常工作,必须使用new Date("yyyy/MM/dd"); 日期相加减: Date. ...

  6. js数值转换

    先来几个题吧: var num1 = Number("123blue");var num2 = Number("");var num3 = Number([]) ...

  7. JavaScript进阶(四)js字符串转换成数字的三种方法

    js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...

  8. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  9. Js强制转换

    Js强制转换 ParseInt(a,b):整型 只能放字符串,b为基数.声明前面的数是几进制.因为只能放字符串,所以无论放什么都转换为字符串: 如果String以0x开头则为16进制的整数: ‘036 ...

随机推荐

  1. OneZero产品视频

    产品视频地址:http://v.youku.com/v_show/id_XMTU1MDMwOTk2OA==.html

  2. html 统一资源定位器（url）和url编码

    url,即统一资源定位器,也叫网址. 点击<a>标签就会连接到url指定的服务器web资源,文档或者其它数据: url的命名规则:url可是域名或者IP地址 url="shcem ...

  3. BZOJ1861[Zjoi2006]书架——非旋转treap

    题目描述 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿下一本.由于这些 ...

  4. Dapper 介绍

    转载:http://***/html/itweb/20130918/125194_125199_125210.htm .NET 轻量级 ORM 框架 - Dapper 介绍 Dapper简单介绍: D ...

  5. webapi返回泛型给easyui

    由于之前遇到的easyui调用webapi的问题. 参见 :http://blog.csdn.net/hanjun0612/article/details/51144991 所以就考虑,封装一个泛型用 ...

  6. Thymeleaf+SpringMVC，如何从模板中获取数据（转）

    在一个典型的SpringMVC应用中,带@Controller注解的类负责准备数据模型Map的数据和选择一个视图进行渲染.这个模型Map对视图进行完全的抽象,在使用Thymeleaf的情况下,它将是一 ...

  7. python3实现感知器，简单神经网络

    三个输入,四个输出,四组数据 对numpy和矩阵运算还不是太熟悉,可能写的复杂了点,矩阵数组来回转换 代码请查看码云 运行结果片段

  8. 【题解】 Codeforces Edu44 F.Isomorphic Strings （字符串Hash）

    题面戳我 Solution 我们按照每个字母出现的位置进行\(hash\),比如我们记录\(a\)的位置:我们就可以把位置表示为\(0101000111\)这种形式,然后进行字符串\(hash\) 每 ...

  9. Looper Handler Mssage

    1. 一个Handler只有一个队列;2. 在调用Handler.post(Runnable runnable)方法时,会将runnable封装成一个Message;3. 在队列执行时,会判断当前的M ...

  10. shell一些不为人知的技巧

    !$!$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样:$mkdir mydir$mv mydir yourdir$cd yourdir可以改成:$mkdir mydir$ ...