【Dojo 1.x】笔记4 文字动画效果

时间:2022-09-22 10:16:22

这个笔记,仅仅演示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 文字动画效果

【Dojo 1.x】笔记4 文字动画效果的更多相关文章

  1. 仿知乎&sol;途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  2. jquery使用CSS3实现文字动画效果插件Textillate&period;js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  3. 仿flash的文字动画效果

    .tips{ font-size: 24px; font-family: sans-serif; font-weight: 600; text-shadow: 1px 1px #ffb700; col ...

  4. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  5. iOS 开源一个高度可定制支持各种动画效果&comma;支持单击双击&comma;小红点,支持自定义不规则按钮的tabbar

    TYTabbarAnimationDemo 业务需求导致需要做一个tabbar,里面的按钮点击带有动画效果,tabbar中间的按钮凸出,凸出部分可以点击,支持badge 小红点等,为此封装了一个高度可 ...

  6. 最简单实用的JQuery实现banner图中的text打字动画效果!!!

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  7. JS框架&lowbar;&lpar;Typed&period;js&rpar;彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  8. iOS开发笔记7:Text、UI交互细节、两个动画效果等

    Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中 ...

  9. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

随机推荐

  1. ABAP代码编辑器设置--界线

    ABAP编辑器每行允许的最大字符数: Utilities->Settings打开选项卡: 勾选:Downward-Compat.line Length(72) 设置后看到的效果: 设置步骤:

  2. 四、解决MyEclipse控制台输出中文乱码的问题

    问题描述:       在Java程序中,在MyEclipse开发环境下,通过标准输入输入中文,并把输入的中文信息从标准输出显示出来,这时中文出现乱码情况.解决方法:解决方法需要两个步骤(本文测试环境 ...

  3. POJ3107Godfather&lbrack;树形DP 树的重心&rsqb;

    Godfather Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6121   Accepted: 2164 Descrip ...

  4. while循环问题(老师询问问题,学生回答。学生会了可以放学,或者老师讲了10遍,还是没有会的,*无奈也要放学。)

    string a=""; ;//声明一个变量,老师重新讲课的次数. && a != "yes") { Console.WriteLine(&qu ...

  5. DSp寄存器&OpenCurlyDoubleQuote;是怎么和板子上的”具体地址&OpenCurlyDoubleQuote;一一对应起来的

    转自:http://hzcjustfly.blog.163.com/blog/static/18319712920117191123928/ 最近在学习DSP,今天在开发板TMS320F2808学习例 ...

  6. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

  7. jquery mobile selectmenu下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. Android 自定义View &lpar;四&rpar; 视频音量调控

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24529807 今天没事逛eoe,看见有人求助要做一个下面的效果,我看下面一哥们说 ...

  9. linux 下安装 oracle

    http://yourcouner.blog.51cto.com/59520/91156 一.RedHat AS4系统安装: 磁盘配置: 设备 类型 大小 / ext3 39911 swap 1024 ...

  10. BZOJ1367 &lbrack;Baltic2004&rsqb;sequence 堆 左偏树

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1367 题意概括 Description Input Output 一个整数R 题解 http:// ...