<!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. GIL全局解释器锁+GIL全局解释器锁vs互斥锁+定时器+线程queue+进程池与线程池（同步与异步）

    以多线程为例写个互斥锁 from threading import Thread ,Lockimport timemutex = Lock() n = 100 def task(): global n ...

  2. 如何为TreeView定义三层模板并实现数据绑定

    一直以来都想对TreeView定义多层模板,并实现数据绑定做一个总结,今天在这里做一个概述,我们常用的两层的TreeView绑定的话,我们首先修改TreeView的模板,这里我们使用的是级联的数据模板 ...

  3. 牛客网练习赛7-B-购物

    在遥远的东方,有一家糖果专卖店. 这家糖果店将会在每天出售一些糖果,它每天都会生产出m个糖果,第i天的第j个糖果价格为C[i][j]元. 现在的你想要在接下来的n天去糖果店进行选购,你每天可以买多个糖 ...

  4. BZOJ3456 城市规划（多项式求逆）

    设f[i]为连通图的数量,g[i]为不连通图的数量,显然有f[i]=2i*(i-1)/2-g[i],g[i]通过枚举1所在连通块大小转移,有g[i]=Σf[j]*C(i-1,j-1)·2(i-j)*( ...

  5. MT【63】证明不是周期函数

    证明$f(x)=sinx^2$不是周期函数. 反证:假设是周期函数,周期为$T,T>0$. $$f(0)=f(T)\Rightarrow sinT^2=0\Rightarrow T^2=k_1\ ...

  6. PMOS 与 NMOS

    PMOS: NMOS: NMOS是栅极高电平(VGS > Vt)导通,低电平断开,可用来控制与地之间的导通.PMOS是栅极低电平(VGS < Vt)导通,高电平断开,可用来控制与电源之间的 ...

  7. django 关于视频播放

    django实现视频播放并适配主流浏览器,应用比较广泛的就是videojs了. videojs: <head> <link href="http://vjs.zencdn. ...

  8. django MTV架构下的网站开发步骤

    1.需求分析必不可少,一定要具体列出本次网站项目所要实现的目标,可能包括简单的页面草图与功能方块图等. 2.数据库设计. 3.了解网站的每一个页面,并设计网页模板(.html)文件 4.使用virtu ...

  9. bash执行命令分别输出正常日志和错误日志

    0. 说明 执行bash命令的定时任务时候,希望能把正常的日志输出到一个文件里面,同时如果执行的过程发生异常则把异常日志输出到另一个不同的文件中.方便今后异常排查,极大有利于快速定位出错位置. 需要了 ...

  10. [loj2585][APIO2018]新家

    题目 一条街上有\(n\) 个点,坐标为\(x_i\) , 店的种类为\(t_i\) , 开业时间为 \([a_i,b_i]\) ; 定义一种类型到一个点的距离为这种类的点到这个点的最近距离 ; 定义 ...