关于错位动画的练习，原生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 ...
随机推荐
- BootStrap入门教程 (三) ：可重用组件（按钮，导航，标签，徽章，排版，缩略图，提醒，进度条，杂项）
上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...
- 解决IE5、IE6、IE7与W3C标准的冲突,使用(IE7.js IE8.js)兼容
如果分别用IE5.IE6.IE7浏览同一个网页,将可能出现不一样的效果. 这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致.为了解决这些错误和bug. 我们不得不找到一个能平衡于它们之间 ...
- 第二百三十九天 how can I 坚持
去看了个电影,消失的凶手,乐视会员送的电影票,有点虐心,不过看着感觉还挺不错. 下了班就去看了,也没有吃饭,不过没感觉到饿,回来吃了份泡面,还喝了袋冰凉的酸奶,现在已经感觉肚子有点疼了,哎.. 哲学是 ...
- Java缓存学习之四：EhCache
EhCache 关键词:纯Java的进程内缓存框架.Java分布式缓存.缓存数据有两级:内存和磁盘.缓存数据会在虚拟机重启的过程中写入磁盘.是hibernate默认的缓存provider: Ehcac ...
- JNI调用测试
有需求使用JNI调用,籍着这个机会按照<Linux下测试Java的JNI(Java Native Interface)>上进行了下测试. 这篇文章记录得很清楚了,对原理未做深入的分析,希望 ...
- maven系列（1）-maven的介绍与安装
maven的介绍 maven是大名鼎鼎的Apache下的java构建工具. Apache Maven is a software project management and comprehensio ...
- Quality Center11初始化失败
打开start_a.jsp页面总是闪退,原因如下: 初始化失败因为证书签名过期了.把IE选项里证书检查的三项勾掉就好了(检查发行商的证书是否吊销.检查服务器证书吊销.检查已下载的程序的签名)
- HDU 4438 Hunters (数学，概率计算)
题意:猎人A和B要进行一场比赛.现在有两个猎物老虎和狼,打死老虎可以得X分,打死狼可以得Y分.现在有两种情况: (1)如果A与B的预定目标不同,那么他们都将猎到预定的目标. (2)如果A与B的预定目标 ...
- TypeScript学习笔记（三）：类
类 在TypeScript中,类似于C#的结构,即一个文件中可以存在多个类,且文件名可以任意取,我们先看一个简单的类的示例. class Person { private name: string; ...
- POS机刷卡失败的郁闷事
6月13号在老家的金店为未来老婆买首饰,刷的工行POS机. 结果8000多RMB从卡里扣了,商家又没收到钱……POS机提示“交易超时”…… 当天和商家到就近的工行,工行经理说他负责协调这事,只要钱到商 ...