从事室内设计专业,应该读什么书?

从事室内设计专业,应该读什么书?,第1张

室内设计的书比较多,大体上你要补充这么几点: 1。空间设计方面,包括通风、采光、存储、通道、绿化等方面的知识,以及对人体工程学的理解。 2。色彩方面 3。工艺方面的知识,室内常用的吊顶、木制品、玻璃制品、石材、地面材料等的制作以及安装的知识。 4。造价方面,这个可能你要去市场了 5。3DMAX、LS、CAD、VR、PS等设计软件工具书很好找,这个也要学习。 大体上就是这些东西,设计方面的,山东工艺美术学院老师编写的一本教科书忘记什么名字了,里面讲的理论东西挺实用,可以找来看看。电脑方面的随便吧,太多了。祝你好运! >通过HTML的文件API ,Firefox、Chrome等浏览器已经支持从 *** 作系统直接拖拽文件,并上传到服务器。
相对于使用了十多年的HTML表单,这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中,但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便,而需要大量上传文件的CMS(内容管理系统)也将会从中受益。
让我们看一下Firefox 是如何使用拖拽上传功能的:
首先提供一个区域来放置文件
Html代码
1
<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div>
然后监听拖拽过程中的dragenter、dragleave、drop等事件
Js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
documentaddEventListener("dragenter", function(e){
dropboxstyleborderColor = 'gray';
}, false);
documentaddEventListener("dragleave", function(e){
dropboxstyleborderColor = 'silver';
}, false);
dropboxaddEventListener("dragenter", function(e){
dropboxstyleborderColor = 'gray';
dropboxstylebackgroundColor = 'white';
}, false);
dropboxaddEventListener("dragleave", function(e){
dropboxstylebackgroundColor = 'transparent';
}, false);
dropboxaddEventListener("dragenter", function(e){
estopPropagation();
epreventDefault();
}, false);
dropboxaddEventListener("dragover", function(e){
estopPropagation();
epreventDefault();
}, false);
dropboxaddEventListener("drop", function(e){
estopPropagation();
epreventDefault();

handleFiles(edataTransferfiles);

submitdisabled = false;
}, false);
其中最主要的是drop事件中用handleFiles()依次处理所有文件
1
2
3
4
5
6
handleFiles = function(files) {
for (var i = 0; i < fileslength; i++) {
var file = files[i];

}
}
对于类型的文件可以直接读取内容,显示预览图
1
2
3
4
5
6
7
8
9
10
11
12
if (!filetypematch(/image/)) {
continue;
}

var img = documentcreateElement("img");
imgclassListadd("obj");
imgfile = file;
previewappendChild(img);

