关于错位动画的练习，原生js编写
最近在网上看到一个关于错位动画的文章，感觉非常有趣，便自己练习了一下，文章连接：http://www.w3cplus.com/animation/staggering-animations.html
练习出来的效果地址：http://godzbin.github.io/%E5%8A%A8%E7%94%BB%E6%B5%8B%E8%AF%95.html
基本由原生js编写，代码如下：
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0;
}
.body{
position: relative;
margin: 10px;
}
.mainBox{
/*border: 1px #999 solid;*/
background: #eee;
float: left;
}
.mainBox2{
margin-left: 100px;
}
.childBox{
position: absolute;
background: #f00;
margin: 5px;
/*float: left;*/
}
</style>
</head>
<body>
<button>开启动画</button>
<div class="body"> </div>
<script>
window.onload = function() {
var isRun = false;
var isStop = 0;
var modeNumber = 1; function getBody() {
var body = document.getElementsByClassName("body");
return body[0];
}
// 主要的两个div
function createMainDiv(className) {
var mainDiv = document.createElement("div");
mainDiv.className = className;
mainDiv.style.height = "200px";
mainDiv.style.width = "200px";
getBody().appendChild(mainDiv);
} // 动画小方块
function createChildDiv(className, row, col) {
var childDiv = document.createElement("div");
childDiv.className = className;
childDiv.style.height = "40px";
childDiv.style.width = "40px";
childDiv.style.left = col * 50 + "px";
childDiv.style.top = row * 50 + "px";
getBody().appendChild(childDiv);
}
// 4*4的方块方阵
function createChildTable() {
for (var i = 0, l = 4; i < l; i++) {
for (var col_index = 0, col_l = 4; col_index < col_l; col_index++) {
var childClass = "childBox ";
var row = "row" + i;
var col = "col" + col_index;
var boxId = "box" + (i*4 + col_index);
createChildDiv(childClass + row + " " + col + " " + boxId, i, col_index);
}
}
} // 行动画
function animationRow(row, col) {
var a_row = row;
var a_col = col;
if (modeNumber > 0) {
a_row = Math.abs(row - (3 * modeNumber));
a_col = Math.abs(col - (3 * modeNumber));
}
var stopBoxsValue = stopBoxs(); setTimeout(function() {
animationColumn(row, col);
}, 100 * Math.abs(a_row + a_col - stopBoxsValue) );
}
// 已经结束的方块数
function stopBoxs() {
var stopBoxsValue = 0;
for (var i = 0, l = 4; i < l; i++) {
for (var col_index = 3, col_l = 0; col_index >= col_l; col_index--) {
var boxId = "box" + (i*4 + col_index);
var boxs = document.getElementsByClassName(boxId);
var box = boxs[0];
var left = col_index * 50 + 200 + 100;
var boxLeft = parseInt(box.style.left + 0);
if (modeNumber > 0 && boxLeft > left - 5) {
stopBoxsValue ++;
} else if (modeNumber < 0 && boxLeft < col_index * 50 + 5) {
stopBoxsValue ++;
}
}
}
return stopBoxsValue;
}
// 列动画
function animationColumn(r, col_index) {
var isOK = true;
// var row = "row" + r;
var boxId = "box" + (r*4 + col_index);
var boxs = document.getElementsByClassName(boxId);
var left = col_index * 50 + 200 + 100;
var box = boxs[0]; var boxLeft = parseInt(box.style.left + 0); if (modeNumber > 0 && boxLeft > left - 5) {
box.style.left = left + "px";
} else if (modeNumber < 0 && boxLeft < col_index * 50 + 5) {
box.style.left = col_index * 50 + "px";
} else {
box.style.left = boxLeft + (modeNumber * 5) + "px";
isOK = false;
} // 如果动画结束或者 停止 ，则中断setTimeOut
if (isOK || isStop) {
isStop>0 && isStop--;
return;
} setTimeout(function() {
animationColumn(r, col_index);
}, 500 / 60 * Math.sin(boxLeft / left * modeNumber));
}
// 动画
function animation() {
for (var i = 0, l = 4; i < l; i++) {
for (var col_index = 3, col_l = 0; col_index >= col_l; col_index--) {
animationRow(i, col_index);
}
}
} var button = document.getElementsByTagName("button");
button[0].onclick = function() {
if(this.isRun){
var runingBoxsValue = 16 - stopBoxs();
this.isStop = runingBoxsValue;
modeNumber = -modeNumber;
}
this.isRun = true;
animation();
};
createMainDiv("mainBox");
createMainDiv("mainBox mainBox2");
createChildTable();
}
</script>
</body>
</html>
写完以后感觉自己对数学的掌握真是忘光了，老实说经常练习这些对逻辑是很有帮助的，请大家指教咯，哈哈
关于错位动画的练习，原生js编写的更多相关文章
- 原生js编写的安全色拾色器
<html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
- 使用原生JS编写ajax操作XMLHttpRequst对象
ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象r ...
- 原生JS编写的照片墙效果实例演示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js万年历，麻雀虽小五脏俱全，由原生js编写
对于前端来说,我们可能见到最多的就是各种各样的框架,各种各样的插件了,有各种各样的功能,比如轮播啊,日历啊,给我们提供了很大的方便,但是呢?我们在用别人这些写好的插件,框架的时候,有没有试着问一问自己 ...
- 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...
- 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了
直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 原生js编写设为首页兼容ie、火狐和谷歌
// JavaScript Document // 加入收藏 <a onclick="AddFavorite(window.location,document.title)" ...
- 日历组件 原生js
自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...
随机推荐
- php 正则表达
今天看书,看到代码里面出现了一段正则表达式匹配语句preg_match,感觉水很深的感觉,网上搜了一些资料,暂时没时间学习,但是觉得以后学的话有两个网址比较靠谱,如下: php正则表达式手册:php ...
- 删除 Mac OS X 中“打开方式”里重复或无用的程序列表
如果右键菜单的「打开方式」里出现了已不存在的应用程序或者重复的项目,打开终端,执行以下命令: /System/Library/Frameworks/CoreServices.framework/Ver ...
- Windows下GNU之gcc体验方法
Windows 现在在Windows下开发C/C++程序一般都是用微软的编译器,当年的Borland已经成为传说.但是如果你不想付钱的话,也可以考虑Windows下的GCC. 在Windows下体验G ...
- Apache Spark GraphX的使用简介
类似 Spark 在 RDD 上提供了一组基本操作符(如 map, f ilter, reduce), GraphX 同样也有针对 Graph 的基本操作符,用户可以在这些操作符传入自定义函数和通过修 ...
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- string中c_str()、data()、copy(p,n)函数的用法
标准库的string类提供了3个成员函数来从一个string得到c类型的字符数组:c_str().data().copy(p,n). 1. c_str():生成一个const char*指针,指向以空 ...
- ORA-01033: ORACLE initialization or shutdown in progress 实用的处理方法
ORA-01033: ORACLE initialization or shutdown in progress 实用的处理方法,此问题通常是由于电脑非正常关机造成的,我们可以用下面的方法查找出是那个 ...
- CentOS 7安装iptables服务，以及常用命令
之前使用的是CentOS6.5,并且学艺不精,用啥查啥,用完就忘.并且网上大部分资料是基于CentOS7之前的版本. 在CentOS7中,默认的防火墙不是iptables,而是firewalld.而且 ...
- 栈的应用1——超级计算器（中缀与后缀表达式）C语言
这里要学的程序主要用来实现一个功能——输入表达式输出结果,也就是一个计算器.效果如下: 这个程序主要有两个步骤:1.把中缀表达式转换为后缀表达式:2.计算后缀表达式的结果. 首先先明白几个问题: 1. ...
- PHP 支持IMAP
linux下安装php支持imap 2008-11-26 10:31:10| 分类: linux 学习日志|举报|字号 订阅 第一步:安装apache注:当前目录为/tmp,目录下有http ...