从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)
关于dojo的下载,请查看:
https://dojotoolkit.org/download/
建议下载FULL SOURCE版
如果需要讨论,请评论、或者站内信,我会尽快回复。
(1)加载
①首先,先设置
<script>
//替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调用dojo.js之前,他们功能相同
//这比通过一大堆设置来说,更易阅读
var dojoConfig = {
async: true,
//这个代码注册了demo包的正确位置,于是我们可以调用dojo从CDN,并且同时还能加载本地模块
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/,'') +'/demo'
}]
};
</script>
②要加载dojo.js文件:
<script src="dojo/dojo.js"></script>
③最后,另开一个script,加载自己需要的插件,加载方式为使用:
require ( [插件],回调函数);
插件的值用单引号包括,用逗号分隔不同插件,都放在方括号里;
回调函数可以直接输入函数function(参数),参数填写插件名,如果多个插件,用逗号分隔。
如例:
<script>
require([ //这行表示要加载东西了,用哪个加载哪个||这些直接映射到文件名,如果你下载的Dojo源分布 ,并期待在dojo目录,你会看到dom.js和dom-construct.js文件,这些文件定义这些模块。
'dojo/dom', //加载dojo文件夹下的dom插件(应该)
'dojo/fx', //加载fx插件,这个插件包括一个滑动动画(slideTo),还有其他
'dojo/domReady!' //这个插件大概作用是,保证加载完毕后才执行,以免执行一个没加载好的。
], //这行已经加载结束了
function (dom,fx) { //这是一个回调函数(即加载完才执行的),参数有dom和fx(这个应该指的是插件)
var greeting = dom.byId('greeting');//得到id为greeting的元素,赋值给greeting这个变量
greeting.innerHTML += ' from Dojo!';//这个元素加入文本(+=)
//动画部分,
fx.slideTo({
node: greeting, //不懂
top: 100,
left: 500,
}).play();
} //这行是函数完
); //到这部分是require完
</script>
关于插件的加载:
回调函数中的顺序,是按照插件的顺序填写的。否则就很可能会插件加载出错!!而且这个bug莫名其妙!!!!!!!
(2)移动动画
//动画部分,
fx.slideTo({
node: greeting, //不懂
top: 100,
left: 500,
}).play();
第一个参数是移动后的情况。但node:greeting指对id为greeting的元素进行操纵
这是一个动画部分,他是回调函数内容的一部分,但显然,单独拿出来也是可以用的。
如:
<script>
require([ //这行表示要加载东西了,用哪个加载哪个||这些直接映射到文件名,如果你下载的Dojo源分布 ,并期待在dojo目录,你会看到dom.js和dom-construct.js文件,这些文件定义这些模块。
'dojo/dom', //加载dojo文件夹下的dom插件(应该)
'dojo/fx', //加载fx插件,这个插件包括一个滑动动画(slideTo),还有其他
'dojo/domReady!' //这个插件大概作用是,保证加载完毕后才执行,以免执行一个没加载好的。
], //这行已经加载结束了
function (dom,fx) { //这是一个回调函数(即加载完才执行的),参数有dom和fx(这个应该指的是插件)
ST(dom,fx);} //调用ST函数,ST函数在下面定义
); //到这部分是require完
</script>
<script>
function ST(dom,fx){
var greeting = dom.byId("greeting");//得到id为greeting的元素,赋值给greeting这个变量
greeting.innerHTML += " from Dojo!";//这个元素加入文本(+=)
//动画部分,
fx.slideTo({
node: greeting, //不懂
top: 100,
left: 500,
}).play();
} //这行是ST函数完
</script>
(3)变宽变窄动画
原型:(但需要在之前使用animateProperty=dom.byId("animateproperty");
baseFx.animateProperty({
node: dom.byId("anim8target"),
properties: { borderWidth: 100 }
}).play();
});
效果是获得id为anim8target的东西为目标(node应该是操作目标的意思),
然后properties是把他变成什么样子(borderWidth应该是外边框),
.play() 应该是动画的意思。
代码:
<script>
require([ //第一个参数,加载插件
"dojo/_base/fx",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
],
function(baseFx,on,dom) { //第二个参数,回调函数
var startButton1=dom.byId("startButton"),//得到id为startButton的元素
reverseButton1=dom.byId("reverseButton"),//得到reverseButton的元素
animateProperty=dom.byId("animateproperty");//得到animaterproperty的元素(应该是动画函数吧?),实测证明,这行如果被删除(并且上一行改成冒号),依然可以被运行 //这行如果前面的变量名被修改(下面不被修改),依然可以正常运行(不明白为什么)
on(startButton1,"click",function(){//on应该是当...的时候,比如放这里,应该是某元素(上面赋值的变量)当被按下的时候,调用函数后面的,但evt参数不知道有什么用(不加也没影响效果)
baseFx.animateProperty({ //这行应该是说baseFx插件的animateProperty函数(动画函数),然后{}内应该是变化后的状态,其中node指操纵的对象,properties指变成什么样子
node:anim8target, //这里的是操纵对象
properties:{borderWidth:100} //properties操纵的是css属性
}).play(); //操纵速度不在play
});
on(reverseButton1,"click",function(){
baseFx.animateProperty({
node:anim8target,
properties:{borderWidth:1}
}).play();
});
});
</script>
注:
①borderWidth是外边框;如果是width则是宽度,height是高度(不会导致内部字体变形)
②操纵的目标是:
<button id="startButton">变大</button>
<button id="reverseButton">变小</button>
<div id="anim8target" class="box" style="border-style:outset">
<div class="innerBox">A box</div>
</div>
③修饰这个目标有css属性(不然外形会是默认外形,很大),可以认为是初始属性
<style type="text/css"> /*设置盒子的样式*/
.innerBox {
margin: 5%;
padding: 5px;
background-color: white;
}
.box {
position: absolute;
height: 200px; /*这里必须加px*/
width: 200px; /*这两个是外框的高和宽*/
background-color: #ddd;
border: 1px #eee;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: rgb(238, 238, 238);
border-right-color: rgb(238, 238, 238);
border-bottom-color: rgb(238, 238, 238);
border-left-color: rgb(238, 238, 238);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image-source: none;
border-image-slice: 100% 100% 100% 100%;
border-image-width: 1 1 1 1;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
padding: 5px;
padding-top: 5px; /*这里的边距指外框到内框的,上边距*/
padding-right: 5px; /*右边距*/
padding-bottom: 5px;/*下边距*/
padding-left: 5px;/*左边距*/
}
</style>
事实上应该不用这么多
④效果是外框左上是淡灰色,右下是深灰色。
(4)设置动画的开始和结束情况:
如代码:
<script>
on(startButton1, "click", function () { //on应该是当...的时候,比如放这里,应该是某元素(上面赋值的变量)当被按下的时候,调用函数后面的,但evt参数不知道有什么用(不加也没影响效果)
baseFx.animateProperty({ //这行应该是说baseFx插件的animateProperty函数(动画函数),然后{}内应该是变化后的状态,其中node指操纵的对象,properties指变成什么样子
node: anim8target, //这里的是操纵对象
properties: {
height: { end: 400, start: 100 }, //高度变化,初始是100(不受之前情况影响),结束是400
width: { end: 400, start: 100 }
}
//width:{end:400,start:100}//properties操纵的是css属性
}).play(); //感觉play应该能操纵速率,但不知道怎么用
});
</script>
注:
①这个还可以用该对颜色进行变化。
(5)透明度与动画速度
如代码:
on(startButton1, "click", function () { //on应该是当...的时候,比如放这里,应该是某元素(上面赋值的变量)当被按下的时候,调用函数后面的,但evt参数不知道有什么用(不加也没影响效果)
baseFx.animateProperty({ //这行应该是说baseFx插件的animateProperty函数(动画函数),然后{}内应该是变化后的状态,其中node指操纵的对象,properties指变成什么样子
node: anim8target, //这里的是操纵对象
properties: {
height: { end: 400, start: 100 }, //高度变化,初始是100(不受之前情况影响),结束是400
width: { end: 400, start: 100 },
opacity: { start: 1, end: 0.3 } //opacity是透明度,最大1(不透明),最小0(透明)
},
duration: 3000 //这个是动画速度
}).play(); //感觉play应该能操纵速率,但不知道怎么用
});
透明度是opacity,
速度(变化所用时间)是properties函数的第二个参数(第一个参数是设置动画变换后的属性)
(6)动画过程的更多种形式
简单来说,除了点到点的动画之外,还有更多的可能。
而这些更多的可能,其位于插件dojo/fx/easing之中
插件需要:
dojo/fx/easing
dojo/_base/fx
例如模拟球体掉落,需要使用插件dojo/fx/easing,类型为(在animateProperty的第一个参数中放置):easing: easing.bounceOut ,
如:
<script>
require(["dojo/_base/fx",
"dojo/dom",
"dojo/fx/easing", //这个插件用于加载更多的动画过程
"dojo/window", //一个新的插件,应该是跟窗口相关的
"dojo/on",
"dojo/domReady!"], function (baseFx, dom, easing, win, on) { //5个参数(5个插件)
var startButton = dom.byId("startButton"),//开始按钮
reverseButton = dom.byId("reverseButton"),//另一个按钮
anim8target = dom.byId("anim8target");//操作对象
// 设置一对按钮用于处理事件
on(startButton, "click", function (evt) { //开始按钮在点击后触发
// 得到我们窗口的尺寸
var viewport = win.getBox(win.doc);//变量被用于存储窗口的信息
baseFx.animateProperty({
easing: easing.bounceOut, //动画,向下加速,会触底4次后停止(类似球体从空中掉落的动画形式)
duration: 3500,
node: anim8target,
properties: {
// calculate the 'floor'计算地板
// 然后减去东西的高度
top: { start: 0, end: viewport.h - anim8target.offsetHeight } //top(距离上面的距离为0,
//结束时,距离上面的距离是窗口高度(viewport.h)减去当前块的高度( .offsetHeight)
}
}).play();
});
on(reverseButton, "click", function (evt) {
baseFx.animateProperty({
node: anim8target,
easing: easing.bounceOut,
properties: { top: 0 }, //飞到最高
duration: 2000
}).play();
});
});
</script>
效果是:
①按钮1:摔下去,弹3次,第4次碰到地面(通过top设定)时停止。
②按钮2:飞上去,弹3才,第4次碰到时停止;
注:
①也可以斜着移动然后弹(弹往来的方向)
②也可以对字体大小(fontSize)之类的有效(例如从小变大,会反弹几下再变成指定大小)
③对颜色有效:backgroundColor:{start:"#0F0",end:"#F0F"}
④对透明度有效opacity
⑤注意:需要使用baseFx.animateProperty({
easing:easing.bounceOut,
node:目标,
其他修饰(比如要抵达的状态),
})
使用插件baseFx和插件easing
(7)关于各种图像的各种:
如图
offsetWidth的父为body
圖解offsetLeft、offsetTop、offsetWidth和offsetHeight
http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight
基本来说,最里面是text(文本区);
文本区有底纹,称为填充区(padding);
填充区外面有边框(border),边框比填充区大;
边框是元素的最外围了(应该),再外围是body标签范围。
(8)如何在style里设置初始的top、left等
办法是,例如:style=”position:absolute;left:100px”
即,必须先有:position:absolute或者是fixed或者是其他(但我不知道这有什么用)
后面的设置才是有用的,否则是无用的。
(9)读取当前的属性
需要插件:dojo/dom-style,
函数需要传递参数:domStyle
使用命令:No_one_top = parseInt(domStyle.get(No_one, "top"));
①第一个No_one_top表示存储这个值的变量;
②parseInt() 函数应该是要将值转换为数字;
③domStyle.get(No_one,”top”)这个函数,表示读取No_one这个的top属性;
关于第一个参数的解释:
①假如有:No_one1 = dom.byId("No_one"); //对象1在之前
②No_one为id,加不加引号都能读取这个id(无论有没有①的存在);
③不加引号,可以变更为No_one1(有①的情况下),但加了引号的情况下,则不能读取;
④疑问:假如有两个ID,分别为No_one和No_two;
然后,变量No_two= dom.byId("No_one"); No_one= dom.byId("No_two")
那么调用No_one作为domStyle.get的第一个参数时,调用的是ID为No_one还是No_two的?
(10)将两个动画合在一起
需要插件:dojo/fx
如代码:
var mm=fx.chain([动画1,动画2]);
①里面需要明确是调用哪个参数(对哪个单位进行操作);
②可以直接把动画函数写里面;
③mm为自定义变量名,调用时,使用mm.play()即可。
(11)设置初始颜色
需要插件:dojo/dom-style
格式:
domStyle.set(目标对象,修改的属性,目标值);
如:
domStyle.set(container, "backgroundColor", "#eee");
效果是:设置id为container,将其背景颜色(backgroundColor)设置为颜色(#eee)
(12)在动画开始之前
需要使用插件:dojo/aspect;
①假设有动画mm是正常执行的,假设有动画nn是预计要执行的。
②动画调用之前,使用aspect.before(mm, “beforeBegin”, nn);
③效果是,在mm动画调用前,将执行nn动画/函数,此时,相当于mm和nn一起执行(只不过其执行所需的时间可能不同);
④但并非先执行完nn,才会执行mm
(13)在动画结束之后
需要插件:dojo/on
格式为:
on(对象, “End”, 回调函数);
例如:
on(anim, "End", function(n1, n2){
var mm =
baseFx.animateProperty({
easing:easing.bounceOut,
duration:7000,
properties:{
backgroundColor:{start:"#FFF",end:"#000"},
},
node:container,
}); //mm定义完
mm.play();
}); // {是回调函数完,)是on完
(14)分拆动画和执行动作
分拆前:
baseFx.animateProperty({
easing:easing.bounceOut,
duration:7000,
properties:{
backgroundColor:{start:"#FFF",end:"#000"},
},
node:container,
}).play();
分拆后:
var mm =
baseFx.animateProperty({
easing:easing.bounceOut,
duration:7000,
properties:{
backgroundColor:{start:"#FFF",end:"#000"},
},
node:container,
}); //mm定义完
mm.play();
精简后;
baseFx.animateProperty({
执行的动作,比如达到的状态等
}).play();
在分拆后得到:
var mm = baseFx.animateProperty({
执行的动作,比如达到的状态等
});
mm.play();
即可。
理论上,对其他的也可行。实际上,也是可行的。
(15)常见错误:
①在baseFx.animateProperty({})函数的“}”结束处加分号;
②在properties:()的后面没有加逗号;
③在properties:()内部的属性,例如top:100后面加了px(正常是不能加的);
④样式表名在不同地方不一样。例如:
背景颜色在css里是background-color,但在dojo里面是backgroundColor
⑤查看有没有多一个括号,少一个逗号、分号之类的错误
(16)dojo/dom插件
①首先需要加载插件:dojo/dom
②其次需要在回调函数中使用:dom作为参数
③功能有:var mm=dom.byId(“某id”)
其效果类似document.getElementById(“某id”)
将其赋值给mm(自定义变量名),于是mm就可以替代这一长串的文字了。
功能有(假如声明了上面的):
①mm.innnerHTML,效果相当于document.getElementById(“某id”).innerHTML
替换文字
如函数:
function settext(node,text)//效果是给第一个参数的位置,用第二个参数的文字替代
{
node = dom.byId(node);
node.innerHTML = text;
}
settext(no1,"aaaaaa");
在id为no1的地方,将文字更改为text
(17)添加新标签
①使用插件:dojo/dom-construct 《————之前这里写错了
②参数:domConstruct
③格式为:
domConsrtuct.create (“标签名”, 样式,父标签);
如:
box = dom.byId("box");
no2 = dom.byId("no2");
domConstruct.create("div", //domConstruct.create开头,第一个div为标签
{ //第二个参数规定插入的各种东西
innerHTML:"six" //插入的文本内容
,box); //第三个参数为插入在哪个父标签下
domConstruct.create("div",
{
innerHTML:"seven",
className:"seven", //规定了插入的类型为seven,也可以是现有类型
style:{fontWeight:"bold"} //规定了style,这里字体宽度为bold
},box);
domConstruct.create("div",
{
innerHTML:"Three and a half",
className:"smallerbox2",
style:{backgroundColor:"#fff"}
},no1,"after"); //在no1标签之后,最好用after,不太明白这个机制,特别是使用了偏移后的坐标时。
(18)常用功能(dojo用,与其他的语法可能不一样):
功能 |
格式 |
字体宽度 |
fontWeight |
字体大小 |
fontSize |
背景颜色 |
backgroundColor |
类名 |
className |
(19)移动标签
标红,搞定grid后回来补充
(20)发送请求
插件:dojo/request
参数:request
语法:
request.get (“链接”, { handleAs: “json” }).then ( 回调函数);
从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)相关推荐
- 从零开始学_JavaScript_系列(14)——dojo(7)(饼图,BorderContainer,hashchange,弹窗)...
5/5更新.BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图 比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式 ...
- 从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)...
关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复. (1)加载 ①首先 ...
- 从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)...
jQuery语法 (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, production jQuer ...
- 从零开始学_JavaScript_系列(21)——dojo(8)(手把手教你封装一个widget)
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的. 首先,什么是widget? 简单来说,就是一个 ...
- 从零开始学_JavaScript_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)...
(74)dojo的表单模块 插件:dojo/dom-form 参数:domForm 解释: 当我们需要像服务器提交很多内容时(比如很多个input输入框,还有一些单选按钮.多选按钮),我们必须将这些输 ...
- 从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载, ...
- 从零开始学_JavaScript_系列(16)——CSSlt;3gt;(文本、对齐、圆角、盒模型、背景)...
注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说. 关于CSS属性的兼容性检测的网站:http://caniuse.com/ 部分图片来自网 ...
- 从零开始学_JavaScript_系列(24)——查看对象属性,合并数组
(35)查看对象是否有某个属性(转) 来源: http://www.cnblogs.com/snandy/archive/2011/03/04/1970162.html 内容: 两种方式,但稍有区别 ...
- 从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)...
结论请看最后的图片 关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 ...
最新文章
- 初识java类的接口实现
- 为什么博图中放置按下按钮无反应_如何更好的设计按钮
- python计算文件md5值_用python 正确计算大文件md5 值
- 3.6 判断两个链表是否相交
- Unity扩展编辑器二
- 【Android 高性能音频】AAudio 音频流 数据回调细节 ( 数据回调函数优先级 | 数据回调函数 | 采样率 | 采样数 | 缓冲区调整 | 线程不安全 )
- 别再用 httpClient了,快试试这款优雅的 HTTP 客户端工具!
- Java字符串String相关2
- 利用数组创建二叉树并赋值
- 无法从套接字中获取更多数据_数据科学中应引起更多关注的一个组成部分
- 详解:设计模式之-代理设计
- 提升Python程序性能的7个习惯
- mysql join联接_MySQL_join连接
- 2019美赛D题,元胞自动机模拟游客疏散过程
- netbean连接mysql数据库_Netbean 中jsp连接oracle数据库JDBC实例
- 应广单片机长按开关机_单键实现单片机开关机
- Windows2016 L2TP配置(证书模式)
- endnote设置文献第二行悬挂缩进办法
- Python 修改微信(支付宝)运动步数,轻松 TOP1
- h5页面如何预览excel文件_kintone excel预览插件