<!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. hive 远程管理

  2. scipy线性模块liner（linalg）

    #liner import numpy as np from scipy import linalg as lg arr=np.array([[1,1],[0,1]]) matr=np.mat('[1 ...

  3. python 协程库gevent学习--gevent数据结构及实战(四)

    一不留神已经到第四部分了,这一部分继续总结数据结构和常用的gevent类,废话不多说继续. 1.Timeout错误类 晚上在调试调用第三方接口的时候,发现有些接口耗时非常多,觉得应该有个超时接口来限制 ...

  4. Codeforces Round #545 (Div. 1)

    本来开头两道题写得挺快的,然后第三题想了一会儿胡出一个scc计算gcd的做法,写了一发凭借信仰交了上去结果一发pp了?然后第四题沙雕了想了很久才会,于是罚时瞬间变多.结果后面两题都没时间看了,赛后感觉 ...

  5. Java动态代理、XML、正则

    15.1  动态代理        在之后学习Spring框架时,Spring框架有一大核心思想,就是AOP,(Aspact-Oriented-Programming 面向切面编程) 而AOP的原理就 ...

  6. VMWare 安装 Eclipse

    由于之前已经安装了  OpenJDK 所以 这次我们可以直接下载  eclipse来安装. Eclipse 下载:http://www.eclipse.org/downloads/?osType=li ...

  7. Java中浮点型数据Float和Double进行精确计算的问题

    Java中浮点型数据Float和Double进行精确计算的问题 来源  https://www.cnblogs.com/banxian/p/3781130.html 一.浮点计算中发生精度丢失     ...

  8. HTML 百度地图API调用示例源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. SharePoint 2013 APP 开发示例 （三）使用远程的web资源

    在这个示例里我们将详细介绍 TokenHelper 类, 我们将看到它是怎么简单地从远程web站点访问SharePoint的.我们还将取到它的一些值.这将帮助我们理解连接是怎么被构造的,同时也方便我们 ...

  10. 修复Mysql主从不同步shell

    使用第三方工具MySQL Enterprise Monitor,MySQL企业版监控工具.MONyog – MySQL Monior and Advisor,MONyog大家都不陌生,windows下 ...