摘要:實(shí)現(xiàn)的無(wú)縫滾動(dòng)需要掌握基本的定位和運(yùn)動(dòng)知識(shí)逐步分析圖片的無(wú)縫滾動(dòng)是怎么實(shí)現(xiàn)的的基本結(jié)構(gòu)如下樣式要實(shí)現(xiàn)圖片窗口整體的無(wú)縫滾動(dòng)我們需要通過(guò)定時(shí)器定時(shí)改變的位置,于是我們有下面的片段來(lái)實(shí)現(xiàn)對(duì)應(yīng)定時(shí)器時(shí)間段內(nèi)移動(dòng)的距離,指開始這樣做能實(shí)現(xiàn)基本
實(shí)現(xiàn)javascript的無(wú)縫滾動(dòng)需要掌握基本的定位和運(yùn)動(dòng)知識(shí)
逐步分析圖片的無(wú)縫滾動(dòng)是怎么實(shí)現(xiàn)的
HTML的基本結(jié)構(gòu)如下
CSS樣式:
#moving { width: 600px; height: 370px; background-color: #ccc; position: relative; margin: 30px auto 0; overflow: hidden; } #moving ul { position: absolute; left: 0; top: 0; } #moving ul li { list-style: none; float: left; } #control { width:300px; margin: 20px auto; } #control input { margin-left: 30px; width: 50px; }
要實(shí)現(xiàn)圖片窗口整體的無(wú)縫滾動(dòng)(我們需要通過(guò)定時(shí)器定時(shí)改變的位置,于是我們有下面的片段來(lái)實(shí)現(xiàn):
oUl.style.left = oUl.offsetLeft + speed + "px";
speed對(duì)應(yīng)定時(shí)器時(shí)間段內(nèi)移動(dòng)的距離,oUl指ul
????開始這樣做能實(shí)現(xiàn)基本的運(yùn)動(dòng),但是圖片總是數(shù)量有限的,當(dāng)最后一張圖片滾動(dòng)展示完畢后,后面就沒有了內(nèi)容。那么我們?nèi)绾慰朔@個(gè)困難,讓滾動(dòng)一直持續(xù)循環(huán)下去呢?
????為了達(dá)到這種效果,我們可以克隆同樣的ul結(jié)構(gòu),并且拼接在一起,比如:
oUl.innerHTML += oUl.innerHTML;
注意不要漏了在ul加入overflow:hidden,否則可能會(huì)兩欄顯示
但是這樣做還是不夠的,圖片總會(huì)播放完,但是我們不可能復(fù)制成千上萬(wàn)分一樣的ul結(jié)構(gòu)
這時(shí)候需要一點(diǎn)小技巧
當(dāng)左段ul(為了闡述方便,分為兩段,左段為原始,右段為復(fù)制的那份)滾動(dòng)完成,右段的開頭即將離開圖片窗口的時(shí)候,將整個(gè)ul拉回到原始位置。如果是向右運(yùn)動(dòng),那么當(dāng)左端的開頭第一張圖片到左邊盡頭時(shí),整個(gè)ul拉回到起始位置
function move(){ if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左滾動(dòng)時(shí)滾動(dòng)完左段后馬上將它拉回來(lái) oUl.style.left = "0"; } if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth/2 + "px"; //向右滾動(dòng)時(shí)最后一段已經(jīng)到盡頭 } oUl.style.left = oUl.offsetLeft + speed + "px"; }
以下是javascript部分
window.onload = function(){ var oMove = document.getElementById("moving"); var oUl = oMove.getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); var oCtr = document.getElementById("control"); var oLeft = document.getElementById("left"); var oRight = document.getElementById("right"); var speed = null; oUl.innerHTML += oUl.innerHTML; //兩段一樣的內(nèi)容 oUl.style.width = aLi[0].offsetWidth*aLi.length + "px"; //兩段ul寬度不夠,第二段會(huì)掉下去 oLeft.onclick = function(){ return speed = -3; } oRight.onclick = function(){ return speed = 3; } function move(){ if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左滾動(dòng)時(shí)滾動(dòng)完第一段后馬上將它拉回來(lái) oUl.style.left = "0"; } if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth/2 + "px"; //向右滾動(dòng)時(shí)最后一段已經(jīng)到盡頭 } oUl.style.left = oUl.offsetLeft + speed + "px"; } var timer = setInterval(move,30); oMove.onmouseover = function(){ clearInterval(timer); }; oMove.onmouseout = function(){ timer = setInterval(move,30); }; var btn = document.getElementById("stop"); btn.onclick = function(){ clearInterval(timer); //stop按鍵停止運(yùn)動(dòng),如果在點(diǎn)擊后將鼠標(biāo)先移入圖片再移出會(huì)重新開啟 } }
以上是智能社課程學(xué)習(xí)內(nèi)容
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/91932.html
摘要:寫插件的初衷項(xiàng)目經(jīng)常需要無(wú)縫滾動(dòng)效果,當(dāng)時(shí)寫的時(shí)候用用這個(gè)老插件,相對(duì)不上很好用。后來(lái)轉(zhuǎn)向在沒有找到好的無(wú)縫滾動(dòng)插件,除了配置可以實(shí)現(xiàn)但是相對(duì)來(lái)說(shuō)太重了,于是自己造了個(gè)輪子。 寫插件的初衷 1.項(xiàng)目經(jīng)常需要無(wú)縫滾動(dòng)效果,當(dāng)時(shí)寫jq的時(shí)候用用msClass這個(gè)老插件,相對(duì)不上很好用。2.后來(lái)轉(zhuǎn)向vue在vue-awesome沒有找到好的無(wú)縫滾動(dòng)插件,除了配置swiper可以實(shí)現(xiàn)但是相對(duì)來(lái)...
摘要:因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無(wú)縫輪播的效果,所以寫了一下,在這個(gè)分享出來(lái),希望再次遇到此需求的道友,可以直接拷貝來(lái)用,節(jié)約一點(diǎn)不必要的時(shí)間。 因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無(wú)縫輪播的效果,所以寫了一下,在這個(gè)分享出來(lái),希望再次遇到此需求的道友,可以直接拷貝來(lái)用,節(jié)約一點(diǎn)不必要的時(shí)間。 原生JS版本 文字上下無(wú)縫輪播 * { margin: ...
摘要:因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無(wú)縫輪播的效果,所以寫了一下,在這個(gè)分享出來(lái),希望再次遇到此需求的道友,可以直接拷貝來(lái)用,節(jié)約一點(diǎn)不必要的時(shí)間。 因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無(wú)縫輪播的效果,所以寫了一下,在這個(gè)分享出來(lái),希望再次遇到此需求的道友,可以直接拷貝來(lái)用,節(jié)約一點(diǎn)不必要的時(shí)間。 原生JS版本 文字上下無(wú)縫輪播 * { margin: ...
摘要:因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無(wú)縫輪播的效果,所以寫了一下,在這個(gè)分享出來(lái),希望再次遇到此需求的道友,可以直接拷貝來(lái)用,節(jié)約一點(diǎn)不必要的時(shí)間。 因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無(wú)縫輪播的效果,所以寫了一下,在這個(gè)分享出來(lái),希望再次遇到此需求的道友,可以直接拷貝來(lái)用,節(jié)約一點(diǎn)不必要的時(shí)間。 原生JS版本 文字上下無(wú)縫輪播 * { margin: ...
摘要:最近學(xué)習(xí)定時(shí)器的相關(guān)知識(shí),整理定時(shí)器實(shí)現(xiàn)無(wú)縫滾動(dòng)的效果。當(dāng)滾動(dòng)超過(guò)總長(zhǎng)度的二分之一時(shí)即,將切換到向左滾動(dòng)。 最近學(xué)習(xí)定時(shí)器的相關(guān)知識(shí),整理定時(shí)器實(shí)現(xiàn)無(wú)縫滾動(dòng)的效果。 原理 用定時(shí)器實(shí)現(xiàn)ul滾動(dòng)。 當(dāng)滾動(dòng)超過(guò)ul總長(zhǎng)度的二分之一時(shí)(即oUl.offsetLeft
閱讀 3864·2021-09-23 11:51
閱讀 3057·2021-09-22 15:59
閱讀 856·2021-09-09 11:37
閱讀 2063·2021-09-08 09:45
閱讀 1260·2019-08-30 15:54
閱讀 2056·2019-08-30 15:53
閱讀 485·2019-08-29 12:12
閱讀 3283·2019-08-29 11:15