導航:首頁 > 萬維百科 > 網頁設計滾動字幕無間斷滾動

網頁設計滾動字幕無間斷滾動

發布時間:2021-02-10 18:02:52

1、如何在dw網頁中插入無間斷滾動字幕、圖片

不用代碼怎麼做。。。

把滾動內容換成你自己的,DW換到代碼方式才能修改

<div id=demo style=overflow:hidden;height:100;width:90;
background:#214984;color:#ffffff>
<div id=demo1>

滾動內容

</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML //克隆demo1為demo2
function Marquee(){
//當滾動至demo1與demo2交界時
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight //demo跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//設置定時器
//滑鼠移上時清除定時器達到滾動停止的目的
demo.onmouseover=function() {clearInterval(MyMar)}
//滑鼠移開時重設定時器
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

2、html怎樣使滾動字幕無縫隙循環

html圖片循環滾動無縫隙代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
/*gundongtupian*/
#demo0 {
width:712px;
height:134px;
overflow:hidden;
margin:auto;
}
#demo0 img {
float:left;
margin-left:10px;
border:3px #ffffff solid;
}
#indemo0 {
float: left;
width: 800%;
}
#demo10 {
float: left;
}
#demo20 {
float: left;
}
</style>
</head><body>
<div id="demo0">
<div id="indemo0">
<div id="demo10">
<a href="#"><img src="images/tu1.jpg" width="167" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
</div>
<div id="demo20"></div>
</div>
</div>
<script language="javascript">
<!--
var speed0=40; //數字越大速度越慢
var tabb=document.getElementById("demo0");
var tabb1=document.getElementById("demo10");
var tabb2=document.getElementById("demo20");
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;
function Marquee2(){
if(tabb2.offsetWidth-tabb.scrollLeft<=0)
tabb.scrollLeft-=tabb1.offsetWidth;
else{
tabb.scrollLeft++;
}
}
var MyMar2=setInterval(Marquee2,speed0);
tabb.onmouseover=function(){clearInterval(MyMar2)};
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};
-->
</script>
</body>
</html>

3、html網頁設計中,如何設置無間斷循滾動環圖片

這是我曾經寫的一個簡易二次方緩動輪播器/**
* Player 輪播器
* @param object obj
* @author [email protected]
* obj{
* frame //內容框架,position:absolute;
* lists //輪播內容節點數組,注意這個父容器的lists復寫一次,如果是ul,則ul.innerHTML+=ul.innerHTML,呈現不間斷滾動
* time //跳幀時間3000ms
*
* }
*/
function Player(obj){
this.frame=obj.frame, //內容框架
this.lists=obj.lists, //移動節點
this.time=obj.time||3000, //幀翻滾間隔
this.index=0, //初始化第一幀位置
this.step=this.lists[0].offsetHeight||0 ; //翻滾步長
this.run();
}
Player.prototype={
//跳幀
skip:function(time){
this.skipInterval&&clearInterval(this.skipInterval);
var _this=this;
var des=this.lists[this.index].relatedPosition;
var t=0;
this.skipInterval=setInterval(function(){
t+=10;
_this.frame.style.top=_this.lists[_this.index-1].relatedPosition-Math.ceil(_this.step*Math.pow(t/time,2))+"px";
if(t==time){
clearInterval(_this.skipInterval);
}
},10);

},
//下一幀
next:function(){
this.index+=1;
if(this.index>this.lists.length/2) {
this.frame.style.top="0px";
this.index=1;
}
this.skip(300);
},
//開始跳幀
start:function(){
var _this=this;
this.interval=setInterval(function(){
_this.next();
},this.time);
},
//停止跳幀
stop:function(){
clearInterval(this.interval);
},
//初始化輪播器
run:function(){
this.start();
this.deal();
},
//幀處理
deal:function(){
var _this=this;
for(var i=0;i<this.lists.length;i++){
this.lists[i].relatedPosition=-this.lists[i].offsetTop;
this.lists[i].onmouseover=function(){
_this.stop();
}
this.lists[i].onmouseout=function(){
_this.start();
}
}
}
}

