<!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. select、poll、epoll之间的区别总结[整理]【转】

    转自:http://www.cnblogs.com/Anker/p/3265058.html select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符 ...

  2. redis map存储的注意点

  3. Codeforces 1103 E. Radix sum

    题目链接 神题. 题意:给定一个长度为\(10^5\)的幂级数\(a\),将卷积的下标运算定义为十进制下的不进位加法,求\(a^k\)模\(2^{58}\)的结果.\(k\leq 10^9\). 题解 ...

  4. Django的datetime.timedelta类(Django编程-2)

    datetime.timedelta对象代表两个时间之间的时间差,两个date或datetime对象相减就可以返回一个timedelta对象. 如果有人问你昨天是几号,这个很容易就回答出来了.但是如果 ...

  5. QAU 18校赛 J题 天平（01背包 判断能否装满）

    问题 J: 天平 时间限制: 1 Sec  内存限制: 128 MB提交: 36  解决: 9[提交][状态][讨论版][命题人:admin] 题目描述 天平的右端放着一件重量为w的物品.现在有n个重 ...

  6. Codeforces Round #419 (Div. 2) C. Karen and Game

    C. Karen and Game time limit per test 2 seconds memory limit per test 512 megabytes input standard i ...

  7. 洛谷P1516 青蛙的约会（扩展欧几里德）

    洛谷题目传送门 很容易想到,如果他们相遇,他们初始的位置坐标之差\(x-y\)和跳的距离\((n-m)t\)(设\(t\)为跳的次数)之差应该是模纬线长\(l\)同余的,即\((n-m)t\equiv ...

  8. android viewflipper的使用 实现图片滑动效果

    package com.homer.viewflipper; import android.app.Activity; import android.os.Bundle; import android ...

  9. 【BZOJ3456】城市规划（生成函数，多项式运算）

    [BZOJ3456]城市规划(生成函数,多项式运算) 题面 求\(n\)个点的无向连通图个数. \(n<=130000\) 题解 \(n\)个点的无向图的个数\(g(n)=2^{C_n^2}\) ...

  10. __AFO

    博主已退役高考,博客基本就很少回复了 NOI2018的游记也没时间写了,以后补上吧[其实是自己懒] 嗯就这样,高三加油!