基于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 图片上传按比例预览插件集合
May 28 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
微信小程序实现上传图片功能
May 28 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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/08/15 PHP
深入解析php中的foreach问题
2013/06/30 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python实现像awk一样分割字符串
2020/09/15 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
优秀乡村医生先进事迹材料
2014/08/23 职场文书
工作证明格式及范本
2014/09/12 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
六一活动主持词
2015/06/30 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Python基础之变量的相关知识总结
2021/06/23 Python