html控制台源码,可以在浏览器控制台中执行源码字符动画的js插件
Dom Animator是一款非常神奇的可以在浏览器控制台中执行源码动画的js插件。当你写了一段HTML源码拿去发布的时候,是否想别人在控制台上查看你的源码时让人感觉与众不同?该js插件可以帮助你将指定的ASCII字符组成的多幅图案制作为动画,在控制台中显示。
dom-animator.js是单独的js文件,没有任何jQuery等外部依赖。不需要写CSS样式和HTML标签,它会将生成的动画显示在源码顶部的注释里面。
使用方法
dom-animator.js动画可以非常简单,也可以非常复杂。取决于你想制作什么动画效果。首先你需要创建一个新的domAnimator对象实例(前提是你已经引入了dom-animator.js文件),然后可以通过addFrame()方法来创建字符动画。下面是一个非常简单的动画-眨眼动画效果。
var domAnimator = new DomAnimator();
domAnimator.addFrame('o_o');
domAnimator.addFrame('-_o');
domAnimator.animate();
上面的眨眼的字符动画效果会显示在同一行中。如果你想字符显示为多行,可以在addFrame方法中传入一系列的字符串,通过逗号隔开。
var domAnimator = new DomAnimator();
domAnimator.addFrame(['0_0', ' | ', ' | ']);
domAnimator.addFrame(['0_-', ' | ', ' | ']);
domAnimator.animate();
你也可以为所有的动画帧设置一个速度。默认的动画速度是500毫秒(这个速度是ASCII字符动画速度,而不是60fps)。
var domAnimator = new DomAnimator();
domAnimator.addFrame('o_o');
domAnimator.addFrame('-_o');
domAnimator.animate(1000); //ms
如果你想停止动画,可以调用stop方法。
// Setup
var domAnimator = new DomAnimator();
domAnimator.addFrame('o_o');
domAnimator.addFrame('-_o');
domAnimator.animate();
// After 10 seconds.
setTimeout(function() {
domAnimator.stop(); // Stop the animation
}, 10000);
浏览器支持
这个控制台源码字符动画插件已经在最新版本的Safari、Chrome 和 Firefox浏览器中进行了测试。在Chrome中动画效果最好,因为Chrome浏览器在控制台中支持新行。
html控制台源码,可以在浏览器控制台中执行源码字符动画的js插件相关推荐
- 可在控制台中执行字符动画的js插件
Dom Animator是一款非常神奇的可以在浏览器控制台中执行源码动画的js插件.当你写了一段HTML源码拿去发布的时候,是否想别人在控制台上查看你的源码时让人感觉与众不同?该js插件可以帮助你将指 ...
- [系统安全] 六.逆向分析之条件语句和循环语句源码还原及流程控制
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
- [安全攻防进阶篇] 四.逆向分析之条件语句和循环语句源码还原及流程控制逆向
从2019年7月开始,我来到了一个陌生的专业--网络空间安全.初入安全领域,是非常痛苦和难受的,要学的东西太多.涉及面太广,但好在自己通过分享100篇"网络安全自学"系列文章,艰难 ...
- 视频直播APP源码,通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果 一. 实现思路 需要设置一个变量控制展开 / 收起效果 提前写好最高高度的class样式,超出这个高度多余内容会隐藏 只有在列表数据长度 ...
- 步进电机驱动器PCB原理图及其stm32源码S型曲线控制代码本
步进电机驱动器PCB原理图及其stm32源码S型曲线控制代码本人电机工作积累的驱动器资料以及控制步进电机运动代码,驱动器pcb,国外stm32s型加速,SpTAid=609065654398&
- java调用clang编译的so_写Java这么久,JDK源码编译过没?编译JDK源码踩坑纪实
好奇害死羊 很多小伙伴们做Java开发,天天写Java代码,肯定离不开Java基础环境:JDK,毕竟我们写好的Java代码也是跑在JVM虚拟机上. 一般来说,我们学Java之前,第一步就是安装JDK环 ...
- delphi查看源码版本_[Mybatis]-IDEA导入Mybatis源码
该系列文章针对 Mybatis 3.5.1 版本 一.下载 Mybatis 源码 step1.下载 Mybatis-3.5.1 源码 Mybatis 源码仓库地址 下载版本信息如下: 下载后进行解压, ...
- 面试官系统精讲Java源码及大厂真题 - 05 ArrayList 源码解析和设计思路
05 ArrayList 源码解析和设计思路 耐心和恒心总会得到报酬的. --爱因斯坦 引导语 ArrayList 我们几乎每天都会使用到,但真正面试的时候,发现还是有不少人对源码细节说不清楚,给面试 ...
- 网游源码完整服务端_【每日源码】微人事是一个前后端分离的人力资源管理系统,项目采用SpringBoot+Vue开发。...
整体效果 首先,不同的用户在登录成功之后,根据不同的角色,会看到不同的系统菜单,完整菜单如下: 不同用户登录上来之后,可能看到的会有差异,如下: 每个用户的角色是由系统管理员进行分配的,系统管理员给用 ...
最新文章
- ffmpeg把ts文件转m3u8并切片
- 他们和机器人啪啪啪,并计划共度一生
- 网络视频贴片广告全面推行第三方监测
- phpcms函数:用*号替换(私密信息)中间数据(如手机号、邮箱)
- 如何在java输入_怎么在java中编写输入语句?
- 【动态规划】XMU 1028 Game Boy Advance
- php旧物交易开源代码_php二手市场交易系统毕业设计(含源文件)
- html5集成远程控制,HP MicroServer Gen8 ILO4官方固件2.70安装及中文设置,远程控制台新增支持html5...
- 王佩丰 Excel 24节课 学习笔记
- windows设置hosts
- n个人有c个魔法帽几天去掉所有的帽子
- 微信公众号(订阅号)如何开通付费功能?
- 基础架构:一条sql语句是如何执行的?
- 奥运五环的绘制-进阶
- 视频图像处理技术优势安防视频监控应用
- jaybird+x3+android,小米首款运动耳机
- OpenFOAM 量纲检查开启和关闭
- css----层叠样式表详细知识点大全
- java拉兹猜想的编程_Java数据结构及算法实例:考拉兹猜想 Collatz Conjecture
- 如何在WORD/WPS中自由移动插入的图片?