文字不間斷滾動(dòng)(上下左右)實(shí)例代碼
向上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>連續(xù)向上滾動(dòng)</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">鏈接一</a><br>
<br>
<a href="#">鏈接二</a><br>
<br>
<a href="#">鏈接三</a><br>
<br>
<a href="#">鏈接四</a><br>
<br>
</div>
<script language="JavaScript">
marqueesHeight=200;
stopscroll=false;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",100);
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
</body>
</html>
向下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>連續(xù)向下滾動(dòng)</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">鏈接一</a><br>
<br>
<a href="#">鏈接二</a><br>
<br>
<a href="#">鏈接三</a><br>
<br>
<a href="#">鏈接四</a><br>
<br>
</div>
<script language="JavaScript">
marqueesHeight=200;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;getlimit=0;stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollDown()",10);
}init();
function scrollDown(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop-=1;
if(preTop==marquees.scrollTop){
if(!getlimit){
marquees.scrollTop=templayer.offsetHeight*2;
getlimit=marquees.scrollTop;
}
marquees.scrollTop=getlimit-templayer.offsetHeight+marqueesHeight;
marquees.scrollTop-=1;
}
}
</script>
</body>
</html>
向左
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>連續(xù)向左滾動(dòng)</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">鏈接一</a> <a href="#">鏈接二</a> <a href="#">鏈接三</a> <a href="#">鏈接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">
marqueesWidth=200;
with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",100);
}init();
function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}
</script>
</body>
</html>
向右
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>連續(xù)向右滾動(dòng)</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">鏈接一</a> <a href="#">鏈接二</a> <a href="#">鏈接三</a> <a href="#">鏈接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">
marqueesWidth=200;
with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=0; getlimit=0; stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollRight()",10);
}init();
function scrollRight(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft-=1;
if(preLeft==marquees.scrollLeft){
if(!getlimit){
marquees.scrollLeft=templayer.offsetWidth*2;
getlimit=marquees.scrollLeft;
}
marquees.scrollLeft=getlimit-templayer.offsetWidth+marqueesWidth;
marquees.scrollLeft-=1;
}
}
</script>
</body>
</html>
- CSS3中Transition屬性詳解以及示例分享
- filters.revealTrans.Transition使用方法小結(jié)
- 全面解析Bootstrap中transition、affix的使用方法
- 實(shí)例講解iOS中的CATransition轉(zhuǎn)場(chǎng)動(dòng)畫(huà)使用
- JS實(shí)現(xiàn)動(dòng)畫(huà)兼容性的transition和transform實(shí)例分析
- jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
- js實(shí)現(xiàn)的文字橫向無(wú)間斷滾動(dòng)
- 淺析js 文字滾動(dòng)效果
- 基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁(yè)面多個(gè)滾動(dòng)區(qū))
- 利用transition實(shí)現(xiàn)文字上下抖動(dòng)的效果
相關(guān)文章
JavaScript獲取XML數(shù)據(jù)附示例截圖
這篇文章主要介紹了JavaScript獲取XML數(shù)據(jù)的方法,需要的朋友可以參考下2014-03-03
二叉樹(shù)先序遍歷的非遞歸算法具體實(shí)現(xiàn)
這篇文章主要介紹了二叉樹(shù)先序遍歷的非遞歸算法，有需要的朋友可以參考一下2014-01-01
Openlayers實(shí)現(xiàn)角度測(cè)量的方法
在Openlayers中,雖然沒(méi)有直接的角度測(cè)量API,但可以通過(guò)自定義方法實(shí)現(xiàn),首先,選取三個(gè)頂點(diǎn),利用這些點(diǎn)的坐標(biāo)計(jì)算夾角度數(shù),接著,用SVG或canvas繪制代表角度的圓弧,并通過(guò)Overlay添加到地圖上,本文給大家介紹Openlayers實(shí)現(xiàn)角度測(cè)量的方法,感興趣的朋友一起看看吧2024-11-11
js模擬滾動(dòng)條(橫向豎向)，需要的朋友可以參考一下2013-02-02
這篇文章主要介紹了微信小程序-頁(yè)面間值傳遞的2種方法，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
js彈窗想必大家都有見(jiàn)到過(guò)吧，如何要說(shuō)可以自由拖拽，并兼容大部分瀏覽器的就沒(méi)有幾個(gè)了吧，本文的這個(gè)示例或許是大家要找的，可以參考下2013-10-10
Uniapp實(shí)現(xiàn)地圖獲取定位功能(推薦)
本文詳細(xì)介紹了如何在Uniapp項(xiàng)目中集成地圖功能,實(shí)現(xiàn)定位獲取,并解決微信小程序、APP、H5三端的兼容性問(wèn)題,涵蓋了環(huán)境準(zhǔn)備、配置地圖基礎(chǔ)功能、獲取用戶定位、多平臺(tái)適配要點(diǎn)以及常見(jiàn)問(wèn)題及解決方案,感興趣的朋友一起看看吧2025-03-03
詳解微信小程序的不同函數(shù)調(diào)用的幾種方法
這篇文章主要介紹了微信小程序的不同函數(shù)調(diào)用的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)橫向輪播圖的中級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
用js判斷瀏覽器是否是IE的比較好的辦法...2007-05-05