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(speed > target&& dir >0 || speed < target && dir < 0)

        {

            speed = target;

        }

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

        if(speed == target)

        {

            clearInterval(obj.timer);
　　　　　　  endfn&&endfn();

        } 

    },30)

}*/

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();

    },50);

};
<!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');

    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 ()

    {

        clearInterval(timer);

        timer = setInterval( function ()

        {

            domove(adiv[num],'top',23,500)

            num++;

            if( num == len )

            {

                clearInterval(timer);

            }

        },100)

    };*/

    document.onclick = function ()

    {

        clearInterval(timer);

        timer = setInterval( function ()

        {

            domove(adiv[num],'top',23,500)

            num++;

            if(len == num )

            {

                clearInterval(timer);

            }

        },100);

    }

};

</script>

</head>

<body>

</body>

</html>

今天状态不佳（事实确实如此，其实都是借口 TAT）

看别人写了20分钟的代码 自己练了4遍以后 才能一口气准确无误的写出来 告诉我的智商怎么了 拿什么救你

然后说正经的

就是有些传参的时候参数的拼写大小写 一定要注意注意注意！！！！！！！！！！！

一排div自由下落的更多相关文章

  1. 一些css知识

    两个"::"和一个":"在css3中主要用来区分伪类和伪元素. 1.设置 placeholder属性: // firefox input::-moz-place ...

  2. 图片流滚动效果html代码(复制)

    <!doctype html> <html> <head>     <meta charset="utf-8" />     < ...

  3. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  4. 纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

    很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...

  5. 后台管理tab栏滑动解决方案

    后台管理系统中比较常见的布局是左边菜单栏,右边tab切换栏,但是一般的tab组件不包含tab页过多的切换问题的,所以需要个性化实现,本文的实现方案是滑动鼠标滚轮绑定tab达到切换的效果,先上一个动态图 ...

  6. 一排下去再上来的div

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

  7. [转]div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. Codeforces Round #366 Div.2[11110]

    这次出的题貌似有点难啊,Div.1的Standing是这样的,可以看到这位全站排名前10的W4大神也只过了AB两道题. A:http://codeforces.com/contest/705/prob ...

随机推荐

  1. HDU 4744 Starloop System（ZKW费用流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4744 题意:三维空间n个点,每个点有一个wi值.每对点的距离定义为floor(欧拉距离),每对点之间建 ...

  2. [HDOJ1043]Eight（康托展开 BFS 打表）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043 八数码问题,因为固定了位置所以以目标位置开始搜索,把所有情况(相当于一个排列)都记录下来,用康托 ...

  3. 安卓发展史以及安卓和苹果对比PPT

    此PPT由我们小组协力完成,介绍了Android的发展史以及android与苹果的一些比较.概述了android发展至今的一系列版本,功能的日益完善,它的强大性,灵活性,公开性使其拥有吸引客服的绝大魅 ...

  4. svn:revert to this version 和 revert changes from this version的区别

    假设我们有许多个版本,版本号分别是1-10 如果我们在7这里选择revert to this version那么7之后的8,9,10的操作都会被消除 如果在7选择revert changes from ...

  5. Android无法访问本地服务器（localhost）的解决方案

    在Android开发中通过localhost或127.0.0.1访问本地服务器时,会报java.net.ConnectException: localhost/127.0.0.1:8083 -Conn ...

  6. SQL中返回一个字符串在另一个中存在的次数

    ALTER FUNCTION [reg].[f_GetSameStringCntNoSort] ( @str1 VARCHAR(),--源字符串,取该串中的@strLen长度的字符是否在目的字符串 @ ...

  7. 【笨嘴拙舌WINDOWS】GDI对象之位图

    GDI对象在windows中可以描述成为一次绘画操作时可使用的抽象工具.包括(画笔.画刷.字体.区域.调色板.位图等) GDI对象里的对象概念和在编程领域中面向对象编程的对象概念是不一样的! GDI对 ...

  8. Quickhit快速击键

    一.项目分析 根据输入速率和正确率将玩家分为不同等级,级别越高,一次显示的字符数越多,玩家正确输入一次的得分也越高.如果玩家在规定时间内完成规定次数的输入,正确率达到规定要求,则玩家升级.玩家最高级别 ...

  9. linux sed 命令

    转载:http://www.cnblogs.com/dong008259/archive/2011/12/07/2279897.html sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行 ...

  10. IOS中用UIFont返回字体的行高、动态改变tableView中Cell的高度

    一.动态改变Cell的高度 1.利用tableView代理方法的返回值决定每一行cell的高度 - (CGFloat)tableView:(UITableView *)tableView height ...