javascript 實(shí)現(xiàn)滾動(dòng)效果代碼整理
代碼如下:
水平滾動(dòng):
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滾動(dòng)字幕內(nèi)容</marquee>
垂直滾動(dòng):
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滾動(dòng)字內(nèi)容</marquee>
2.平穩(wěn)不間斷滾動(dòng)
<SCRIPT LANGUAGE="JavaScript">
var tm=null
function newsScroll() {
var scrollimg=document.getElementById("scroll")
if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2))
scrollimg.parentNode.scrollTop++;
else
scrollimg.parentNode.scrollTop=0
}
window.onload=function() {
tm=setInterval('newsScroll()',25)
}
function stop()
{
clearInterval(tm)
}
function start()
{
tm=setInterval('newsScroll()',25)
}
</SCRIPT>
/* stop() start() 不能和調(diào)用ID在同一個(gè)容器內(nèi), 如容器沒(méi)默認(rèn)高度 要制定高度*/
3 有停留滾動(dòng)
代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
4:一個(gè)簡(jiǎn)單的滾動(dòng)代碼學(xué)習(xí)制作示例
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
Js代碼說(shuō)明:
JavaScript代碼:
var s,sn=0,timer,slen,timer2;
//初始化設(shè)置
function scrollInit(){
s=getid("s1"); //獲取需要滾動(dòng)內(nèi)容的對(duì)象
s.scrollTop=0; //初始化滾動(dòng)位置
slen=s.innerHTML.split("|"); //獲取滾動(dòng)內(nèi)容,并存入數(shù)組,以便顯示調(diào)用
s.innerHTML=""; //清空滾動(dòng)對(duì)象內(nèi)容
for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");} //格式化輸出滾動(dòng)內(nèi)容
s.innerHTML+=slen[0];
timer2=setInterval(scrollstart,3000); //開(kāi)始滾動(dòng)
s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //鼠標(biāo)經(jīng)過(guò),停止?jié)L動(dòng),改變樣式
s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //鼠標(biāo)移開(kāi),恢復(fù)滾動(dòng)
}
//開(kāi)啟滾動(dòng)效果
function scrollstart(){
if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滾動(dòng)內(nèi)容到底時(shí),重置內(nèi)容位置
timer=setInterval(scrollexec,30); //執(zhí)行滾動(dòng)動(dòng)畫(huà)效果
}
//滾動(dòng)動(dòng)畫(huà)效果
function scrollexec(){
if(sn<20){
sn++;
s.scrollTop++;
}else{
sn=0;
clearInterval(timer);
}
}
//通過(guò)ID獲取對(duì)象
function getid(id){return document.getElementById(id);}
//網(wǎng)頁(yè)加載后,執(zhí)行初始化
window.onload=scrollInit;
原理解析:
1、首先給容器設(shè)定高度或?qū)挾?,比如div,設(shè)置div高20px;overflow:hidden;
2、容器高度設(shè)定后,內(nèi)容的高度超出20px,超過(guò)部分溢出,被隱藏,scrollTop屬性可用,這一點(diǎn)可以用overflow:scroll來(lái)看效果;
3、改變?nèi)萜鞯膕crollTop(上下滾動(dòng))或scrollLeft(左右滾動(dòng))屬性的值,讓內(nèi)容移動(dòng)位置(滾動(dòng)的原理);
4、到滾動(dòng)的高度scrollTop大于或等于內(nèi)容的高度時(shí),設(shè)置scrollTop=0,讓內(nèi)容返回原來(lái)的位置,重新開(kāi)始滾動(dòng),無(wú)間斷循環(huán)滾動(dòng)效果就出現(xiàn)了。
- javascript四個(gè)方向無(wú)間隙滾動(dòng)合集(多瀏覽器IE,firefox兼容)
- javascript用DIV模擬彈出窗口_窗體滾動(dòng)跟隨
- Javascript模擬scroll滾動(dòng)效果腳本
- 不通過(guò)JavaScript實(shí)現(xiàn)的自動(dòng)滾動(dòng)視差效果
- javascript 一段左右兩邊隨屏滾動(dòng)的代碼
- javascript 單行文字向上跑馬燈滾動(dòng)顯示
- 圖片與JavaScript配合做出個(gè)性滾動(dòng)條
- javascript 模擬Marquee文字向左均勻滾動(dòng)代碼
- javascript 獲取頁(yè)面的高度及滾動(dòng)條的位置的代碼
- javascript上下左右定時(shí)滾動(dòng)插件
- JavaScript實(shí)現(xiàn)頁(yè)面滾動(dòng)圖片加載(仿lazyload效果)
- Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
- javascript 另一種圖片滾動(dòng)切換效果思路
- 實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容水平或垂直滾動(dòng)的Javascript代碼
- javascript jscroll模擬html元素滾動(dòng)條
- javascript改變position值實(shí)現(xiàn)菜單滾動(dòng)至頂部后固定
- javascript實(shí)現(xiàn)文字圖片上下滾動(dòng)的具體實(shí)例
- 基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放
相關(guān)文章
javascript一些不錯(cuò)的函數(shù)腳本代碼
收集一些不多見(jiàn)的好用的自定義函數(shù)代碼 計(jì)算字符長(zhǎng)度的js函數(shù) 去字符中前后的空格的js函數(shù) 圖片自適應(yīng)大小函數(shù)代碼2008-09-09JavaScript模塊化開(kāi)發(fā)流程分步講解
這篇文章主要介紹了JavaScript模塊化開(kāi)發(fā)流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
這篇文章主要介紹了原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果,需要的朋友可以參考下2017-06-06JS實(shí)現(xiàn)表格數(shù)據(jù)各種搜索功能的方法
這篇文章主要介紹了JS實(shí)現(xiàn)表格數(shù)據(jù)各種搜索功能的方法,可實(shí)現(xiàn)忽略大小寫(xiě),模糊搜索,多關(guān)鍵搜索等功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03js實(shí)現(xiàn)瀑布流的一種簡(jiǎn)單方法實(shí)例分享
現(xiàn)在說(shuō)瀑布流式布局似乎有點(diǎn)晚了,但是每一項(xiàng)技術(shù)都是向著“精”和“簡(jiǎn)”的方向在不斷發(fā)展,在發(fā)展到極致之前,需要一個(gè)相當(dāng)漫長(zhǎng)的過(guò)程,因此,從這個(gè)角度來(lái)說(shuō),當(dāng)瀑布流被應(yīng)用得越來(lái)越多的時(shí)候,反而更應(yīng)該討論它,討論如何將它改善2013-11-11JS時(shí)間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時(shí)間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼
這篇文章主要介紹了JS時(shí)間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時(shí)間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05JavaScript如何一次性展示幾萬(wàn)條數(shù)據(jù)
本文主要介紹了JavaScript一次性展示幾萬(wàn)條數(shù)據(jù)的實(shí)現(xiàn)方法。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-03-03echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖
近期在使用echart開(kāi)發(fā)過(guò)程中遇到一些問(wèn)題,需要開(kāi)發(fā)橫向柱狀圖,下面這篇文章主要給大家介紹了關(guān)于echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖的相關(guān)資料,需要的朋友可以參考下2021-12-12