一排div自由下落

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遍以后 才能一口气准确无误的写出来 告诉我的智商怎么了 拿什么救你

然后说正经的

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

时间: 2025-01-02 15:41:58

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

分析老师的瀑布流

设 计这个瀑布流的样式就是所有图片宽度相同,高度不同,得到屏幕的宽度(这里为了让点击放大缩小屏幕的时候不至于让样式乱跳,图片移位,所以不使用document.documentElement.clientWidth而是用屏幕分辨率的宽度,window.screen.width) 先把整个外层Div设置成相对定位,然后里面每个包裹图片的Div才可以设置成绝对定位.我们首先要根据屏幕宽度和图片的宽度来确定每一行能放几张图片. 时我们需要自己写两个方法,(由于瀑布流无限加载事件是由滚动条事件触发,每次滚

纯html+css中实现静态选座位效果技巧(input+label使用小技巧)

很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下或者同级向下选中,而不能向上选中,这样就对于想控制前面样式的时候带来麻烦.input+label关联的方式即可实现,因为input和label是通过id值来进行关联的,而html中规定了,id值必须唯一,那么我将input放置在html的body下的任意位置,均可实现关联,所以为了实现后方代码控制前

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

整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击图片放大.上下切换效果.HTML布局写的很简单,图片加载主要是在JS中通过访问自定义的JSON字符串来实现.动态瀑布流的原理简单理解就是把新需要加载的图片放在上一排总高度最小的图片或模块下面,实现参差不齐的多栏布局效果.具体效果如下: 做这个案例我用了之前自己封装的框架,所以小伙伴需要到我的另一篇文

一排下去再上来的div

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="float.js"></script> <script type="tex

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

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图 一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考   -   TOP 在实际DIV+CSS布局项目中,一般不会只使用一次

div与span区别及用法

DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签. 目录 特点与区别 小结 知识扩展 案例效果演示 一.DIV与SPAN的区别与特点   -   TOP 以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍div与span区别div占用的位置是

div+css(ul li)实现图片上文字下列表布局

css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; width:536px; overflow:hidden}使用margin:0 auto,让ul结构布局居中:使用overflow:hidden,因为ul的子级使用float属性会产生浮动,所以使用清除子级使用float对父级产生不能撑开问题:使用宽度width:536px;固定宽度让子级li准确一排只排

跟着传智播客学习asp.net之DIV+CSS

div+css详解 学习资料:韩顺平div+css视频.css禅意花园.别具光芒.csdn网页设计专栏.开源之祖sourceforeg.net.php开源大全 www.php.open.com Div+css (sascading style sheets:层叠样式表)是什么? 传统table布局缺点: 1. 显示样式和数据是绑定在一起的 2. 布局的时候灵活度不高 3. 一个页面可能会有大量的<table>元素,代码冗余 4. 增加带宽(200字节) 5. 搜索引擎不喜欢这样的布局 优点 1

Div与Span

你对DIV与SPAN区别及用法是否了解,这里和大家分享一下,在DIV+CSS开发的时候在html网页制作,特别是标签运用中DIV和span的区别及用法都是非常重要的内容. DIV与SPAN区别及用法 在DIV+CSS开发的时候在html网页制作,特别是标签运用中DIV和span的区别及用法.新手在使用web标准(DIVCSS)开发网页的时候,遇到第一个问题是DIV与span有什么区别,什么时候用DIV,什么时候用span标签. 以下是在没有对开发网页页面设置CSS样式时候情况下,系统默认情况下的