基于JavaScript实现百叶窗动画效果不只单纯flas可以实现


Posted in Javascript onFebruary 29, 2016

看到这种什么百叶窗的动画,以为都是flash实现的,最近突然灵光一闪,想到了用js实现(虽然我不是做前端的,本人做.net)。代码虽然实现了,但是比较乱,先上个图:

基于JavaScript实现百叶窗动画效果不只单纯flas可以实现

一个js的动画,以前以为只有flash可以实现

代码主要就是一些数学的计算,然后结合html,css打造出类似flash的效果。

下面贴出主要的部分代码:

function all(books){
for(var i=;i<self.rows;i++) {
for (var j = ; j < self.columns; j++) {
if(!books[i][j])return false;
}
}
return true;
}
function resetBooks(books){
for(var i=;i<self.rows;i++) {
for (var j = ; j < self.columns; j++) {
books[i][j]=false;
}
}
return true;
}
var self=this,timer=null,_iindex= ;
var initdir=[[[,],[,]],[[-,],[,]],[[,-],[-,]],[[,-],[,]],[[,-],[,],[,],[-,]]],dir=initdir[];
var weight=[,,,,];
var initpos=[[{x:,y:-}],[{x:self.columns-,y:-}],[{x:self.columns-,y:self.rows}],[{x:,y:self.rows}],[{x:self.columns/,y:self.rows/}]];
timer=setInterval(function(){
var n=[];
for(var i=;i<self.preDivs.length;i++){
var _div=null,x= ,y=;
for(var j=;j<dir.length;j++){
x=self.preDivs[i].x+dir[j][];
y=self.preDivs[i].y+dir[j][];
if(x>=&&y>=&&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=;
}
},);

以上代码是使用javascript实现的百叶窗动画效果,希望对大家有所帮助!

Javascript 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
ClearTimeout消除闪动实例代码
Feb 29 #Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 #Javascript
jquery trigger函数执行两次的解决方法
Feb 29 #Javascript
理解js回收机制通俗易懂版
Feb 29 #Javascript
jquery trigger实现联动的方法
Feb 29 #Javascript
基于Javascript实现返回顶部按钮
Feb 29 #Javascript
JavaScript实现斗地主游戏的思路
Feb 29 #Javascript
You might like
php session处理的定制
2009/03/16 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php设计模式之委托模式
2016/02/13 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python连接mysql实例分享
2016/10/09 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python3解释器知识点总结
2019/02/19 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python实现图片插入文字
2019/11/26 Python
python 实现简单的FTP程序
2019/12/27 Python
Python如何读写字节数据
2020/08/05 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
Ajax的优点和缺点
2014/11/21 面试题
九年级数学教学反思
2014/02/02 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
政工师工作总结2015
2015/05/26 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
一些让Python代码简洁的实用技巧总结
2021/08/23 Python