一个js的动画,以前以为只有flash可以实现
11年刚干这行的时候,看到这种什么百叶窗的动画,以为都是flash实现的,最近突然灵光一闪,想到了用js实现(虽然我不是做前端的,本人做.net)。代码虽然实现了,但是比较乱,先上个图:
代码主要就是一些数学的计算,然后结合html,css打造出类似flash的效果。
下面贴出主要的部分代码:
function all(books){
for(var i=0;i<self.rows;i++) {
for (var j = 0; j < self.columns; j++) {
if(!books[i][j])return false;
}
}
return true;
}
function resetBooks(books){
for(var i=0;i<self.rows;i++) {
for (var j = 0; j < self.columns; j++) {
books[i][j]=false;
}
}
return true;
}
var self=this,timer=null,_iindex= 0;
var initdir=[[[0,1],[1,0]],[[-1,0],[0,1]],[[0,-1],[-1,0]],[[0,-1],[1,0]],[[0,-1],[1,0],[0,1],[-1,0]]],dir=initdir[0];
var weight=[1,1,1,1,6];
var initpos=[[{x:0,y:-1}],[{x:self.columns-1,y:-1}],[{x:self.columns-1,y:self.rows}],[{x:0,y:self.rows}],[{x:self.columns/2,y:self.rows/2}]];
timer=setInterval(function(){
var n=[];
for(var i=0;i<self.preDivs.length;i++){
var _div=null,x= 0,y=0;
for(var j=0;j<dir.length;j++){
x=self.preDivs[i].x+dir[j][0];
y=self.preDivs[i].y+dir[j][1];
if(x>=0&&y>=0&&x<self.columns&&y<self.rows&&!self.books[y][x]){
self.books[y][x]=true;
_div=self.zzDivStatck[y][x];
n.push({x:x,y:y});
_div.style.backgroundImage = "url(" + self.zzImages[_iindex] + ")";
_div.style.backgroundPositionX = (-x * self.zzDivW) + "px ";
_div.style.backgroundPositionY = (-y * self.zzDivH) + "px";
}
} } self.preDivs=n;
if(all(self.books)){
resetBooks(self.books);
var _r=util.randomWeight(weight);
self.preDivs = initpos[_r];
dir=initdir[_r];
_iindex++;
}
if(_iindex>=+self.zzImages.length){
_iindex=0;
} },100);
源码附上:http://files.cnblogs.com/files/csbt/DDZ.zip
一个js的动画,以前以为只有flash可以实现的更多相关文章
- anime.js 实战:实现一个带有描边动画效果的复选框
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- JS实现动画原理一(闭包方式)
前提: 你必须了解js的闭包(否则你看不懂滴) 我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)
一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...
- 一个JS效果竟然要研究一天,我是不是不适合做前端?
前言 今天这篇文章的标题,显然是要搞事情.一个JS交互效果,居然花费了一天的宝贵时间才研究出来,我是不是不太适合做前端? 别急,搬好小板凳,正文从这开始- 本来今天下班回来感觉有点累,想着今天就别学了 ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
随机推荐
- [Scikit-learn] 1.2 Dimensionality reduction - Linear and Quadratic Discriminant Analysis
Ref: http://scikit-learn.org/stable/modules/lda_qda.html Ref: http://bluewhale.cc/2016-04-10/linear- ...
- Java语言实现机制
Java语言实现机制 1.Java虚拟机(Java Virtual Machine) Java虚拟机(JVM)是在一台计算机上由软件模拟也可以用硬件来实现的假想的计算机.它定义了指令集(相当于中央处理 ...
- 套接字(linux相关)
前言:略 一.前因 一切从tcp.udp开始. 众所周知,网络模型一般有两种模型,一种为OSI概念模型(七层),另一种为tcp/ip网络模型(四层). tcp/ip应用层对应OSI的应用层.显示层.会 ...
- Leetcode题解(33)
113. Path Sum II 题目 分析: 主要考察二叉树深度优先遍历(DFS),递归调用当前节点的左右结点即可,代码如下(copy网上): /** * Definition for binary ...
- Leftmost Digit
Problem Description Given a positive integer N, you should output the leftmost digit of N^N. Input ...
- 有道云翻译接口 Show类
package com.yangchong.fanyi; import java.awt.EventQueue;import java.awt.Toolkit; import javax.swing. ...
- struts2框架的登录制作
首先:我们要建一个web项目 接着: 我们先来导入struts的xml文件 第一步:右击你的项目名,鼠标到MyEclipse会看到一个add struts开头的文件,点开以后看到: 这里我们选择str ...
- 远程调用服务框架-CXF(WebServic)
介绍 远程调用web服务,不需要自己编写具体代码,只需要调用作者给出的接口即可. 我们可以调用互联网上查询天气信息Web服务,然后将它嵌入到我们的程序(C/S或B/S程序)当中来,当用户从我们的网点看 ...
- [转]移动前端开发之viewport的深入理解
今天去面试,被问到一个用了一万次的东西,然而我并不了解具体是个毛毛,看这一篇豁然开朗. DevicePixelRatio 以及这句话:移动设备上的viewport分为layout viewport ...
- [转载] FreeMarker教程
转载自http://www.blogjava.net/freeman1984/archive/2010/11/04/337239.html FreeMarker是一个模板引擎,一个基于模板生成文本输出 ...