我开发了一个不断向上移动的选框。
但是，在完成滚动最后一张图像后，确切的问题是第一张图像和最后一张图像之间存在巨大差距。我只是想删除另外添加到最后一个图像底部的尾随空格。是否有人帮助我找出解决方案。提前谢谢。
HTML：
<div style="margin-left:760px;border:0px;height:300px; width:265px;">
<marquee bgcolor="transparent" scrollamount="8" direction="up" width="265px;" style="float:left; position:absolute;" loop="true" height="300px" onmouseover="this.stop()" onmouseout="this.start()">
<img src="http://s30.postimg.org/bab6pd5wd/i05.jpg" width="220" style="z-index:11;" />
<br>
<img src="http://s30.postimg.org/84qkz5na5/i06.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/nxvjfma71/i07.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/lf9uexogt/i08.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/g6eth261p/i09.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/wvg9cz2n1/i10.jpg" width="220" />
<br>
</marquee>
</div>
答案 0 :(得分：2)
从你的选框中删除最后一个<br>，并检查你的css并确保那里的图像没有添加边距。
正如其他人所指出的，现在使用<marquee>标签实际上是不好的做法。如果你环顾四周，有很多非常好的jquery选框插件。
答案 1 :(得分：1)
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
overflow: hidden;
background-color: white;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var zxcMarquee={
init:function(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;
p.style.overflow='hidden';
obj.style.position='absolute';
obj.style[mde[0]]='0px';
obj.style[mde[3]]=sz+'px';
clone=obj.cloneNode(true);
clone.style[mde[0]]=sz+'px';
clone.style[mde[2]]='0px';
obj.appendChild(clone);
o=this['zxc'+id]={
obj:obj,
mde:mde[0],
sz:sz
}
if (typeof(srt)=='number'){
o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
}
else {
this.scroll(id,0)
}
},
scroll:function(id,ud){
var oop=this,o=this['zxc'+id],p;
if (o){
ud=typeof(ud)=='number'?ud:0;
clearTimeout(o.dly);
p=parseInt(o.obj.style[o.mde])+ud;
if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
p+=o.sz*(ud>0?-1:1);
}
o.obj.style[o.mde]=p+'px';
o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
}
}
}
function init(){
zxcMarquee.init({
ID:'marquee1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
zxcMarquee.init({
ID:'marquee2', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
}
if (window.addEventListener)
window.addEventListener("load", init, false)
else if (window.attachEvent)
window.attachEvent("onload", init)
else if (document.getElementById)
window.onload=init
</script></head>
<body>
<div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.</p>
<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
<div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.</p>
<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
</body>
</html>