基于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 相关文章推荐
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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 微信开发获取用户信息如何实现
2016/12/13 PHP
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
卫生系统先进事迹
2014/05/13 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
经理任命书模板
2014/06/06 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
《称赞》教学反思
2016/02/17 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang