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实现跑马灯的效果相关的资料

友情链接