|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 請教連續滾動效果。該如何製作？
請問我使用這個滾動效果之後，怎麼不能連續滾動？
有如下代碼。
[html]
<base href="http://www.flash8.net">
<div id=demo style=overflow:hidden;height:33;width:780;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif"><img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif"><img src="http://www.blueidea.com/logo.gif"><img src="images/link/flashskylogo.gif"><img src="images/link/5dlogo88.gif"><img src="http://www.yiiboo.com/cgercn/link.gif"><img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[/html] |
還是上面代碼。圖片少了。就不能滾動了。請問是為什麼？
[html]
<base href="http://www.flash8.net">
<div id=demo style=overflow:hidden;height:33;width:400;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="images/link/flashempire.gif"><img src="images/linklogo/5dmeng.gif"><td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[/html] |
再一個問題是：
在網頁中插入之後，佈局就會大亂，暈死我了 |
在head中加
[code]<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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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>
請按照代碼中文文字介紹修改相應設置。
[/code]
<body>中加載:
onload=javascript:mvStart()
在需要出現滾動效果處加入代碼：<SCRIPT language=JavaScript>writeDivs();initDivPlace();</SCRIPT> |
樓上的。代碼可夠長的了
試一下：）
[html]
<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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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=http://www.it365cn.com/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>
</head>
<body onload=javascript:mvStart()>
<SCRIPT language=JavaScript>writeDivs();initDivPlace();</SCRIPT></body>[/html] |
|