4、網頁中不間斷滾動字母html代碼

<div id="marquees" align="left"><!-- 這些是字幕的內容,你可以任意定義 --> <table width="100%" border="0" cellspacing="2" cellpadding="0"> <tr> <td align="center" class="FEA203br">搜搜問問</td> </tr> <tr> <td align="center" class="FEA203br">騰訊QQ</td> </tr> <tr> <td align="center" class="FEA203br">系統集成實驗</td> </tr> </table> <!-- 字幕內容結束 --> </div> <!-- 以下是javascript代碼 --> <script language="javascript"> <!-- marqueesHeight=200; //內容區高度 stopscroll=false; //這個變數控制是否停止滾動 with(marquees){ noWrap=true; //這句表內容區不自動換行 style.width=120; style.height=marqueesHeight; style.overflowY="hidden"; //滾動條不可見 onmouseover=new Function("stopscroll=true"); //滑鼠經過,停止滾動 onmouseout=new Function("stopscroll=false"); //滑鼠離開,開始滾動 } //這時候,內容區的高度是無法讀取了。下面輸出一個不可見的層"templayer",稍後將內 容復制到裡面: document.write('<div id="templayer" style="position:absolute;z- index:1;visibility:hidden"></div>'); function init(){ //初始化滾動內容 //多次復制原內容到"templayer",直到"templayer"的高度大於內容區高度: while(templayer.offsetHeight<marqueesHeight){ templayer.innerHTML+=marquees.innerHTML; } //把"templayer"的內容的「兩倍」復制回原內容區: marquees.innerHTML=templayer.innerHTML+templayer.innerHTML; //設置連續超時,調用"scrollUp()"函數驅動滾動條: setInterval("scrollUp()",20); } document.body.onload=init; preTop=0; //這個變數用於判斷滾動條是否已經到了盡頭 function scrollUp(){ //滾動條的驅動函數 if(stopscroll==true) return; //如果變數"stopscroll"為真,則停止滾動 preTop=marquees.scrollTop; //記錄滾動前的滾動條位置 marquees.scrollTop+=1; //滾動條向下移動一個像素 //如果滾動條不動了,則向上滾動到和當前畫面一樣的位置 //當然不僅如此,同樣還要向下滾動一個像素(+1): if(preTop==marquees.scrollTop){ marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1; } } --> </script>

5、這段滾動文字代碼怎樣才能不間斷滾動

