<!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. spring学习总结(一)_Ioc基础(下)

    本篇文章继续上篇文章讲解Ioc基础,这篇文章主要介绍零配置实现ioc,现在相信大家项目中也基本都是没有了xml配置文件.废话不多说.一起学习 代码示例 BookDao.java package com ...

  2. Java_常用工具类收集

    一.日期工具类 package com.ebd.application.common.utils; import java.sql.Timestamp; import java.text.DateFo ...

  3. BZOJ5415[Noi2018]归程——kruskal重构树+倍增+堆优化dijkstra

    题目描述 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 n 个节点.m 条边的无向连通图(节点的编号从 1 至 n).我们依次用 l,a 描述一条边的长度.海 ...

  4. BZOJ4828 AHOI/HNOI2017大佬（动态规划+bfs）

    注意到怼大佬的操作至多只能进行两次.我们逐步简化问题. 首先令f[i][j]表示第i天结束后自信值为j时至多有多少天可以进行非防御操作(即恢复自信值之外的操作).这个dp非常显然.由于最终只需要保证存 ...

  5. MVC 多submit

    直接上代码 3种情况: 第一种,由于form已经可以支持多个了.所以我们分成2个form来提交,submit会根据自己所在的form来提交当前表单的内容 @using (Html.BeginForm( ...

  6. Ant Trip HDU - 3018（欧拉路的个数 + 并查集）

    题意: Ant Tony和他的朋友们想游览蚂蚁国各地. 给你蚂蚁国的N个点和M条边,现在问你至少要几笔才能所有边都画一遍.(一笔画的时候笔不离开纸) 保证这M条边都不同且不会存在同一点的自环边. 也就 ...

  7. day11 map函数

    场景模拟:实现一个列表内所有元素 *2 的效果 普通的实现方式单个列表是可以做到很轻松的实现,但是如果我又多个列表都要这个操作,那每个都操作就会重复代码 ret = [] num_1 = [1,2,1 ...

  8. Python的单向链表实现

    思路 链表由节点组成,先规定节点(Node),包含data和指向下个节点的next 初始化 data当然就是传入的data了,next指向None 添加 分两种情况: 链表为空,那么头节点和尾节点都指 ...

  9. suoi46 最大和和 (线段树)

    <Segment tree Beats!>,反正我不会 #include<bits/stdc++.h> #define pa pair<int,int> #defi ...

  10. UVALive - 6434 （思维题）

    题目链接:https://vjudge.net/contest/241341#problem/A 题目大意,给你n个数字,让你分成m组,每组的花费为每组的最大值-最小值,总的花费就是各组花费相加,要求 ...