怎么做成不间断的跑马灯效果??/
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么做成不间断的跑马灯效果??/相关的知识，希望对你有一定的参考价值。
我的意思是说,从头跑到尾在接上第一个图片
制作方法：1、在<head>中加入代码：
<script language="javascript">
imgArr=new Array()
imgArr[0]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo.gif border=0></a>"
imgArr[1]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo_1.gif border=0></a>"
imgArr[2]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/flashfox.gif border=0></a>"
imgArr[3]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/blueieda.gif border=0></a>"
imgArr[4]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/flashempire.gif border=0></a>"
imgArr[5]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/5dmedia.gif border=0></a>"
imgArr[6]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/windstudio.gif border=0></a>"
imgArr[7]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/sucaiw.gif border=0></a>"
imgArr[8]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/htmlcn.gif border=0></a>"
imgArr[9]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/flasherclub.gif border=0></a>"
imgArr[10]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/fwcn.gif border=0></a>"
var moveStep=4 //步长，单位：pixel
var moveRelax=100 //移动时间间隔，单位：ms
ns4=(document.layers)?true:false
var displayImgAmount=5 //视区窗口可显示个数
var divWidth=88 //每块图片占位宽
var divHeight=31 //每块图片占位高
var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false
var startDivClipLeft
var nextDivClipRight
function initDivPlace()
if (ns4)
for (i=0;i<displayImgAmount;i++)
eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
for (i=displayImgAmount;i<imgArr.length;i++)
eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
else
for (i=0;i<displayImgAmount;i++)
eval("document.all.divAds"+i+".style.left="+divWidth*i)
for (i=displayImgAmount;i<imgArr.length;i++)
eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
function mvStart()
timeID=setTimeout(moveLeftDiv,moveRelax)
function mvStop()
clearTimeout(timeID)
function moveLeftDiv()
if (ns4)
for (i=0;i<=displayImgAmount;i++)
eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))
if (startDivClipLeft+moveStep>divWidth)
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length
startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
else
eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
else
for (i=0;i<=displayImgAmount;i++)
eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
if (startDivClipLeft+moveStep>divWidth)
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length
startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
else
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
if (outHover)
mvStop()
else
mvStart()
function writeDivs()
if (ns4)
document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
for (i=0;i<imgArr.length;i++)
document.write("<layer name=divAds"+i+">")
document.write(imgArr[i]+" ")
document.write("</layer>")
document.write("</ilayer>")
document.close()
for (i=displayImgAmount;i<imgArr.length;i++)
eval("document.divOuter.document.divAds"+i+".clip.right=0")
else
document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
for (i=0;i<imgArr.length;i++)
document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
document.write(imgArr[i]+" ")
document.write("</div>")
document.write("</div>")
for (i=displayImgAmount;i<imgArr.length;i++)
eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
</script>
请按照代码中文文字介绍修改相应设置。
2、在<body>中加载： onload=javascript:mvStart()
3、在需要出现滚动效果处加入代码：<SCRIPT language=JavaScript>writeDivs();initDivPlace();</SCRIPT>
制作完成，请参看效果！ 参考技术A //定义相关函数
<script language="javascript" type="text/javascript">
function ini(arr,hght,spd,width,height)
document.write('<DIV id=sch onmouseover="tryclearTimeout(timer1);catch(e);" style="OVERFLOW: hidden;width:'+width+';HEIGHT:'+height+'px" onmouseout="timer1=setInterval(\'newsScroll()\','+spd+')">');
document.write('<table id=bb style=" Height: '+height+'px; POSITION: relative; Left:0px;TOP: 0px;"><tr>');
document.write('<td id=sch_0 nowrap> </td>');
document.write('<td id=sch_1 nowrap> </td>');
document.write('</tr></table>');
document.write('</div>');
var str="";
for(var i=0;i<arr.length;i++)
//alert(arr[i][0]);
if(arr[i][2]=='')
str='<img style="margin:3px;" border=0 src="'+arr[i][0]+'" Height="'+hght+'" alt="'+arr[i][1]+'" /> ';
else
str='<a href="'+arr[i][2]+'" target=_blank><img style="margin:3px;" border=0 src="'+arr[i][0]+'" Height="'+hght+'" alt="'+arr[i][1]+'" /></a> ';
if(sch_0.innerHTML==' ')
sch_0.innerHTML=str;
else
sch_0.innerHTML=sch_0.innerHTML+str;
sch_1.innerHTML=sch_0.innerHTML;
timer1=setInterval('newsScroll()',spd);//*/
//alert("sdf")
function newsScroll()
bb.style.pixelLeft=(bb.style.pixelLeft-1)%(bb.clientWidth/2);
</script>
////下面是函数调用
<script language="javascript" type="text/javascript">
var i=0;var Arr=new Array();
//Arr数组格式 图片源文件 alt, 链接地址(为空不生成链接)
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');
//ini函数说明 参数1 加载的图片源数组
// 参数2 区域高度
// 参数3 延迟,越高速度越慢
// 参数4 显示区域宽度
// 参数5 图片高度
ini(Arr,100,40,340,100);
</script> 参考技术B 经测试楼上的完全合格我给满分,呵呵,就是代码长了点
android 跑马灯效果，如果文字不超过宽度，我也想做出跑马灯效果，怎么实现？
android 跑马灯效果，一般都是文本内容超出宽度后，才会出现的
但是如果文字不超过宽度，我也想做出跑马灯效果，怎么实现？
在新建一个Android product之后，在布局文件main中替换掉原来的TextView
代码如下：
<TextView
android:layout_width="60dp"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:text="这是跑马灯的效果这是跑马灯的效果">
</TextView>
其他部分代码不用改动，在模拟器上应该可以看到滚动的显示"这是跑马灯的效果这是跑马灯的效果"。
其中有几个问题是我自己碰到的，列举如下：
1.宽度android:layout_width不可以设置为wrap_content（自适应内容）
2.android:text最好是比较长的字符串，最少要长过自己设置的width大小（我这里是60dp）
3.颜色最好别设置为@android:color/white，否则你什么都看不到，因为背景颜色也是white
4.在xml中,TextView 的属性
android:ellipsize = "end" 省略号在结尾
android:ellipsize = "start" 省略号在开头
android:ellipsize = "middle" 省略号在中间
android:ellipsize = "marquee" 跑马灯
5.android:scrollHorizontally="true"相信大家英文水平还不错的话都明白这句的意思是水平滚动
6.android:marqueeRepeatLimit="marquee_forever" 看英文同样可以明白，是无限次循环，学习android，英文基础还是必须的。
7.最后还有两句代码没有解释：
android:focusable="true" //让TextView获得焦点
android:focusableInTouchMode="true" //针对触摸屏获得当前焦点
事实上这两句代码我也了解不是特别多，在网上查了下这两个属性，目前理解为：
android:focusable="true"相当于当前Activity打开的时候，让当前控件TextView获得焦点，才可以实现滚动功能
android:focusableInTouchMode="true"和上述属性应该是类似的，但限制应该是指的触摸屏上的意思
对于这两个属性，希望有高人指点下。 参考技术A 字数不够，空格来凑
以上是关于怎么做成不间断的跑马灯效果??/的主要内容，如果未能解决你的问题，请参考以下文章
请问谁知道网页中跑马灯的效果是怎样做成的？在macromedia mx 中可以做吗？
Marquee(跑马灯)横向纵向无空白的不间断连续循环滚动代码