【Dojo 1.x】笔记4 文字动画效果
这个笔记,仅仅演示dojo/fx模块的slideTo()方法的简单使用。
有关该模块的用法,见API;有关Dojo的动画、效果,见页面 效果 和 动画
1. 页面组织
html部分同笔记3,js部分如下:
<script src="https://cdn.bootcss.com/dojo/1.10.4/dojo.js" data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/fx', //多了fx模块的引用
'dojo/domReady!'
], function (dom, fx) {
var greeting = dom.byId('greeting');
greeting.innerHTML += ' from Dojo!';
fx.slideTo({
node: greeting,
top: 100,
left: 200
}).play();
});
</script>
如果不想看,直接抽取关键代码:
fx.slideTo({
node: greeting,
top: 100,
left: 200
})
.play();
2. 代码解释
fx模块调用slideTo方法,传参是一个Object,Obj给三个参数,node、top和left,即对greeting这个节点进行移动100和200像素,实在太简单了,看API就行,本篇仅仅作记录用,知道fx模块有这个功能。
有关slideTo()方法见下:

【Dojo 1.x】笔记4 文字动画效果的更多相关文章
- 仿知乎/途家导航栏渐变文字动画效果-b
demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- 仿flash的文字动画效果
.tips{ font-size: 24px; font-family: sans-serif; font-weight: 600; text-shadow: 1px 1px #ffb700; col ...
- Vue过渡和动画效果展示(案例、GIF动图演示、附源码)
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- iOS 开源一个高度可定制支持各种动画效果,支持单击双击,小红点,支持自定义不规则按钮的tabbar
TYTabbarAnimationDemo 业务需求导致需要做一个tabbar,里面的按钮点击带有动画效果,tabbar中间的按钮凸出,凸出部分可以点击,支持badge 小红点等,为此封装了一个高度可 ...
- 最简单实用的JQuery实现banner图中的text打字动画效果!!!
下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...
- iOS开发笔记7:Text、UI交互细节、两个动画效果等
Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中 ...
随机推荐
- QEMU KVM Libvirt手册(8): 半虚拟化设备virtio
KVM本身并不提供半虚拟化功能,是通过virtio来实现的 The benefits of virtio drivers are of lower overhead and higher perfor ...
- SSL/TLS握手过程
----------------------------------专栏导航----------------------------------HTTPS协议详解(一):HTTPS基础知识 HTTPS ...
- [Swift]LeetCode63. 不同路径 II | Unique Paths II
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- [Swift]LeetCode982. 按位与为零的三元组 | Triples with Bitwise AND Equal To Zero
Given an array of integers A, find the number of triples of indices (i, j, k) such that: 0 <= i & ...
- FastDFS 学习笔记
一.理论基础 FastDFS比较适合以中小文件为载体的在线服务,比如跟NGINX(APACHE)配合搭建图片服务器. 分布式文件系统FastDFS FastDFS是纯C语言实现,只支持Linux. ...
- JavaScript基础之值传递和引用传递
js的值传递和引用(地址)传递 首先总述一下:js的5种基本数据类型 number,string,null,undefined,boolean 在赋值传递时是值传递,js的引用数据类型(object, ...
- Django+Bootstrap+Mysql 搭建个人博客(四)
4.1.博客分类 (1)blog_tags.py @register.simple_tag def get_categories(): return Category.objects.all() @r ...
- Ocelot中使用Butterfly实践
Ocelot(https://github.com/TomPallister/Ocelot)是一个用.net core实现的API网关,Butterfly(https://github.com/But ...
- SSL / TSL 传输加密算法 初解读
SSL(SecureSocketLayer)是netscape公司提出的主要用于web的安全通信标准,.TLS(TransportLayerSecurity)是IETF的TLS工作组在SSL3.0基础 ...
- Python:正则表达式 re 模块
正则是处理字符串最常用的方法,我们编码中到处可见正则的身影. 正则大同小异,python 中的正则跟其他语言相比略有差异: 1.替换字符串时,替换的字符串可以是一个函数 2.split 函数可以指定分 ...