var reader = new FileReader();
readeronload = (function(aImg) { return function(e) { aImgsrc = etargetresult; }; })(img);
readerreadAsDataURL(file);
接下来就是核心功能:ajax上传。首先新建一个XHR请求
1
2
var xhr = new XML>几种遍历方法中for执行最快,它没有任何额外的函数调用栈和上下文。但在实际开发中我们要结合语义话、可读性和程序性能,去选择究竟使用哪种方案。下面来看for , foreach , map , forin , forof五种方法现场battle。
for
我是最早出现的一方遍历语句,在座的各位需称我一声爷爷。我能满足开发人员的绝大多数的需求。
// 遍历数组
let arr = [1,2,3];
for(let i = 0;i < arrlength;i++){
consolelog(i) // 索引,数组下标
consolelog(arr[i]) // 数组下标所对应的元素
}
// 遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i = 0, keys=Objectkeys(profile); i < keyslength;i++){
consolelog(keys[i]) // 对象的键值
consolelog(profile[keys[i]]) // 对象的键对应的值
}
// 遍历字符串
let str = "abcdef";
for(let i = 0;i < strlength ;i++){
consolelog(i) // 索引 字符串的下标
consolelog(str[i]) // 字符串下标所对应的元素
}
// 遍历DOM 节点
let articleParagraphs = documentquerySelectorAll('article > p');
for(let i = 0;i<articleParagraphslength;i++){
articleParagraphs[i]classListadd("paragraph");
// 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。
}
forEach
我是ES5版本发布的。按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。我是 for 循环的加强版。
// 遍历数组
let arr = [1,2,3];
arrforEach(i => consolelog(i))
// logs 1
// logs 2
// logs 3
// 直接输出了数组的元素
//遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
let keys = Objectkeys(profile);
keysforEach(i => {
consolelog(i) // 对象的键值
consolelog(profile[i]) // 对象的键对应的值
})
map
我也是ES5版本发布的,我可以创建一个新数组,新数组的结果是原数组中的每个元素都调用一次提供的函数后的返回值。
let arr = [1,2,3,4,5];
let res = arrmap(i => i i);
consolelog(res) // logs [1, 4, 9, 16, 25]
forin枚举
我是ES5版本发布的。以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
// 遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i in profile){
let item = profile[i];
consolelog(item) // 对象的键值
consolelog(i) // 对象的键对应的值
// 遍历数组
let arr = ['a','b','c'];
for(let i in arr){
let item = arr[i];
consolelog(item) // 数组下标所对应的元素
consolelog(i) // 索引,数组下标
// 遍历字符串
let str = "abcd"
for(let i in str){
let item = str[i];
consolelog(item) // 字符串下标所对应的元素
consolelog(i) // 索引 字符串的下标
}
forof迭代
我是ES6版本发布的。在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
// 迭代数组数组
let arr = ['a','b','c'];
for(let item of arr){
consolelog(item)
}
// logs 'a'
// logs 'b'
// logs 'c'
// 迭代字符串
let str = "abc";
for (let value of str) {
consolelog(value);
}
// logs 'a'
// logs 'b'
// logs 'c'
// 迭代map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]
for (let entry of iterable) {
consolelog(entry);
}
// logs ["a", 1]
// logs ["b", 2]
// logs ["c", 3]
// 迭代map获取键值
for (let [key, value] of iterable) {
consolelog(key)
consolelog(value);
}
// 迭代set
let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
for (let value of iterable) {
consolelog(value);
}
// logs 1
// logs 2
// logs 3
// logs 4
// 迭代 DOM 节点
let articleParagraphs = documentquerySelectorAll('article > p');
for (let paragraph of articleParagraphs) {
paragraphclassListadd("paragraph");
// 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。
}
// 迭代arguments类数组对象
(function() {
for (let argument of arguments) {
consolelog(argument);
}
})(1, 2, 3);
// logs:
// 1
// 2
// 3
// 迭代类型数组
let typeArr = new Uint8Array([0x00, 0xff]);
for (let value of typeArr) {
consolelog(value);
}
// logs:
// 0
// 255
经过第一轮的自我介绍和技能展示后,我们了解到:
for语句是最原始的循环语句。定义一个变量i(数字类型,表示数组的下标),按照一定的条件,对i进行循环累加。条件通常为循环对象的长度,当超过长度就停止循环。因为对象无法判断长度,所以搭配Objectkeys()使用。
forEach ES5 提出。自称是for语句的加强版,可以发现它比for语句在写法上简单了很多。但是本质上也是数组的循环。forEach每个数组元素执行一次 callback 函数。也就是调用它的数组,因此,不会改变原数组。返回值是undefine。
map ES5 提出。给原数组中的每个元素都按顺序调用一次 callback 函数。生成一个新数组,不修改调用它的原数组本身。返回值是新的数组。
forin ES5 提出。遍历对象上的可枚举属性,包括原型对象上的属性,且按任意顺序进行遍历,也就是顺序不固定。遍历数组时把数组的下标当作键值,此时的i是个字符串型的。它是为遍历对象属性而构建的,不建议与数组一起使用。
forof ES6 提出。只遍历可迭代对象的数据。
能力甄别
作为一个程序员,仅仅认识他们是远远不够的,在实际开发中鉴别他们各自的优缺点。因地制宜的使用他们,扬长避短。从而提高程序的整体性能才是能力之所在。
关于跳出循环体
在循环中满足一定条件就跳出循环体,或者跳过不符合条件的数据继续循环其它数据。是经常会遇到的需求。常用的语句是break 与 continue。
简单的说一下二者的区别,就当复习好了。
break语句是跳出当前循环,并执行当前循环之后的语句;
continue语句是终止当前循环,并继续执行下一次循环;
注意:forEach 与map 是不支持跳出循环体的,其它三种方法均支持。
原理 :查看forEach实现原理,就会理解这个问题。
ArrayprototypeforEach(callbackfn [,thisArg]{

}
传入的function是这里的回调函数。在回调函数里面使用break肯定是非法的,因为break只能用于跳出循环,回调函数不是循环体。
在回调函数中使用return,只是将结果返回到上级函数,也就是这个for循环中,并没有结束for循环,所以return也是无效的。
map() 同理。
map()链式调用
map() 方法是可以链式调用的,这意味着它可以方便的结合其它方法一起使用。例如:reduce(), sort(), filter() 等。但是其它方法并不能做到这一点。forEach()的返回值是undefined,所以无法链式调用。
// 将元素乘以本身,再进行求和。
let arr = [1, 2, 3, 4, 5];
let res1 = arrmap(item => item item)reduce((total, value) => total + value);
consolelog(res1) // logs 55 undefined"
forin会遍历出原型对象上的属性
ObjectprototypeobjCustom = function() {};
ArrayprototypearrCustom = function() {};
var arr = ['a', 'b', 'c'];
arrfoo = 'hello
for (var i in arr) {
consolelog(i);
}
// logs
// 0
// 1
// 2
// foo
// arrCustom
// objCustom
然而在实际的开发中,我们并不需要原型对象上的属性。这种情况下我们可以使用hasOwnProperty() 方法,它会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。如下:
ObjectprototypeobjCustom = function() {};
ArrayprototypearrCustom = function() {};
var arr = ['a', 'b', 'c'];
arrfoo = 'hello
for (var i in arr) {
if (arrhasOwnProperty(i)) {
consolelog(i);
}
}
// logs
// 0
// 1
// 2
// foo
// 可见数组本身的属性还是无法摆脱。此时建议使用 forEach
对于纯对象的遍历,选择forin枚举更方便;对于数组遍历,如果不需要知道索引forof迭代更合适,因为还可以中断;如果需要知道索引,则forEach()更合适;对于其他字符串,类数组,类型数组的迭代,forof更占上风更胜一筹。但是注意低版本浏览器的是配性。
性能
有兴趣的读者可以找一组数据自行测试,文章就直接给出结果了,并做相应的解释。
for > for-of > forEach > map > for-in
for 循环当然是最简单的,因为它没有任何额外的函数调用栈和上下文;
forof只要具有Iterator接口的数据结构,都可以使用它迭代成员。它直接读取的是键值。
forEach,因为它其实比我们想象得要复杂一些,它实际上是arrayforEach(function(currentValue, index, arr), thisValue)它不是普通的 for 循环的语法糖,还有诸多参数和上下文需要在执行的时候考虑进来,这里可能拖慢性能;
map() 最慢,因为它的返回值是一个等长的全新的数组,数组创建和赋值产生的性能开销很大。
forin需要穷举对象的所有属性,包括自定义的添加的属性也能遍历到。且forin的key是String类型,有转换过程,开销比较大。
总结
在实际开发中我们要结合语义话、可读性和程序性能,去选择究竟使用哪种方案。
如果你需要将数组按照某种规则映射为另一个数组,就应该用 map。
如果你需要进行简单的遍历,用 forEach 或者 for of。
如果你需要对迭代器进行遍历,用 for of。
如果你需要过滤出符合条件的项,用 filterr。
如果你需要先按照规则映射为新数组,再根据条件过滤,那就用一个 map 加一个 filter。
总之,因地制宜,因时而变。千万不要因为过分追求性能,而忽略了语义和可读性。在您的统治之下,他们5个只能是各自发挥长处,谁都别想称霸。

Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽.
有很多理由让你的网站加入拖拽功能,最简单的一个是数据重组.例如:你有一个序列的内容让用户排序,用户需要给每个条目进行输入或者用select 选择,替代前面这个方法的就是拖拽.或许你的网站也需要一个用户可以拖动的导航窗口!那么这些效果都是很简单:因为你可以很容易的实现!
网页上实现拖拽其实也不是很复杂.第一你需要知道鼠标坐标,第二你需要知道用户鼠标点击一个网页元素并实现拖拽,最后我们要实现移动这个元素.
获取鼠标移动信息
第一我们需要获取鼠标的坐标.我们加一个用户函数到documentonmousemove就可以了:
Java代码 收藏代码
documentonmousemove = mouseMove;

function mouseMove(ev){
ev = ev || windowevent;
var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
if(evpageX || evpageY){
return {x:evpageX, y:evpageY};
}
return {
x:evclientX + documentbodyscrollLeft - documentbodyclientLeft,
y:evclientY + documentbodyscrollTop - documentbodyclientTop
};
}
你首先要声明一个evnet对象.不论何时你移动鼠标/点击/按键等等,会对应一个event的事件.在Internet Explorer里event是全局变量,会被存储在windowevent里. 在firefox中,或者其他浏览器,event事件会被相应的自定义函数获取.当我们将mouseMove函数赋值于documentonmousemove,mouseMove会获取鼠标移动事件.
(ev = ev || windowevent) 这样让ev在所有浏览器下获取了event事件,在Firefox下"||windowevent"将不起作用,因为ev已经有了赋值.在MSIE下ev是空的,所以ev将设置为windowevent
因为我们在这篇文章中需要多次获取鼠标坐标,所以我们设计了mouseCoords这个函数,它只包含了一个参数,就是the event
我们需要运行在MSIE与Firefox为首的其他浏览器下.Firefox以eventpageX和eventpageY来代表鼠标相应于文档左上角的位置.如果你有一个500500的窗口,而且你的鼠标在正中间,那么paegX和pageY将是250,当你将页面往下滚动500px,那么 pageY将是750此时pageX不变,还是250
MSIE和这个相反,MSIE将eventclientX与eventclientY来代表鼠标与ie窗口的位置,并不是文档.当我们有一个 500500的窗口,鼠标在正中间,那么clientX与clientY也是250,如果你垂直滚动窗口到任何位置,clientY仍然是250,因为相对ie窗口并没有变化.想得到正确的结果,我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性.最后,由于MSIE 并没有0,0的文档起始位置,因为通常会设置2px的边框在周围,边框的宽度包含在documentbodyclientLeft与 clientTop这两个属性中,我们再加入这些到鼠标的位置中.
很幸运,这样mouseCoords函数就完成了,我们不再为坐标的事 *** 心了.
捕捉鼠标点击
下次我们将知道鼠标何时点击与何时放开.如果我们跳过这一步,我们在做拖拽时将永远不知道鼠标移动上面时的动作,这将是恼人的与违反直觉的.
这里有两个函数帮助我们:onmousedown与onmouseup我们预先设置函数来接收documentonmousemove,这样看起来很象我们会获取documentonmousedown与documentonmouseup.但是当我们获取 documentonmousedown时,我们同时获取了任何对象的点击属性如:text,images,tables等等我们只想获取那些需要拖拽的属性,所以我们设置函数来获取我们需要移动的对象.
移动一个元素
我们知道了怎么捕捉鼠标移动与点击.剩下的就是移动元素了.首先,要确定一个明确的页面位置,css样式表要用'absolute'设置元素绝对位置意味着我们可以用样式表的top和left来定位,可以用相对位置来定位了.我们将鼠标的移动全部相对页面top-left,基于这点,我们可以进行下一步了.
当我们定义itemstyleposition='absolute',所有的 *** 作都是改变left坐标与top坐标,然后它移动了.
Java代码 收藏代码
documentonmousemove = mouseMove;
documentonmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
ev = ev || windowevent;

var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePosx - docPosx, y:mousePosy - docPosy};
}

