一排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遍以后 才能一口气准确无误的写出来 告诉我的智商怎么了 拿什么救你
然后说正经的
就是有些传参的时候参数的拼写大小写 一定要注意注意注意!!!!!!!!!!!
一排div自由下落的更多相关文章
- 一些css知识
两个"::"和一个":"在css3中主要用来区分伪类和伪元素. 1.设置 placeholder属性: // firefox input::-moz-place ...
- 图片流滚动效果html代码(复制)
<!doctype html> <html> <head> <meta charset="utf-8" /> < ...
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
- 纯html+css中实现静态选座位效果技巧(input+label使用小技巧)
很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...
- 后台管理tab栏滑动解决方案
后台管理系统中比较常见的布局是左边菜单栏,右边tab切换栏,但是一般的tab组件不包含tab页过多的切换问题的,所以需要个性化实现,本文的实现方案是滑动鼠标滚轮绑定tab达到切换的效果,先上一个动态图 ...
- 一排下去再上来的div
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- [转]div与span区别及用法
DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- Codeforces Round #366 Div.2[11110]
这次出的题貌似有点难啊,Div.1的Standing是这样的,可以看到这位全站排名前10的W4大神也只过了AB两道题. A:http://codeforces.com/contest/705/prob ...
随机推荐
- leetcode:Summary Ranges
Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...
- SQL计算实际工作日(天)及两个时间(工作日)间隔(小时)!
Code highlighting produced by Actipro CodeHighlighter (freeware)-->去掉法定节假日(周六,周天)和指定节假日 USE [DBNa ...
- HTML的列表标签
一.上下层列表标签:<dl>..</dl>: 上层dt 下层dd:封装的内容会被自动缩进的效果 <dl> <dt>运动户外</dt> < ...
- 事务&视图和索引
一:事务 1.含义:事务是一个不可分割的整体,事务中的多个执行过程,同生共死.要么都执行成功,要么都执行失败. 事务必须具备以下四个属性,(简称:ACID): ①.原子性(Atomicity):事务的 ...
- 重装yum
1)卸载yum rpm -aq|grep yum|xargs rpm -e --nodeps 2)下载并安装python-urlgrabber,python-pycurl,yum-metadata-p ...
- mongodb用户授权
1)登录admin 数据库,admin是隐藏的数据库,为mongodb的超级管理员数据表mongo admin新建用户db.createUser({'user':'test','pwd':'12345 ...
- 一些纯css3写的公司logo
随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...
- android linux shell 日期设置
/************************************************************************ android linux shell 日期设置 * ...
- IntelliJ IDEA使用总结篇
解决控制台中文乱码的问题: 1.windows下改intellij安装目录下bin\idea.exe.vmoptions文件 加上 -Dfile.encoding=UT 2.设置IDEA server ...
- php最新出现的函数
1. 数据过滤函数 filter_var: filter_var — Filters a variable with a specified filter 过滤的类型有: Validate filt ...