关于错位动画的练习，原生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 ...
随机推荐
- Machine Learning & Data Mining 资料整合
机器学习常见算法分类汇总 | 码农网 数据挖掘十大经典算法 | CSDN博客 (内含十个算法具体介绍) 支持向量机通俗导论(理解 SVM 的三层境界)| CSDN博客 (强烈推荐关注博主) 教你如何迅 ...
- 将android Settings 源码 导入到 eclipse工程
1. 新建 android 项目 拷贝源码/packages/apps/Settings到你的其它目录. 在eclipse中,新建项目,但是要从exitting source选择: 2. 导入相关的 ...
- Android“This Handler class should be static or leaks might occur”警告的处理方法
此文属于转载! 最近用到handle在线程中改变UI,会跟给出“This Handler class should be static or leaks might occur”的警告,网上看了很多解 ...
- openstack domain serverID connect uri
- JavaFx版本植物大战僵尸
http://www.cnblogs.com/lslvxy/archive/2013/04/17/3026711.html —————————————————————————————————————— ...
- Java设计模式系列之策略模式
策略模式的定义: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换,策略模式让算法独立于使用它的客户而独立变化. 策略模式使这些算法在客户端调用它们的时候能够互不影响地变化 ...
- jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
- php and web service with wsdl
Following are the links: Developing Web Services Using PHP PHP Web Services with WSDL Creating Web S ...
- SmallDateTime时间范围检查
SamllDataTime是SQL Server中的一种表达时间的类型, 精度不高但是省空间,具体的细节就查看一下MSDN的文档吧. http://msdn.microsoft.com/zh-cn/l ...
- ListView为什么用setOnItemClick这个方法和onTouch这个方法有冲突
因为如果onTouch方法中返回true的话,这次事件就被ListView中的item控件消费了,所以不会执行ListVIew的setOnItemClick这个方法了,如果onTouch方法返回fal ...