0x1setTimeout运用
完成效果:4-01setTimeout运用
又见导航条,先看下css,这里用的是雪碧图背景做出圆角的效果,虽然是典范的要领、兼容性好,但这类代码写起来着实是有点貌寝。因为须要三层嵌套,离别用背景图绘制左圆角、右圆角和中心背景,致使dom组织变庞杂了、更进一步影响js的代码简约。
而关于ui的动效,用的恰是这一系列题目里经常涌现的“hover父元素激活子元素”的要领来完成,因而自然又得用mouseover
和mouseout
这对兄弟了。然则我照样被这题坑了不少时候,因为有两个两点症结的题目想了良久才处置惩罚好:
首先得邃晓这题和前面题目标差别,前面那些题目着实都能够用css的hover
伪类来完成,但这题不可,因为子选单和导航条的主体间是有间隙的,在鼠标从导航条到子选单的路上,子选单就会消逝,基础抵达不了。。。要处置惩罚这个bug,就须要题目提到的setTimeout
上台了,脱离选单时,我们能够让它耽误消逝、给用户的鼠标抵达子选单或重回导航条的时候;等再回到导航条或子选单就取消掉这个延时即可。
紧接着第二个大坑涌现了,在前面的总结里也提到怎样用好mouseover
和mouseout
,因为这两个事宜会冒泡,同时因为他们只在跨界时触发,而且一旦元素占地太小就会被浏览器疏忽;为防备冒上来的事宜乱成一团、或许该触发的没触发,就应当做到削减元素嵌套,直接把事宜监听绑定在详细元素上。
但是题目是,这个法则在导航条的主体是可行的、然则子选单因为前面提到的三层嵌套组织圆角,已没法削减嵌套了,同时还得斟酌到子选单也是嵌套在导航条里的啊。。。如许一来某些元素撤除子元素的局限、占地就很小了,会涌现前面提到的该触发却没触发的题目。详细在这题里的表现,就是当你的鼠标脱离子选单时,因为子选单被子元素挤占得只剩一点处所了(详细能够按f12看一下),基础不能靠它触发mouseout
了,若要处置惩罚这个题目,就不得不吸收里体面元素冒泡才会发生mouseout
事宜,有了事宜才举行元素显隐的掌握嘛。
但这又致使前面提到的另一个题目:举例来说,鼠标脱离子选单时,只需鼠标一扫冒泡上来的mouseout
、mouseover
事宜就一大堆,而这时候只要鼠标脱离子选单谁人mouseout
才是应当见效的。既然我们不能阻挠和挑选子元素上的mouseout
事宜,那看来只要让它和mouseover
的效果相抵消了,因为只要在导航条里才会触发这对事宜,脱离导航条后就没有mouseover
来和mouseout
抵消了。同理,反过来进入子选单时自然就用mouseout
来抵消mouseover
到达挑选的目标。
因而就可以总结出第二个坑的处置惩罚要领了:
首先要应用子元素的冒泡,这时候就不能运用事宜代办了(事宜代办函数自身就有挑选事宜泉源的功用,没法猎取子元素冒泡上来的事宜),只能退而求其次,用一个轮回来绑定事宜吧。
经由历程
mouseout
和响应的mouseover
事宜举行抵消,到达变相挑选出事宜的效果。但要注重,平常用这类抵消都邑引发闪灼的,所以抵消并非个通用的处置惩罚要领,只是因为恰好因为这题运用了延时和消除延时,显隐的效果不会马上展现,自然就防备了子选单闪个不断的效果涌现。
剩下的代码里还要处置惩罚几个小题目:如处置惩罚运用了延时带来的子选单切换卡顿、遵照盈余可占宽度决定子选单该往左照样往右定位、同时让箭头自动保持在中心等等;比拟上面两个坑都算简朴的啦。
写到这里才把解题思绪捋清了,可见这看似简朴的几行js要写出来得有多蛋疼,这里真得吐槽下这个ui的题目:把子选单搞成细细的横向便条着实还好,采纳hover作挑选原本也ok,但这时候你还特地让子选单和导航条主体间有间隙,致使完成起来比较难以外,用户也很轻易误操纵啊,那么点处所放那么多mouseout
和响应的mouseover
事宜的触发点,手一抖、鼠标一滑很轻易就选到别的处所去啊!!
0x2自动播放一幻灯片效果
完成效果:4-02自动播放一幻灯片效果
此次是做一个轮播图,差别于那种滑动的轮播效果,这里用的是只是将图片叠在一同然后转变通明度罢了(我还别的在展现的图片上加了个z-index
,防备拖一下图片就现形)。挑选控件上,用的仍然是这一系列题目脍炙人口的“hover一个元素激活其他元素”,只不过这题因dom组织简朴,完成起来可比上一题简朴多了。
重要逻辑做起来也就两个方面,经由历程监听控件来增删类名以转变款式、再加上自动定时播放就可以够,这里我把播放和住手都封装在一个单例里了(注重是定义在IIFE里),组织更清楚一点,也削减了全局变量。
但另有一个题目,那就是淡入效果的完成,思绪自然是定时修正通明度,但是因为一开始给图片直接增加类名已让它的通明度为1,致使图片展现时是不通明–>通明–>不通明的历程,效果很不自然,因而痛快就直接把修正类名展现图片的代码去了,直接用淡入展现,效果更好同时又精简了代码。
末了再提示下本身,用RegExp
组织正则时,万万别忘记\
的转义!
0x3自动转变方向一幻灯片效果
完成效果:4-03自动转变方向一幻灯片效果
在上面一题多加个方向推断函数罢了,同时这里我把和轮播有关的东西全都封装进了autoSlider
这个单例里去了,全局变量如今就只剩这个单例,接口也能够写得简约到只要一个初始化挪用,真是清新啊~
0x4agruments运用一求出函数参数的总和
简朴体验arguments
罢了,直接贴代码:
function sum() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
console.log(sum(1, 3, 5, 7));
0x5css函数一设置/读取对象的属性
完成效果:4-05css函数一设置、读取对象的属性
简朴的款式猎取和修正,虽然增删类名体式格局就可以够轻松完成,但着实这题要的不只是效果,而是要模仿jquery的css
函数。因为设定上,该函数的参数应当有三种状况:
接收一个css属性名读取值
吸收一个对象(hash表)批量设置css属性
传入键、值两个参数直接设置某个css属性
所以要按参数个数和参数的范例离别举行操纵,范例推断最好运用Object.prototype.toString
,如许不会涌现运用typeof
时含糊其词的效果。假如碰到不正当的参数数量和范例,就直接用throw
抛出毛病。
至于款式的猎取,运用了规范的window.getComputedStyle
要领,这个要领的兼容性着实也够用了(IE8+),所以完整能够不必老旧的currentStyle
。
而在设置款式属性时,要邃晓.
和[]
操纵符的差别,运用点操纵标记的属性名必需首先是正当的变量名,而且不能是动态的援用(着实就是字符串了,只是引号能够省略罢了);中括号操纵符就不存在这类题目,所以elelment.sytle['background-color']
这类用法也能跑。
0x6当前输入框高亮显现
完成效果:4-06当前输入框高亮显现
继承事宜模仿css伪类的行动,此次终究不是老冤家hover
了,改成了文本框focus
,很自然就想到老套路:事宜代办+增删类名。但要注重核心事宜也有一对冒泡和不冒泡的事宜存在,个中因为火狐不支撑冒泡的focusin
和focusout
,只支撑不冒泡的focus
和blur
,除非只斟酌挪动端,不然依靠冒泡的事宜代办是不能用在处置惩罚核心事宜上滴。所以这里只好用一个轮回来完成对一切元素的监听了。
至于修正的款式,着实就相当于自定义文本框背景和outline
款式了,原题是用了背景图来做,但这完整能够用css模仿嘛。但是因为这里输入框是圆角的,除了火狐外并没有浏览器完成outline
的圆角,所以不能直接修正outline
款式了,只能假借边框来完成该效果。同时还得记得把浏览器默许outline
关掉,不然效果可就大打折扣。
0x7数组演习:种种数组要领的运用
完成效果:4-07数组演习:种种数组要领的运用
简朴的数组演习,就不根据原题那样分几个数组了,这里直接在一个数组上操纵,再搭配一个简朴的处置惩罚流程:先用一个事宜代办来监听和分发按钮的点击事宜,处置惩罚完再输出到dom即可。
详细的数组操纵是比较简朴的,不过要注重concat
和slice
这两个要领异乎寻常,它们不是直接在挪用数组上操纵,而是别的天生新数组举行操纵,返回的也是新数组。应用这一点能够完成数组的深拷贝,但如果想作用到原数组就得别的赋值了。
0x8事宜演习:封装兼容性增加、删除事宜的函数
虽然做这系列的题本不想斟酌老旧浏览器,但兼容事宜毕竟是个典范题目,权当回忆下js高等顺序设计里的内容了。采纳的的也是书里的兼容要领,能用DOM2级别addEventListener
和removeEventListener
就用,再者就是兼容IE8
以下的attachEvent
和detachEvent
(有this指向window
、反向实行的坑),这两者都能绑定多个事宜处置惩罚顺序;末了着实不可再用只能绑定一个处置惩罚顺序、但兼容性最好的DOM0级。
0x9星级评分体系
完成效果:4-09星级评分体系
星星只是运用背景图来转变亮灭罢了,所以只需在容器上挂上对星星的click
、mouseover
、mouseout
三个事宜代办,剩下的就是一些DOM和数据操纵了。
—第四课完—