js實現跑馬燈的效果_js走馬燈效果

Ⅰ 關於js的跑馬燈效果

樓主的意思是那種左右滾動的代碼？
<script>
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed = 30;
demo2.innerHTML = demo1.innerHTML;
function marquee()
{
if (demo2.offsetWidth - demo.scrollLeft <= 0)
{
demo.scrollLeft = demo.scrollLeft - demo1.offsetWidth;
}
else
{
demo.scrollLeft++;
}
}
var m = setInterval(marquee, speed);
demo.onmouseover = function () { clearInterval(m); };
demo.onmouseout = function () { m = setInterval(marquee, speed); };
<script>
這段代碼放置在要滾動的代碼之後。

Ⅱ js走馬燈效果

||<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript無縫滾動</title>
<meta charset="gb2312"/>
<style type="text/css">
#marquee ,#marquee li { padding:0px; margin:0px;}
#marquee { position:relative; list-style:none; height:150px; width:210px; padding-left:5px; overflow:hidden; border:10px solid #eee; }
#marquee li { position:absolute; font-size:12px;}
#marquee a { display:block; color:#999999; text-decoration:none;}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 80, //速度
delta = 0,//當前滾動的位置
critical = slide.offsetHeight;//臨界點
slide.innerHTML += slide.innerHTML;
var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.top = delta + "px";
}
var timer = setInterval(rolling,speed)//設置定時器
container.onmouseover=function() {clearInterval(timer)}//滑鼠移到marquee上時，清除定時器，停止滾動
container.onmouseout=function() {timer=setInterval(rolling,speed)}//滑鼠移開時重設定時器
}
window.onload = function(){
Marquee("marquee");
}
</script>
</head>
<body>
<ul id="marquee">
<li>
<a href="#">纖雲弄巧，飛星傳恨，銀漢迢迢暗度。</a><br />
<a href="#">金風玉露一相逢，便勝卻、人間無數。</a><br />
<a href="#">柔情似水，佳期如夢。忍顧鵲橋歸路！</a><br />
<a href="#">兩情若是久長時，又豈在、朝朝暮暮。</a><br />
<a href="#">千重劫，百世難，亘古匆匆，彈指間！</a><br />
<a href="#">不死軀，不滅魂，震古爍今，無人敵！</a><br />
<a href="#">待到陰陽逆亂時，以我魔血染青天！</a><br />
</li>
</ul>
</body>
</html>

Ⅲ 關於用JavaScript實現文字的跑馬燈的問題，怎樣才能真正的融入到自己的網頁中

給段代碼，僅供參考：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Marquee</title>
<script type="text/javascript" src="marquee.js"></script>
</head>
<body>
<div class="ccMarquee">在class為ccMarquee的標簽內放入要實現跑馬燈效果的文字</div>
<p class="ccMarquee">在class為ccMarquee的標簽內放入要實現跑馬燈效果的文字</p>
<h2 class="ccMarquee">在class為ccMarquee的標簽內放入要實現跑馬燈效果的文字</h2>
<span class="ccMarquee">在class為ccMarquee的標簽內放入要實現跑馬燈效果的文字</span>
</body>
</html>

Ⅳ 用js 實現走馬燈效果,橫向的怎麼實現縱向的又是怎麼實現的

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無縫滾動</title>
<style type="text/css">
img{
border:0;
height:100px; width:150px;
}
td img{
margin:0 10px;
}
</style>
</head>
<body>

<div id="demo" style="overflow:hidden;height:350px;width:200px">
<div id="demo1">
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a><p>
</div>
<div id="demo2">
</div>
</div>
<script>
var speed=40;
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>


