<!doctype html>

<html>

    <head>

        <meta charset = "utf-8">

        <title>未命题</title>

        <style>

            #ul1{

                margin: 100px auto 0;

                width:330px;

            }

            #ul1 li {

                height:100px;

                width:100px;

                position:relative;

                background: red;

                list-style-type:none;

                margin-right: 10px;

                margin-bottom: 10px;

                float:left;

            }

        </style>

        <script>

            window.onload = function ()

            {

                var oul = document.getElementById('ul1');

                var ali = oul.getElementsByTagName('li');

                var arr = [];

                var zindex = 1;

                for(var i = 0; i < ali.length; i++ )

                {

                    arr.push( {left:ali[i].offsetLeft,top:ali[i].offsetTop});

                }

                for(var i = 0; i < ali.length; i++ )

                {

                    ali[i].index = i;

                    ali[i].style.left = arr[i].left + 'px';

                    ali[i].style.top = arr[i].top + 'px';

                    ali[i].style.position = 'absolute';

                    ali[i].style.margin = '0px';

                    ali[i].onmouseover = function ()

                    {

                        this.style.background = 'green';

                        this.style.zIndex = zindex++;

                        startMove (this,

                            {

                                width:200,

                                height:200,

                                left:arr[this.index].left - 50,

                                top:arr[this.index].top - 50

                            });

                    }

                    ali[i].onmouseout = function ()

                    {

                        startMove (this,

                            {

                                width:100,

                                height:100,

                                left:arr[this.index].left,

                                top:arr[this.index].top

                            });

                    }

                }

                function startMove(obj, json, fn) {

                    clearInterval(obj.iTimer);

                    var iCur = 0;

                    var iSpeed = 0;

                    obj.iTimer = setInterval(function() {

                        var iBtn = true;

                        for ( var attr in json ) {

                            var iTarget = json[attr];

                            if (attr == 'opacity') {

                                iCur = Math.round(css( obj, 'opacity' ) * 100);

                            } else {

                                iCur = parseInt(css(obj, attr));

                            }

                            iSpeed = ( iTarget - iCur ) / 8;

                            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                            if (iCur != iTarget) {

                                iBtn = false;

                                if (attr == 'opacity') {

                                    obj.style.opacity = (iCur + iSpeed) / 100;

                                    obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';

                                } else {

                                    obj.style[attr] = iCur + iSpeed + 'px';

                                }

                            }

                        }

                        if (iBtn) {

                            clearInterval(obj.iTimer);

                            fn && fn.call(obj);

                        }

                    }, 30);

                }

                function css(obj,attr)

                {

                    if(obj.currentStyle)

                        return obj.currentStyle[attr];

                    else

                        return getComputedStyle(obj,false)[attr];

                }

            }

        </script>

    </head>

    <body>

        <ul id = "ul1">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </body>

</html>

js运动 九宫格展开的更多相关文章

  1. 第十节 JS运动中级

    链式运动框架. 回调函数 运动停止时,执行函数 运动停止时,开始下一次运动 <!DOCTYPE html> <html lang="en"> <hea ...

  2. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  3. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  4. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  5. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  6. 关于js运动的一些总结

    js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...

  7. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  9. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

随机推荐

  1. html5 移动端单页面布局

    序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...

  2. 第一篇 ERP是什么？-从道的层面浅谈我的理解

    世界上称为ERP软件的软件很多,国外的有SAP,ORACLE,国内的有金蝶,用友,浪潮.这些由不同的厂商开发制作的软件总有其软件适用的场合.这个场合就是企业,而且是市场经济中的企业.个人是不会购买ER ...

  3. android 开发如何做内存优化

    不少人认为JAVA程序,因为有垃圾回收机制,应该没有内存泄露.其实如果我 们一个程序中,已经不再使用某个对象,但是因为仍然有引用指向它,垃圾回收器就无法回收它,当然该对象占用的内存就无法被使用,这就造 ...

  4. Qt之QLabel

    简述 QLabel提供了一个文本或图像的显示,没有提供用户交互功能. 一个QLabel可以包含以下任意内容类型: 内容 设置 纯文本 使用setText()设置一个QString 富文本 使用setT ...

  5. 未能加载文件或程序集“XXXXXX”或它的某一个依赖项。试图加载格式不正确的程序。

    在本机WIN7机器上的WebService部署到Win2008R2上发现错误 “/”应用程序中的服务器错误. 未能加载文件或程序集“XXXXXX”或它的某一个依赖项.试图加载格式不正确的程序. 说明: ...

  6. HDU 1317 XYZZY【Bellman_Ford判断正环】

    题意:给出n个房间,初始在房间1有100的能量值,每次进入一个房间,能量值可能增加也可能减小,(是点权,不是边权),问能否到达终点的时候能量值还为正 这题自己写的时候wa--wa-- 后来看了题解,还 ...

  7. asp.net下通过泛解析和伪静态实现二级域名的实现方法

    在net中微软已经为我们留下了接口,让我们为所欲为了. 首先我们可以通过一张图大概了解下.net的生命周期. 从 上图可以看出来,针对每个不同用户的请求,服务器都会创建一个新的HttpContext实 ...

  8. 监听器Listener

    监听器 6个事件类,均以event结尾 *某些操作,如启动/关闭容器,创建/销毁会话,都将触发一种事件发生,当发生了某种事件,容器将创建对应的事件类对象 8个监听接口,均以Listener结尾 监听器 ...

  9. 【英语】Bingo口语笔记(11） - 表示“身体抱恙”

  10. marginCollapse之兄弟关系的DIV

    废话不说,直接上图 基本代码如下: 效果图如下: 给两个div分别加marginBottom和marginTop看一下效果 实际效果如下: 我们可以看出两个div之间的距离并不是50+50,而是只显示 ...