软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> 从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签) -> 正文阅读

[Web前端]从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)


dojo学习
 
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指对idgreeting的元素进行操纵
 
这是一个动画部分,他是回调函数内容的一部分,但显然,单独拿出来也是可以用的。
如:
    <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();
});
 
效果是获得idanim8target的东西为目标(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)关于各种图像的各种:
如图
 
 [img]http://img.blog.csdn.net/20160331174109000
 
offsetWidth的父为body

圖解offsetLeftoffsetTopoffsetWidthoffsetHeight


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里设置初始的topleft
办法是,例如: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_oneid,加不加引号都能读取这个id(无论有没有①的存在);
③不加引号,可以变更为No_one1(有①的情况下),但加了引号的情况下,则不能读取;
④疑问:假如有两个ID,分别为No_oneNo_two
然后,变量No_two= dom.byId("No_one"); No_one= dom.byId("No_two")
那么调用No_one作为domStyle.get的第一个参数时,调用的是IDNo_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");
 
效果是:设置idcontainer,将其背景颜色(backgroundColor)设置为颜色(#eee
 
 
 
 
 
 
12)在动画开始之前
需要使用插件:dojo/aspect
①假设有动画mm是正常执行的,假设有动画nn是预计要执行的。
②动画调用之前,使用aspect.before(mm, “beforeBegin”, nn);
③效果是,在mm动画调用前,将执行nn动画/函数,此时,相当于mmnn一起执行(只不过其执行所需的时间可能不同);
④但并非先执行完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
⑤查看有没有多一个括号,少一个逗号、分号之类的错误
 
 
 
16dojo/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");
idno1的地方,将文字更改为text
 
 
17)添加新标签
①使用插件:dom/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 ( 回调函数 );
 
 
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-25 20:43:08
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --