❶ js 實現文字多行多列無縫 循環滾動 且帶停頓的
恩,可以網路搜索下「MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類)」這個JS封裝類有你要的效果,調用起來也很方便,希望可以幫到你。
❷ 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()」
❸ css怎麼實現文字無縫上下滾動
155156157158159!DOCTYPEhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/title向上下左右不間斷無縫滾動效果(兼容火狐和IE)/title/headbodydivid="colee"style="overflow:hidden;height:253px;width:410px;"divid="colee1"p此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/p/divdivid="colee2"/div/divscriptvarspeed=30;varcolee2=document.getElementById("colee2");varcolee1=document.getElementById("colee1");varcolee=document.getElementById("colee");colee2.innerHTML=colee1.innerHTML;//克隆colee1為colee2functionMarquee1(){//當滾動至colee1與colee2交界時if(colee2.offsetTop-colee.scrollTop=0){colee.scrollTop-=colee1.offsetHeight;//colee跳到最頂端}else{colee.scrollTop++}}varMyMar1=setInterval(Marquee1,speed)//設置定時器//滑鼠移上時清除定時器達到滾動停止的目的colee.onmouseover=function(){clearInterval(MyMar1)}//滑鼠移開時重設定時器colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}/script!--向上滾動代碼結束--!--下面是向下滾動代碼--divid="colee_bottom"style="overflow:hidden;height:253px;width:410px;"divid="colee_bottom1"pimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/divdivid="colee_bottom2"/div/divscriptvarspeed=30varcolee_bottom2=document.getElementById("colee_bottom2");varcolee_bottom1=document.getElementById("colee_bottom1");varcolee_bottom=document.getElementById("colee_bottom");colee_bottom2.innerHTML=colee_bottom1.innerHTMLcolee_bottom.scrollTop=colee_bottom.scrollHeightfunctionMarquee2(){if(colee_bottom1.offsetTop-colee_bottom.scrollTop=0)colee_bottom.scrollTop+=colee_bottom2.offsetHeightelse{colee_bottom.scrollTop--}}varMyMar2=setInterval(Marquee2,speed)colee_bottom.onmouseover=function(){clearInterval(MyMar2)}colee_bottom.onmouseout=function(){MyMar2=setInterval(Marquee2,speed)}/script!--向下滾動代碼結束--!--下面是向左滾動代碼--divid="colee_left"style="overflow:hidden;width:500px;"tablecellpadding="0"cellspacing="0"border="0"trtdid="colee_left1"valign="top"align="center"tablecellpadding="2"cellspacing="0"border="0"tralign="center"tdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/td/tr/table/tdtdid="colee_left2"valign="top"/td/tr/table/divscript//使用div時,請保證colee_left2與colee_left1是在同一行上.varspeed=30//速度數值越大速度越慢varcolee_left2=document.getElementById("colee_left2");varcolee_left1=document.getElementById("colee_left1");varcolee_left=document.getElementById("colee_left");colee_left2.innerHTML=colee_left1.innerHTMLfunctionMarquee3(){if(colee_left2.offsetWidth-colee_left.scrollLeft=0)//offsetWidth是對象的可見寬度colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth是對象的實際內容的寬,不包邊線寬度else{colee_left.scrollLeft++}}varMyMar3=setInterval(Marquee3,speed)colee_left.onmouseover=function(){clearInterval(MyMar3)}colee_left.onmouseout=function(){MyMar3=setInterval(Marquee3,speed)}/script!--向左滾動代碼結束--!--下面是向右滾動代碼--divid="colee_right"style="overflow:hidden;width:500px;"tablecellpadding="0"cellspacing="0"border="0"trtdid="colee_right1"valign="top"align="center"tablecellpadding="2"cellspacing="0"border="0"tralign="center"tdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/td/tr/table/tdtdid="colee_right2"valign="top"/td/tr/table/divscriptvarspeed=30//速度數值越大速度越慢varcolee_right2=document.getElementById("colee_right2");varcolee_right1=document.getElementById("colee_right1");varcolee_right=document.getElementById("colee_right");colee_right2.innerHTML=colee_right1.innerHTMLfunctionMarquee4(){if(colee_right.scrollLeft=0)colee_right.scrollLeft+=colee_right2.offsetWidthelse{colee_right.scrollLeft--}}varMyMar4=setInterval(Marquee4,speed)colee_right.onmouseover=function(){clearInterval(MyMar4)}colee_right.onmouseout=function(){MyMar4=setInterval(Marquee4,speed)}/script!--向右滾動代碼結束--/body/html常用JS圖片、文字滾動(...大小:1.41K 已經過網路安全檢測,放心下載點擊下載
追問
這是JS的代碼?我要的HTML的
❹ 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>
❺ 一個js文字無縫滾動的問題,這段代碼滾動的原理到底是什麼呀
這段代碼的核心處理是應用setInterval每speed(30)毫秒執行一次頁面更新.
更新的函數是Marquee,通常執專行的是屬demo.scrollTop++,也就是說通常情況下是每30毫秒向下移動一個像素,這樣子連續起來就成了動畫了. 當動畫移動到邊界時,執行的時marquee裡面的另外一個分支,將動畫移動到最初位置.
實現無縫,其實是借用了兩個相同的dom塊(demo1和demo2),兩者同時向下移動,一個移出可視范圍多少,另外一個就移入可是范圍多少.
❻ jQuery文字無縫滾動
jq有一個scroll.js插件,就是實現文字無縫滾動的。其使用方法也很簡單。
①:在<head></head>標簽裡面引版用文件 jquery.js,scroll.js,style.css;權
②:調用相關的js;如:
<scripttype="text/javascript">
$(document).ready(function(){
$('.list_lhli:even').addClass('lieven');
$("div.list_lh").myScroll({
speed:40,//數值越大,速度越慢
rowHeight:68//li的高度
});
});
</script>
PS:li的高度與rowHeight的值要一致,要不然的話會出現卡頓。
❼ 怎樣讓文字或圖片在網頁中無縫滾動
文字向上無縫滾動
<div id=marquees style="height=100px;LEFT: 60px; POSITION: absolute; TOP: 100px;"><font style="font-family:宋體; color:white; font-size:14px;line-height=15px">
<a href="#">你在做什麼</a><br>
<br>
<a href="#">我在仰望天空</a><br>
<br>
<a href="#">30度仰望是什麼</a><br>
<br>
<a href="#">是我想念她的角度</a><br>
<br>
<a href="#">為什麼要把頭抬到30度</a><br>
<br>
<a href="#">為了不讓我的眼淚掉下來</a><br>
<br>
<br>
<br>
</div>
<script language="JavaScript">
marqueesHeight=100;
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()",30);
}
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>
❽ 跪求!!!!!jquery控制的文字從下到上無縫滾動!!!
給你說一下邏抄輯:
首先, 把你的要滾動的文字的容器元素復制一份。 接在原有容器的後面。 再作滾動。
當你復制的元素完全顯示出來後【這時原有的文字完全消失了】 馬上把原有元素的top設置為0,再接著滾動。 效果就無縫了。
如果這還不能幫助你寫出代碼。我這里有無縫滾動的代碼。 告訴我email 我發給你。
❾ AE中讓圖片首尾相接循環滾動要怎麼做
你研究一下AE的表達式,給圖片的position的x參數應用循環表達式。
假如你版的圖片寬度是權100像素,你的合成的寬度是720.
你可以讓圖片的位置x的值在-50~770之間循環。(其中-50=0-50,代表圖片的初始位置在屏幕左側外;而770=720+50,代表圖片消失在屏幕右側)。
做好一層後,多復制幾層,每一層的position值+100,或者-100.這樣就首尾相接了。至於循環的速度,就靠time值控制了。你找找,AE的函數庫裡面有這樣的循環表達式。
❿ HTML 無縫文字滾動怎麼做
上下無縫滾動代碼:
<div id="demo" style="height:50px;overflow:hidden;">
<div id="indemo" style="height:200%;">
<div id="demo1">
第一行字<br />
第二行字
</div>
<div id="demo2"></div>
</div>
</div>
</body>
<script type="text/javascript">
speed = 100; //數字越大滾得越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab1.offsetHeight;
function Marquee(){
if (tab.scrollTop >= tab1.offsetHeight) {
tab.scrollTop-=tab2.offsetHeight;
}else{
tab.scrollTop+=1;
}
}
var MyMar=setInterval(Marquee,speed);
</script>
左右橫向無縫滾動代碼
<table cellSpacing=0 cellPadding=0 width=100 align=center border=0>
<tr>
<td width=190 bgColor=#d6f6fd height=27></td>
<td bgColor=#d6f6fd height=27>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollAmount=2 scrollDelay=60 width=580 height=20>
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果2 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果3 [ 7/10/2012]
</marquee>
</td>
</tr>
</table>