<div id="marquees"> <!-- 這些是字幕的內容,你可以任意定義 --> <a href="#">鏈接</a>
<br> <a href="#">鏈接2</a>
<br> <a href="#">鏈接3</a>
<br> <a href="#">鏈接4</a>
<br> <!-- 字幕內容結束 -->
</div>
<!-- 以下是javascript代碼 -->
<script language="javascript">
<!--
marqueesHeight=200; //內容區高度
stopscroll=false; //這個變數控制是否停止滾動
with(marquees){
noWrap=true; //這句表內容區不自動換行
style.width=0; //於是我們可以將它的寬度設為0,因為它會被撐大
style.height=marqueesHeight;
style.overflowY="hidden"; //滾動條不可見
onmouseover=new Function("stopscroll=true"); //滑鼠經過,停止滾動
onmouseout=new Function("stopscroll=false"); //滑鼠離開,開始滾動
}
//這時候,內容區的高度是無法讀取了。下面輸出一個不可見的層"templayer",稍後將內容復制到裡面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滾動內容
//多次復制原內容到"templayer",直到"templayer"的高度大於內容區高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的內容的「兩倍」復制回原內容區:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//設置連續超時,調用"scrollUp()"函數驅動滾動條:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //這個變數用於判斷滾動條是否已經到了盡頭
function scrollUp(){ //滾動條的驅動函數
if(stopscroll==true) return; //如果變數"stopscroll"為真,則停止滾動
preTop=marquees.scrollTop; //記錄滾動前的滾動條位置
marquees.scrollTop+=1; //滾動條向下移動一個像素
//如果滾動條不動了,則向上滾動到和當前畫面一樣的位置
//當然不僅如此,同樣還要向下滾動一個像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

6、dw中,如何製作滾動字幕。無縫隙跟隨

跟在表格裡面一樣
滾動字幕標記<marquee>…</marquee >
屬性:滾動方向----direction= (up 、down 、left 、right)
滾動方式----behavior= (scroll 、slide 、alternate)
滾動速回度----scrollamount= (數字 例:30=每次移動30像素答)
滾動延遲----scrolldelay= (數字 例:500=0.5秒)
滾動循環----loop= (數字 例:10=10次)
滾動范圍----width 、height= (數字 450=405像素)
滾動背景----bgcolor= (顏色的英文或是顏色代碼)
特殊屬性:滑鼠經過滾動停止----onmouseover=「this.stop()」
滑鼠離開滾動繼續----onmouseout=「this.start()」

7、如何實現網頁內容(圖片或文字)的連續不間斷滾動?

<div id="demo">
<div id="demo1"> 要循環顯示的內容1<br>要循環顯示的內容2</div>
<div id="demo2"></div>
</div>
<script>
var speed=100 //滾動速度值,值越大速度越慢
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
for (var i=0;i<1000;i++){
if (demo1.offsetHeight<500)demo1.innerHTML+=demo1.innerHTML;
else break
}
demo2.innerHTML=demo1.innerHTML //克隆demo2為demo1
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //當滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight //demo跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed); //設置定時器
demo.onmouseover=function() {clearInterval(MyMar)} //滑鼠經過時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} //滑鼠移開時重設定時器
</script>

支持多瀏覽器。

8、給一個div+css+javascript做的不間斷滾動字幕的樣例。

<style>a{display:block;font-size:15px};</style>
<div id="div1" style="width:300px;height:68px;overflow:hidden">
<a href="javascript:">1,你可曾有過無數的夢想,</a>
<a href="javascript:">2,卻在時光的流逝里幻滅 </a>
<a href="javascript:">3,你可曾對未來期待憧憬,</a>
<a href="javascript:">4,卻在成長的歲月中迷失</a>
<a href="javascript:">5,CSDN中國程序員論壇</a>
<a href="javascript:">6,大家一起來</a>
<a href="javascript:">7,好象都很不錯的樣子</a>
</div>
<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

9、網頁中誰知道 實現字幕滾動一欄停一下,間隔幾秒繼續滾動的代碼?

<SCRIPT language=javascript>
<!--
marqueesHeight=230; //內容區高度
stopscroll=false; //這個變數控制是否停止滾動
with(marquees){
noWrap=true; //這句表內容區不自動換行
style.width=0; //於是我們可以將它的寬度設為0,因為它會被撐大
style.height=marqueesHeight;
style.overflowX="visible"; //滾動條不可見
style.overflowY="hidden"; //滾動條不可見
onmouseover=new Function("stopscroll=true"); //滑鼠經過,停止滾動
onmouseout=new Function("stopscroll=false"); //滑鼠離開,開始滾動
}
//這時候,內容區的高度是無法讀取了。下面輸出一個不可見的層"templayer",稍後將內容復制到裡面:
document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滾動內容
//多次復制原內容到"templayer",直到"templayer"的高度大於內容區高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的內容的「兩倍」復制回原內容區:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//設置連續超時,調用"scrollUp()"函數驅動滾動條:
setInterval("scrollUp()",40);
}
document.body.onload=init;
preTop=0; //這個變數用於判斷滾動條是否已經到了盡頭
function scrollUp(){ //滾動條的驅動函數
if(stopscroll==true) return; //如果變數"stopscroll"為真,則停止滾動
preTop=marquees.scrollTop; //記錄滾動前的滾動條位置
marquees.scrollTop+=1; //滾動條向下移動一個像素
//如果滾動條不動了,則向上滾動到和當前畫面一樣的位置
//當然不僅如此,同樣還要向下滾動一個像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</SCRIPT>

10、網頁中滾動字幕問題。代碼如下。滾動的效果超出了表格。而且我想要的是循環沒有間斷的滾動效果。

現在做滾動都用js了,上網找段js代碼吧

與網頁設計滾動字幕無間斷滾動相關的知識