<div style="margin-top:20px;">
<div id="scroll_div" style="overflow: hidden; WIDTH: 778px;" align=center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="scroll_begin">
<a href="#"><img src="jsfile/imagesa32/gundong_11.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_01.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_02.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_03.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_04.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_05.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_06.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_07.jpg" border=0></a></td>
<td id="scroll_end"></td>
</tr>
</table>
</div></div>
<script>
var speed1=40
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee1(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else{
scroll_div.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
scroll_div.onmouseover=function() {clearInterval(MyMar1)}
scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
</script>

</body>
</html>

Ⅳ 關於一個用javascript做的跑馬燈的效果

demo.scrollLeft= demo.scrollLeft+5;

將每次移動的相素增加即可

Ⅵ 有什麼模塊或者js可以實現跑馬燈效果

轉自博客

實現跑馬燈效果的JS很多，但是很多不好用，下面介紹一個比較好用的。
好用之處在於：
1支持一個頁面多個跑馬燈效果
2.支持跑馬燈內容的非同步載入
關鍵的實現代碼，如果看不懂，可以跑這個列子
<body>
<ulid="RunTopic">
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>

</ul>
<br>
<inputtype="button"onclick="test();"value="test">
<scripttype="text/JavaScript">
functiontest()
{
$("#RunTopic").find("li:first").appendTo($("#RunTopic"));
}
</script>
</body>
另外，也可以使用HTML的marquee標簽，我剛測試而來下，chrome，IE8，火狐都支持！
如：
<marqueedirection="up"scrollamount="1"style="width:210px;height:100px"id="">
<ahref="#">纖雲弄巧，飛星傳恨，銀漢迢迢暗度。</a><br/>
<ahref="#">金風玉露一相逢，便勝卻、人間無數。</a><br/>
<ahref="#">柔情似水，佳期如夢。忍顧鵲橋歸路！</a><br/>
<ahref="#">兩情若是久長時，又豈在、朝朝暮暮。</a><br/>
<ahref="#">千重劫，百世難，亘古匆匆，彈指間！</a><br/>
<ahref="#">不死軀，不滅魂，震古爍今，無人敵！</a><br/>
<ahref="#">待到陰陽逆亂時，以我魔血染青天！</a><br/>
</marquee>########################################################################################

JS代碼：
(function($){
$.fn.extend({
RollTitle:function(opt,callback){
if(!opt)varopt={};
var_this=this;
_this.timer=null;
_this.lineH=_this.find("li:first").height();
_this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);
_this.speed=opt.speed?parseInt(opt.speed,10):3000,//卷動速度，數值越大，速度越慢（毫秒
_this.timespan=opt.timespan?parseInt(opt.timespan,13):5000;//滾動的時間間隔（毫秒
if(_this.line==0)this.line=1;
_this.upHeight=0-_this.line*_this.lineH;
_this.scrollUp=function(){
_this.animate({
marginTop:_this.upHeight
},_this.speed,function(){
for(i=1;i<=_this.line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(_this.timer);
},function(){
_this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);
}).mouseout();
}
})
})(jQuery);
HTML代碼：
line:一次卷動的文本行數
speed:卷動動畫的時間
timespan:間隔時間
<html>
<body>
<ulid="RunTopic">
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
</ul>
</body>
<scripttype="text/javascript">
$(document.body).ready(function(){
$("#RunTopic").RollTitle({line:1,speed:200,timespan:1500});
});
</script>
</html>

Ⅶ 如何利用js實現跑馬燈顏色的改變

走馬燈效果代碼 [下面4種滾動方法大同小異,具體效果自己去嘗試,只須修改相應的地方(紫色字體專的地方屬),高級設置請修改其他數值,暫不介紹] 文字滾動代碼 (從右向左滾動) 要滾動的文字文字滾動代碼 (從下往上滾動) 要滾動的文字圖片滾動代碼 (從右...

Ⅷ js來回跑馬燈特效的問題

前面累加空格時,你看到的就是字元串後移了,
前面累減空格時,你看到的就是字元串前移了

Ⅸ 求JS實現狀態欄文字走馬燈效果

在網路搜索js走馬燈效果，有相關代碼，可以參考，主要用到的就是setinterval,多多理解。

Ⅹ javascript 怎麼實現跑馬燈

<%@page contentType="text/html; charset=GBK"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<html>
<script language="JavaScript1.2">

</script>
<body leftmargin="0" topmargin="0">
<ilayer id="main" width="&{mainwidth};" height="&{scrollerheight};" bgcolor="&{scrollerbgcolor};">
<layer id="first" left="1" top="0" height="&{scrollerheight};">
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left="&{scrollerwidth+1};" top="0" height="&{scrollerheight};" visibility="hide">
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
<layer id="third" left="&{scrollerwidth*2+1};" top="0" height="&{scrollerheight};" visibility="hide">
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[2])
</script>
</layer>
<layer id="forth" left="0" top="0" height="&{scrollerheight};" visibility="hide">
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[3])
</script>
</layer>
</ilayer>
<script
language="JavaScript1.2">

</script>
</body>
</html>
這個是橫著東的，你改改圖片的路徑和鏈接地址就行，改了圖片路徑就能用了。

導航:首頁 > 編程語言 > js實現跑馬燈的效果

js實現跑馬燈的效果

與js實現跑馬燈的效果相關的資料

友情鏈接