function getPosition(e){
var left = 0;
var top = 0;

while (eoffsetParent){
left += eoffsetLeft;
top += eoffsetTop;
e = eoffsetParent;
}

left += eoffsetLeft;
top += eoffsetTop;

return {x:left, y:top};
}

function mouseMove(ev){
ev = ev || windowevent;
var mousePos = mouseCoords(ev);

if(dragObject){
dragObjectstyleposition = 'absolute';
dragObjectstyletop = mousePosy - mouseOffsety;
dragObjectstyleleft = mousePosx - mouseOffsetx;

return false;
}
}
function mouseUp(){
dragObject = null;
}

function makeDraggable(item){
if(!item) return;
itemonmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
你会注意到这个代码几乎是前面的全集,将前面的合在一起就实现了拖拽效果了.
当我们点击一个item时,我们就获取了很多变量,如鼠标位置,鼠标位置自然就包含了那个item的坐标信息了.如果我们点击了一个2020px图像的正中间,那么鼠标的相对坐标为{x:10,y:10}.当我们点击这个图像的左上角那么鼠标的相对坐标为 {x:0,y:0}当我们点击时,我们用这个方法取得一些鼠标与校对的信息.如果我们不能加载页面item,那么信息将是document信息,会忽略了点击的item信息.
mouseOffset函数使用了另一个函数getPositiongetPosition的作用是返回 item相对页面左上角的坐标,如果我们尝试获取itemoffsetLeft或者itemstyleleft,那么我们将取得item相对与父级的位置,不是整个document.所有的脚本我们都是相对整个document,这样会更好一些.
为了完成getPosition任务,必须循环取得item的父级,我们将加载内容到item的左/上的位置.我们需要管理想要的top与left列表.
自从定义了mousemove这个函数,mouseMove就会一直运行.第一我们确定item的 styleposition为absolute,第二我们移动item到前面定义好的位置.当mouse点击被释放,dragObject被设置为 null,mouseMove将不在做任何事.
Dropping an Item
前面的例子目的很简单,就是拖拽item到我们希望到的地方.我们经常还有其他目的如删除item,比如我们可以将item拖到垃圾桶里,或者其他页面定义的位置.
很不幸,我们有一个很大的难题,当我们拖拽,item会在鼠标之下,比如mouseove,mousedown,mouseup或者其他mouse action.如果我们拖拽一个item到垃圾桶上,鼠标信息还在item上,不在垃圾桶上.
怎么解决这个问题呢?有几个方法可以来解决.第一,这是以前比较推荐的,我们在移动鼠标时item会跟随鼠标,并占用了mouseover/mousemove等鼠标事件,我们不这样做,只是让item跟随着鼠标,并不占用mouseover等鼠标事件,这样会解决问题,但是这样并不好看,我们还是希望item能直接跟在mouse下.
另一个选择是不做item的拖拽.你可以改变鼠标指针来显示需要拖拽的item,然后放在鼠标释放的位置.这个解决方案,也是因为美学原因不予接受.
最后的解决方案是,我们并不去除拖拽效果.这种方法比前两种繁杂许多,我们需要定义我们需要释放目标的列表,当鼠标释放时,手工去检查释放的位置是否是在目标列表位置上,如果在,说明是释放在目标位置上了.
Java代码 收藏代码
/
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
/

var dropTargets = [];

function addDropTarget(dropTarget){
dropTargetspush(dropTarget);
}

function mouseUp(ev){
ev = ev || windowevent;
var mousePos = mouseCoords(ev);

for(var i=0; i<dropTargetslength; i++){
var curTarget = dropTargets[i];
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTargetoffsetWidth);
var targHeight = parseInt(curTargetoffsetHeight);

if(
(mousePosx > targPosx) &&

(mousePosx < (targPosx + targWidth)) &&
(mousePosy > targPosy) &&
(mousePosy < (targPosy + targHeight))){
// dragObject was dropped onto curTarget!
}
}

dragObject = null;
}
鼠标释放时会去取是否有drop属性,如果存在,同时鼠标指针还在drop的范围内,执行drop *** 作.我们检查鼠标指针位置是否在目标范围是用(mousePosx>targetPosx),而且还要符合条件(mousePosx<(targPosx + targWidth)).如果所有的条件符合,说明指针确实在范围内,可以执行drop指令了.
Pulling It All Together
最后我们拥有了所有的drag/drop的脚本片断!下一个事情是我们将创建一个DOM处理.
下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item代码在这个文章第二个demo的后面,它可以用户记录一个list(列表),定为一个导航窗口在左边或者右边,或者更多的函数你可以想到的.
下一步我们将通过"假代码"让reader看到真代码,下面为推荐:
1、当document第一次载入时,创建dragHelper DIVdragHelper将给移动的item加阴影.真实的item没有被dragged,只是用了insertBefor和appendChild来移动了,我们隐藏了dragHelper
2、有了mouseDown与mouseUp函数.所有的 *** 作会对应到当到iMouseDown的状态中,只有当mouse左键为按下时iMouseDown才为真,否则为假.
3、我们创建了全局变量DragDrops与全局函数CreateDragContainerDragDrops包含了一系列相对彼此的容器.任何参数(containers)将通过CreatedcragContainer进行重组与序列化,这样可以自由的移动.CreateDragContainer函数也将item进行绑定与设置属性.
4、现在我们的代码知道每个item的加入,当我们移动处mouseMove,mouseMove函数首先会设置变量target,鼠标移动在上面的item,如果这个item在容器中(checked with getAttribute):
运行一小段代码来改变目标的样式.创造rollover效果
检查鼠标是否没有放开,如果没有
o 设置curTarget代表当前item
o 记录item的当前位置,如果需要的话,我们可以将它返回
o 克隆当前的item到dragHelper中,我们可以移动带阴影效果的item
o item拷贝到dragHelper后,原有的item还在鼠标指针下,我们必须删除掉dragObj,这样脚本起作用,dragObj被包含在一个容器中.
o 抓取容器中所有的item当前坐标,高度/宽度,这样只需要记录一次,当item被drag时,每随mouse移动,每移钟就会记录成千上万次.
如果没有,不需要做任何事,因为这不是一个需要移动的item
5、检查curTarget,它应该包含一个被移动的item,如果存在,进行下面 *** 作:
开始移动带有阴影的item,这个item就是前文所创建的
检查每个当前容器中的container,是否鼠标已经移动到这些范围内了
o 我们检查看一下正在拖动的item是属于哪个container
o 放置item在一个container的某一个item之前,或者整个container之后
o 确认item是可见的
如果鼠标不在container中,确认item是不可见了.

