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

  

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

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

 1 function all(books){
 2             for(var i=0;i<self.rows;i++) {
 3                 for (var j = 0; j <  self.columns; j++) {
 4                     if(!books[i][j])return false;
 5                 }
 6             }
 7             return true;
 8         }
 9         function resetBooks(books){
10             for(var i=0;i<self.rows;i++) {
11                 for (var j = 0; j <  self.columns; j++) {
12                     books[i][j]=false;
13                 }
14             }
15             return true;
16         }
17         var self=this,timer=null,_iindex= 0;
18         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];
19         var weight=[1,1,1,1,6];
20         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}]];
21         timer=setInterval(function(){
22             var n=[];
23             for(var i=0;i<self.preDivs.length;i++){
24                 var _div=null,x= 0,y=0;
25                 for(var j=0;j<dir.length;j++){
26                     x=self.preDivs[i].x+dir[j][0];
27                     y=self.preDivs[i].y+dir[j][1];
28                     if(x>=0&&y>=0&&x<self.columns&&y<self.rows&&!self.books[y][x]){
29                         self.books[y][x]=true;
30                         _div=self.zzDivStatck[y][x];
31                         n.push({x:x,y:y});
32                         _div.style.backgroundImage = "url(" + self.zzImages[_iindex] + ")";
33                         _div.style.backgroundPositionX = (-x * self.zzDivW) + "px ";
34                         _div.style.backgroundPositionY = (-y * self.zzDivH) + "px";
35                     }
36                 }
37
38             }
39
40             self.preDivs=n;
41             if(all(self.books)){
42                 resetBooks(self.books);
43                 var _r=util.randomWeight(weight);
44                     self.preDivs = initpos[_r];
45                     dir=initdir[_r];
46                     _iindex++;
47             }
48             if(_iindex>=+self.zzImages.length){
49                 _iindex=0;
50             }
51
52         },100);

View Code

  源码附上:http://files.cnblogs.com/files/csbt/DDZ.zip

转载于:https://www.cnblogs.com/csbt/p/byc.html

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

  1. anime.js 实战:实现一个带有描边动画效果的复选框...

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  2. 用js来写一个478呼吸动画来做393的默想吧-用js来写一个478呼吸动画

    title: 用js来写一个478呼吸动画来做393的默想吧 date: 2023-02-12 09:37:34.01 updated: 2023-02-23 17:38:15.804 url: ht ...

  3. 用three.js做一个新闻联播开头动画(一)

    一个好习惯,先给结论 最终效果如下: 在线体验地址:点我预览 代码地址:点我github 本文首发于:https://blog.gis1024.com/three_news_op_1.html 这里才 ...

  4. flash一个按钮控制动画_flutter闪屏过渡动画,闪光占位动画

    在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望. 在 ...

  5. js运动动画的八个知识点

    今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval( ...

  6. html flash 动画效果代码大全,flash动作代码大全

    flash动画代码中的flash动作代码大全 一.几种Action命令 1.影片的播放与停止: Play( )://播放命令 stop( )://停止命令 2.改变Frame流向命令 gotoAndP ...

  7. jQuery 设计和自定义一个带展开动画效果的导航栏

    设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码 完成一个完全自己设计的导航栏 ...

  8. DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)...

    一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...

  9. vue如何使用原生js写动画效果_Vue中的动画效果

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

最新文章

  1. delphi7aes加密解密与java互转_惊呆了!不改一行Java代码竟然就能轻松解决敏感信息加解密|原创
  2. Swift 字典转数组
  3. javaserver_什么是JavaServer Faces(JSF)–(第2部分)
  4. SEM竞价员怎么分析竞争对手,需要分析哪些?
  5. 信念很简单,把书念下去,然后走出去,不枉活一世 —转自动化所一篇博士论文致谢...
  6. centos yum 安装
  7. 宝德银河麒麟系统打印机安装及共享方法(一)
  8. 习题 3.10 有一函数:写一程序,输入x,输出y值。
  9. PCB负片(PCB Negative)
  10. 刘宇凡:关于圈子的只言片语
  11. 前端----let关键字、const关键字
  12. 2023北京叶黄素展/北京视力矫正设备展/北京眼睛医学康复展
  13. 南方航空java面试_面试经验 南航面试经历分享
  14. Oracle全局搜索
  15. 10 大黑客专用的 Linux 操作系统
  16. vscode设置C++代码格式化(Clang-Format)
  17. getElementsByTagName用法详解
  18. 360手机:360N5 Twrp、Root、Magisk教程
  19. FastReport安装方法精要
  20. 使用Angular cli(ng generate)创建组件、服务、类、路由、指令、管道

热门文章

  1. 【分享】Web前端开发第三方插件大全
  2. 给linux用户加入sudo权限
  3. 理解js中的原型链,prototype与__proto__的关系
  4. 如何向虚拟机服务器里传文件,怎么往虚拟机复制文件_如何向虚拟机传文件-win7之家...
  5. 修改oracle用户资源限制,RHEL5中安装Oracle11gR2修改用户SHELL限制、环境配置、内核参数...
  6. 查看某个端口的进程 lsof -i:端口号
  7. Navicat远程连接linux下mysql服务器1045错误解决办法在这儿
  8. 电脑:电脑弹窗广告三个解决方法,欢迎收藏!
  9. 计算机网络安全基础知识笔记
  10. 电脑键盘中英文按键有哪些?有什么作用?