<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="float.js"></script>

<script type="text/javascript">

window.onload = function ()

{

    var timer = null ;

    var num = 0;

    var len = 20;

    var str = '';

    var adiv = document.getElementsByTagName('div');

    var finished = true;

    var flag = true;

    for( var i = 0; i < len; i++)

    {

        str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';

    }

    document.body.innerHTML = str;

    document.onclick = function ()

    {

        if(!finished) {return ;}

        finished = false;

        clearInterval(timer);

        timer = setInterval( function ()

        {

            domove(adiv[num],'top',23,flag?500:0,num == len - 1?function (){ finished = true;flag = !flag; }:null);

            num++;

            if(len == num )

            {

                clearInterval(timer);

                num = 0;

            }

        },100);

    }

};

</script>

</head>

<body>

</body>

</html>
function getstyle(obj,attr)

{

    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

function domove (obj,attr,dir,target,endfn)

{

    dir = parseInt(getstyle(obj,attr))<target?dir:-dir;

    clearInterval(obj.timer);

    obj.timer = setInterval( function ()

    {

        var speed = parseInt(getstyle(obj,attr)) + dir;

        if(dir>0&&speed>target||dir<0&&speed<target)

        {

            speed = target;

        }

        obj.style[attr] = speed + 'px';

        if( speed == target )

        {

            clearInterval(obj.timer);

            endfn&&endfn();

        }

    },30);

};

一排下去再上来的div的更多相关文章

  1. Jquery div边框大全

    网址 http://jquery.malsup.com/corner/ jQuery Corner是一款jQuery的插件,最初由Dave Methvin开发,但后在Malsup同志的协助下,进行了一 ...

  2. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  3. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. img在div中居中的问题

    Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过 ...

  5. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  6. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. 影响div背景色显示的问题

    说来惭愧,走上程序猿这条不归路已经一年了,却连自己的博客都没有.看到道上有脸面的大神博客都做得贼漂亮~~于是,按捺不住了~~ 今天终于开通了博客园博客,正式开始我的博客人生啦!!!~~吼吼~~ 废话少 ...

  8. 展开、收起div的jQuery代码

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

  9. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

随机推荐

  1. HeadFirst Jsp 04 (请求和响应作为servlet)

    servlet 的存在就是为了客服服务, servlet的任务是得到一个客户的请求, 再发回一个响应. 由上图可知, web 容器会在启动后就加载所有的servlet类, 并为之创建实例和初始化 注意 ...

  2. Oracle数据库之二

    SELECT查询 函数分为: 单行函数 -- 一条记录进入,一条记录输出 多行函数(分组函数)-- 多条记录进入,按组输出 单行函数: select id,first_name,nvl(commiss ...

  3. Large Object Heap内存碎片在.NET 4.5中的改进

    .NET 4.5已然到来,预览了解了下Large Object Heap在.NET 4.5中的效能改进.借此和大家来探讨下.本文不讨论Loder Heap,SOH(samll object heap) ...

  4. R语言处理大规模数据集的编程要点

    1.提高程序效率,保证执行速度 (1)尽量使用向量化运算 (2)尽量使用矩阵,必要时才使用数据框 (3)使用read.table时,尽量显式设定colClasses和nrows,设定comment.c ...

  5. Intellij IDEA13 创建多模块Maven项目

    目标:构建一个类似于如下图所示的这种结构的Maven项目. 首先,需要选中“File”——>“New Project”如下图所示 选中“Maven”,设置项目名称与项目构建地址,点击“Next” ...

  6. volley(3) 参数{or_barcode:or_barcode,or_remai:or_remain, bar_remain:bar_remain} method:POST

    1. 来自于WHCombineBatchFragment.java/** * 分拆按钮点击事件,获取数据,同时获取popupWindow的数据 */private void breakingBtnCl ...

  7. 51nod 最长递增子序列

    nlogn版最长递增子序列.线段树.(其实常数蛮大的....) #include<iostream> #include<cstring> #include<algorit ...

  8. jquery ajax GET POST 跨域请求实现

    同一段逻辑代码需要在多个网站中使用, 每个网站都新建一个ashx真是扯蛋的作法,  所以想只请求一处的ashx, 这样便于维护和修改, 那么,ajax跨域问题就来了. 废话少说, 直接上代码,  我现 ...

  9. 二分图带权匹配、最佳匹配与KM算法

    ---------------------以上转自ByVoid神牛博客,并有所省略. [二分图带权匹配与最佳匹配] 什么是二分图的带权匹配?二分图的带权匹配就是求出一个匹配集合,使得集合中边的权值之和 ...

  10. HDU 5273 Dylans loves sequence (逆序对，暴力)

    题意: 给定一个序列,对于q个询问:(L,R)之间有几个逆序对?序列元素个数上限1000,q上限10万.仅1测试例子. 思路: [L,R]的逆序对数量可以这么算,假设L<=K<R,将区间拆 ...