您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下:

1 在 HTML 中创建门和灯笼的元素,并给这些元素添加类名。例如:

<div class="door">门</div>
<div class="lantern">灯笼</div>

2 在 CSS 中为门添加打开的样式。例如,可以使用 transform 属性来旋转门:

door {
transform: rotate(90deg);
}
3 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如,可以使用以下样式来使灯笼从上方移动到下方:

lantern {
animation: moveDown 1s ease-in-out;
}
@keyframes moveDown {
from {
top: -100px;
}
to {
top: 100px;
}
}
4 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classListadd 方法,来添加动画类名,从而触发动画的播放。

例如:

documentquerySelector('door')addEventListener('click', function() {
documentquerySelector('lantern')classListadd('lantern-animation');
});
希望这些信息能帮助到您!

*** 作无法完成,因为文件已经在classList中打开是什么意思,桌面有文件删不了,这个意思就是虽然你关闭的这个软件,但是软件依旧在后台运行,所以无法删除,可以重启机器,然后删除,无法删除可以用安全软件中的粉碎功能来彻底删除的

JavaScript就在这里随时等候你的召唤,但是也许你还没有准备好如何使用他。为什么不用jQuery呢?因为它很慢并且你的网站真的不需要这些多余的负担。
我不是来这里争辩原生API和函数库的迥异,开发的时候很难不用到这些神奇的东东。但是我想讨论的是:如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery。
假设咱不是为了简化,每个人用jSomething是因为它支持IE,动画处理和选择器函数。
原生等价物
选择元素
//
jQuery
var
els
=
$('el');
//
Native
var
els
=
documentquerySelectorAll('el');
//
Shorthand
var
$
=
function
(el)
{
return
documentquerySelectorAll(el);
}
var
els
=
$('el');
//
Or
use
regex-based
micro-selector
lib
//
>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13375771.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-24
下一篇 2023-07-24

发表评论

登录后才能评论

评论列表(0条)

保存