javascript 實現(xiàn)滾動效果代碼整理
更新時間:2010年03月18日 21:09:21 作者:
javascript 實現(xiàn)滾動效果代碼整理,需要的朋友可以參考下。
1.先寫兩個最常用最簡潔的滾動代碼
代碼如下:
水平滾動:
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滾動字幕內(nèi)容</marquee>
垂直滾動:
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滾動字內(nèi)容</marquee>
2.平穩(wěn)不間斷滾動
<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在同一個容器內(nèi), 如容器沒默認高度 要制定高度*/
3 有停留滾動
代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
4:一個簡單的滾動代碼學(xué)習(xí)制作示例
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
Js代碼說明:
JavaScript代碼:
var s,sn=0,timer,slen,timer2;
//初始化設(shè)置
function scrollInit(){
s=getid("s1"); //獲取需要滾動內(nèi)容的對象
s.scrollTop=0; //初始化滾動位置
slen=s.innerHTML.split("|"); //獲取滾動內(nèi)容,并存入數(shù)組,以便顯示調(diào)用
s.innerHTML=""; //清空滾動對象內(nèi)容
for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");} //格式化輸出滾動內(nèi)容
s.innerHTML+=slen[0];
timer2=setInterval(scrollstart,3000); //開始滾動
s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //鼠標經(jīng)過,停止?jié)L動,改變樣式
s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //鼠標移開,恢復(fù)滾動
}
//開啟滾動效果
function scrollstart(){
if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滾動內(nèi)容到底時,重置內(nèi)容位置
timer=setInterval(scrollexec,30); //執(zhí)行滾動動畫效果
}
//滾動動畫效果
function scrollexec(){
if(sn<20){
sn++;
s.scrollTop++;
}else{
sn=0;
clearInterval(timer);
}
}
//通過ID獲取對象
function getid(id){return document.getElementById(id);}
//網(wǎng)頁加載后,執(zhí)行初始化
window.onload=scrollInit;
原理解析:
1、首先給容器設(shè)定高度或?qū)挾?,比如div,設(shè)置div高20px;overflow:hidden;
2、容器高度設(shè)定后,內(nèi)容的高度超出20px,超過部分溢出,被隱藏,scrollTop屬性可用,這一點可以用overflow:scroll來看效果;
3、改變?nèi)萜鞯膕crollTop(上下滾動)或scrollLeft(左右滾動)屬性的值,讓內(nèi)容移動位置(滾動的原理);
4、到滾動的高度scrollTop大于或等于內(nèi)容的高度時,設(shè)置scrollTop=0,讓內(nèi)容返回原來的位置,重新開始滾動,無間斷循環(huán)滾動效果就出現(xiàn)了。
代碼如下:
水平滾動:
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滾動字幕內(nèi)容</marquee>
垂直滾動:
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滾動字內(nèi)容</marquee>
2.平穩(wěn)不間斷滾動
復(fù)制代碼 代碼如下:
<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在同一個容器內(nèi), 如容器沒默認高度 要制定高度*/
3 有停留滾動
代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
4:一個簡單的滾動代碼學(xué)習(xí)制作示例
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
Js代碼說明:
JavaScript代碼:
復(fù)制代碼 代碼如下:
var s,sn=0,timer,slen,timer2;
//初始化設(shè)置
function scrollInit(){
s=getid("s1"); //獲取需要滾動內(nèi)容的對象
s.scrollTop=0; //初始化滾動位置
slen=s.innerHTML.split("|"); //獲取滾動內(nèi)容,并存入數(shù)組,以便顯示調(diào)用
s.innerHTML=""; //清空滾動對象內(nèi)容
for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");} //格式化輸出滾動內(nèi)容
s.innerHTML+=slen[0];
timer2=setInterval(scrollstart,3000); //開始滾動
s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //鼠標經(jīng)過,停止?jié)L動,改變樣式
s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //鼠標移開,恢復(fù)滾動
}
//開啟滾動效果
function scrollstart(){
if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滾動內(nèi)容到底時,重置內(nèi)容位置
timer=setInterval(scrollexec,30); //執(zhí)行滾動動畫效果
}
//滾動動畫效果
function scrollexec(){
if(sn<20){
sn++;
s.scrollTop++;
}else{
sn=0;
clearInterval(timer);
}
}
//通過ID獲取對象
function getid(id){return document.getElementById(id);}
//網(wǎng)頁加載后,執(zhí)行初始化
window.onload=scrollInit;
原理解析:
1、首先給容器設(shè)定高度或?qū)挾?,比如div,設(shè)置div高20px;overflow:hidden;
2、容器高度設(shè)定后,內(nèi)容的高度超出20px,超過部分溢出,被隱藏,scrollTop屬性可用,這一點可以用overflow:scroll來看效果;
3、改變?nèi)萜鞯膕crollTop(上下滾動)或scrollLeft(左右滾動)屬性的值,讓內(nèi)容移動位置(滾動的原理);
4、到滾動的高度scrollTop大于或等于內(nèi)容的高度時,設(shè)置scrollTop=0,讓內(nèi)容返回原來的位置,重新開始滾動,無間斷循環(huán)滾動效果就出現(xiàn)了。
您可能感興趣的文章:
- javascript四個方向無間隙滾動合集(多瀏覽器IE,firefox兼容)
- javascript用DIV模擬彈出窗口_窗體滾動跟隨
- Javascript模擬scroll滾動效果腳本
- 不通過JavaScript實現(xiàn)的自動滾動視差效果
- javascript 一段左右兩邊隨屏滾動的代碼
- javascript 單行文字向上跑馬燈滾動顯示
- 圖片與JavaScript配合做出個性滾動條
- javascript 模擬Marquee文字向左均勻滾動代碼
- javascript 獲取頁面的高度及滾動條的位置的代碼
- javascript上下左右定時滾動插件
- JavaScript實現(xiàn)頁面滾動圖片加載(仿lazyload效果)
- Javascript實現(xiàn)DIV滾動自動滾動到底部的代碼
- javascript 另一種圖片滾動切換效果思路
- 實現(xiàn)網(wǎng)頁內(nèi)容水平或垂直滾動的Javascript代碼
- javascript jscroll模擬html元素滾動條
- javascript改變position值實現(xiàn)菜單滾動至頂部后固定
- javascript實現(xiàn)文字圖片上下滾動的具體實例
- 基于JavaScript怎么實現(xiàn)讓歌詞滾動播放
相關(guān)文章
javascript setAttribute, getAttribute 在不同瀏覽器上的不同表現(xiàn)
該方法把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性,該方法將創(chuàng)建一個新屬性。2010-08-08
javascript實現(xiàn)的使用方向鍵控制光標在table單元格中切換
最近公司開發(fā)ERP項目,要求商品入庫選擇貨架號時支持使用方向鍵快速選擇,以提高入庫效率。2010-11-11
JavaScript常用截取字符串的三種方式用法區(qū)別實例解析
本文給大家分享JavaScript常用截取字符串的三種方式及每種用法的區(qū)別解析,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05

