基于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 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Angular2之二级路由详解
Aug 31 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
全面了解python字符串和字典
2016/07/07 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Python:slice与indices的用法
2019/11/25 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
电大自我鉴定范文
2013/10/01 职场文书
护理实习自我鉴定
2013/12/14 职场文书
培训班主持词
2014/03/28 职场文书
英语求职信范文
2014/05/23 职场文书
撤诉状格式范本
2015/05/19 职场文书
晚会开幕词范文
2016/03/04 职场文书