一个js的动画,以前以为只有flash可以实现
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可以实现相关推荐
- anime.js 实战:实现一个带有描边动画效果的复选框...
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- 用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 ...
- 用three.js做一个新闻联播开头动画(一)
一个好习惯,先给结论 最终效果如下: 在线体验地址:点我预览 代码地址:点我github 本文首发于:https://blog.gis1024.com/three_news_op_1.html 这里才 ...
- flash一个按钮控制动画_flutter闪屏过渡动画,闪光占位动画
在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望. 在 ...
- js运动动画的八个知识点
今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval( ...
- html flash 动画效果代码大全,flash动作代码大全
flash动画代码中的flash动作代码大全 一.几种Action命令 1.影片的播放与停止: Play( )://播放命令 stop( )://停止命令 2.改变Frame流向命令 gotoAndP ...
- jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码 完成一个完全自己设计的导航栏 ...
- DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)...
一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...
- vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
最新文章
- delphi7aes加密解密与java互转_惊呆了!不改一行Java代码竟然就能轻松解决敏感信息加解密|原创
- Swift 字典转数组
- javaserver_什么是JavaServer Faces(JSF)–(第2部分)
- SEM竞价员怎么分析竞争对手,需要分析哪些?
- 信念很简单,把书念下去,然后走出去,不枉活一世 —转自动化所一篇博士论文致谢...
- centos yum 安装
- 宝德银河麒麟系统打印机安装及共享方法(一)
- 习题 3.10 有一函数:写一程序,输入x,输出y值。
- PCB负片(PCB Negative)
- 刘宇凡:关于圈子的只言片语
- 前端----let关键字、const关键字
- 2023北京叶黄素展/北京视力矫正设备展/北京眼睛医学康复展
- 南方航空java面试_面试经验 南航面试经历分享
- Oracle全局搜索
- 10 大黑客专用的 Linux 操作系统
- vscode设置C++代码格式化(Clang-Format)
- getElementsByTagName用法详解
- 360手机:360N5 Twrp、Root、Magisk教程
- FastReport安装方法精要
- 使用Angular cli(ng generate)创建组件、服务、类、路由、指令、管道
热门文章
- 【分享】Web前端开发第三方插件大全
- 给linux用户加入sudo权限
- 理解js中的原型链,prototype与__proto__的关系
- 如何向虚拟机服务器里传文件,怎么往虚拟机复制文件_如何向虚拟机传文件-win7之家...
- 修改oracle用户资源限制,RHEL5中安装Oracle11gR2修改用户SHELL限制、环境配置、内核参数...
- 查看某个端口的进程 lsof -i:端口号
- Navicat远程连接linux下mysql服务器1045错误解决办法在这儿
- 电脑:电脑弹窗广告三个解决方法,欢迎收藏!
- 计算机网络安全基础知识笔记
- 电脑键盘中英文按键有哪些?有什么作用?