朱艷萍
摘要:該文就主要針對(duì)前端開發(fā)中見(jiàn)得最多用得最普遍的無(wú)縫焦點(diǎn)輪播頁(yè)面效果,使用圖示法還原其執(zhí)行原理,用原生Javascript語(yǔ)言結(jié)合css3樣式與HTML結(jié)構(gòu)進(jìn)行實(shí)現(xiàn),向讀者揭示了絢麗多彩的前端特效的冰山一角。
關(guān)鍵詞:添加圖片法;定位法;DOM-CSS;relative;static
中圖分類號(hào):TP311 文獻(xiàn)標(biāo)識(shí)碼:A 文章編號(hào):1009-3044(2018)03-0187-02
當(dāng)前的世界是互聯(lián)網(wǎng)的世界,當(dāng)前的時(shí)代是互聯(lián)網(wǎng)+的時(shí)代,互聯(lián)網(wǎng)的發(fā)展用日新月異,突飛猛進(jìn)形容一點(diǎn)不為過(guò),各種新技術(shù),新標(biāo)準(zhǔn)層出不窮,各大互聯(lián)網(wǎng)公司越來(lái)越重視web產(chǎn)品的前端重構(gòu)與開發(fā),頁(yè)面交互也越來(lái)越豐富,視覺(jué)效果是越來(lái)越絢麗,整個(gè)前端開發(fā)發(fā)展勢(shì)頭迅猛。本文就以前端開發(fā)中見(jiàn)得最多用得最普遍的無(wú)縫焦點(diǎn)輪播頁(yè)面效果為例,使用圖示法還原其執(zhí)行原理,用原生Javascript語(yǔ)言結(jié)合css3樣式與HTML結(jié)構(gòu)進(jìn)行實(shí)現(xiàn),揭開前端開發(fā)奧妙冰山一角。
1 無(wú)縫輪播概念
所謂無(wú)縫焦點(diǎn)輪播主要是指圖片從左到右或從上到下運(yùn)動(dòng)時(shí),從一端切換到另一端時(shí)的切換是無(wú)間斷的連續(xù)播放。
2 原理解析
我們常看到的無(wú)縫輪播的實(shí)現(xiàn)方法主要由兩種,1)添加圖片法,2)定位法,下面文章分別針對(duì)這兩種方法從不同的角度進(jìn)行剖析。
1) 添加圖片法
所謂添加圖片法就是在原來(lái)圖片的最開頭添加上原來(lái)的最后一張圖片,將原來(lái)第一張圖片再添加一份到最后面,我們以左右運(yùn)動(dòng)為例進(jìn)行剖析,分別代表原來(lái)第一第二第三第四第五張圖片,容納所有圖片的矩形的大矩形稱之為“盒子”,其中最高的那個(gè)固定位置的矩形表示可視區(qū),添加圖片后,布局上的變化用示意為:
描述:圖1中狀態(tài)1表示目前運(yùn)動(dòng)到第5張圖片顯示的狀態(tài),狀態(tài)2表示在該方法中,讓整個(gè)“盒子”正常往左運(yùn)動(dòng),顯示出添加的圖片1,在這個(gè)運(yùn)動(dòng)剛剛完成后顯示為狀態(tài)2時(shí),通過(guò)DOM-CSS技術(shù)修改整個(gè)“盒子”的left屬性值到狀態(tài)3,是的,在這個(gè)方法中從狀態(tài)2到狀態(tài)3的過(guò)程便是整個(gè)無(wú)縫切換的核心與本質(zhì)。同樣的道理,我們用圖示剖析一下從左往右如何無(wú)縫切換,如圖2所示:狀態(tài)1到狀態(tài)2“盒子”都正常運(yùn)動(dòng),在運(yùn)動(dòng)到狀態(tài)2后,立刻通過(guò)DOM-CSS改變“盒子”的left屬性值為狀態(tài)3,不知不覺(jué)間實(shí)現(xiàn)無(wú)縫的切換。無(wú)論是圖1還是圖2,我們看到在從狀態(tài)2到狀態(tài)3的變化過(guò)程都是通過(guò)DOM-CSS來(lái)完成的,因?yàn)榭梢晠^(qū)是沒(méi)有變化的,如圖1中狀態(tài)2到狀態(tài)3時(shí)可視區(qū)一直都是顯示第1張圖片,圖2中一直都是顯示第5張圖片,用戶的眼睛根本不會(huì)察覺(jué)到兩個(gè)狀態(tài)切換的瞬間,所謂無(wú)間斷就這樣實(shí)現(xiàn)了。
2) 定位法
所謂定位法顧名思義就是通過(guò)改變定位的方式實(shí)現(xiàn)無(wú)間斷。在該方法中,不用改變布局,不用改變CSS,主要是在實(shí)現(xiàn)過(guò)程中通過(guò)DOM-CSS技術(shù),結(jié)合對(duì)定位方式relative的理解來(lái)實(shí)現(xiàn),本文仍然結(jié)合圖片來(lái)揭示該方法原理,如圖3所示:在“盒子”運(yùn)動(dòng)到狀態(tài)1時(shí),利用DOM-CSS將第一張圖片的定位方式改為relative,同時(shí)修改第一張圖片的left屬性值,如狀態(tài)2的所示,然后“盒子”正常運(yùn)動(dòng)到狀態(tài)3,此時(shí)顯示區(qū)顯示的是第一張圖片,在這個(gè)狀態(tài)剛到達(dá)的同時(shí),還是通過(guò)DOM-CSS將第一張圖片的定位方式還原為默認(rèn)static方式,此時(shí)就顯示為狀態(tài)4。
與此同時(shí),修改“盒子”的left屬性值,如圖3中狀態(tài)5所示,我們發(fā)現(xiàn)在從狀態(tài)3到狀態(tài)5的過(guò)程中,顯示區(qū)一直顯示的是第一張圖片,其中的狀態(tài)4中的顯示區(qū)為空白是通過(guò)DOM-CSS操作的,用戶的肉眼根本無(wú)法發(fā)現(xiàn),“他”的眼里一直只有第一張圖片,從而巧妙實(shí)現(xiàn)“無(wú)間斷”。從左到右的無(wú)間斷切換圖示如圖4所示,關(guān)鍵變化技巧仍然在狀態(tài)2到狀態(tài)5的過(guò)程中,其一是要明白relative定位的本質(zhì),relative定位的對(duì)象仍然在文檔流中的,其二,抓住時(shí)機(jī)修改端頭的圖片的定位方式和left屬性值以及盒子的left屬性值。
3 JavaScript+CSS+HTML實(shí)現(xiàn)
針對(duì)以上兩種無(wú)間斷切換的剖析,下面用Javascript進(jìn)行實(shí)現(xiàn)。
1) 添加圖片法實(shí)現(xiàn):
添加的圖片分別體現(xiàn)在添加了底紋的LI語(yǔ)句
[HTML布局 ]