文字不間斷滾動(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)畫使用
- JS實(shí)現(xiàn)動(dòng)畫兼容性的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前端控制網(wǎng)絡(luò)并發(fā)數(shù)目的常見方法小結(jié)
控制前端發(fā)起請(qǐng)求的并發(fā)數(shù),即限制同一時(shí)間內(nèi)進(jìn)行處理的請(qǐng)求數(shù)量,是一種有效的策略,本文將詳細(xì)介紹前端控制并發(fā)數(shù)的幾種常見做法,希望對(duì)大家有所幫助2023-12-12
今天小編就為大家分享一篇解決layui調(diào)用自定義方法提示未定義的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
用瀑布流來(lái)展現(xiàn)照片再好不過了,我的思路大概是一張一張的圖片插入，當(dāng)這一行的圖片保持長(zhǎng)寬比例不變并且高度低于250時(shí)就完成一個(gè)了循環(huán)，即這一行插入進(jìn)去了2013-04-04
移動(dòng)端利用H5實(shí)現(xiàn)壓縮圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端利用H5實(shí)現(xiàn)壓縮圖片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
javascript動(dòng)態(tài)創(chuàng)建表格及添加數(shù)據(jù)實(shí)例詳解
這篇文章主要介紹了javascript動(dòng)態(tài)創(chuàng)建表格及添加數(shù)據(jù),以實(shí)例形式分析了javascript動(dòng)態(tài)創(chuàng)建表格的常用方法,包括不兼容IE6與兼容IE6的實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了在HTTPS 項(xiàng)目中使用百度地圖 API，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能
這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法
這篇文章主要介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
在輸入框里面預(yù)設(shè)一段提示文字，當(dāng)焦點(diǎn)在輸入框的時(shí)候清空這段文字，這在目前來(lái)說(shuō)已經(jīng)不是什么新鮮事了。2011-03-03
JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的方法
這篇文章主要介紹了JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05