本来想用 marquee来做一个跑马灯的效果。但是一想到 marquee 开始的时候总会有一段空白,就想到网上下一个一上来就填满整个容器的 js 跑马灯效果。我从网上直接下了一段 html 代码,嵌进了我的代码里,但是总是没有效果。我胡乱地改了 css 和 style 但是始终图片动也不动,我也不知道哪里出了问题。我搞了好久好久,于是狠下心来,开始看代码,打算自己把原理搞懂,把效果修复了。弄了一会儿,我就把效果恢复了。于是我把代码贴出来。原来的代码是用的表格布局的,现在我统一改成 div 布局。想说一句,把原理搞懂才是王道。
<div id="wall_images">
<div id="wall_images_wrap">
<div id="wall_images1">
<img src="<{$xoops_url}>/images/marquee/1.jpg"/><img src="<{$xoops_url}>/images/marquee/2.jpg"/><img src="<{$xoops_url}>/images/marquee/3.jpg"/><img src="<{$xoops_url}>/images/marquee/4.jpg"/><img src="<{$xoops_url}>/images/marquee/5.jpg"/><img src="<{$xoops_url}>/images/marquee/6.jpg"/><img src="<{$xoops_url}>/images/marquee/7.jpg"/>
</div>
<div id="wall_images2">
</div>
</div>
</div>
对应的css为
<style>
#wall_images {
overflow: hidden;
height: 150px;
width: 670px;
}
#wall_images img {
margin: 0 5px 0 5px;
height: 150px;
}
#wall_images1, #wall_images2 {
display: inline-block;
}
#wall_images_wrap {
width: 4000px;
}
</style>
$(function(){ var speed = 30 var wall_images2=document.getElementById("wall_images2"); var wall_images=document.getElementById("wall_images"); var wall_images1=document.getElementById("wall_images1"); wall_images2.innerHTML = wall_images1.innerHTML wall_images1.scrollLeft = wall_images.scrollWidth function Marquee() { if (wall_images.scrollLeft <= 0) wall_images.scrollLeft += wall_images2.offsetWidth else { wall_images.scrollLeft-- } } var MyMar = setInterval(Marquee, speed) wall_images.onmouseover = function() { clearInterval(MyMar) } wall_images.onmouseout = function() { MyMar = setInterval(Marquee, speed) } })
这个走马灯的原理很好懂,只要你把#wall_images的overflow变成scroll就可以明白。就是利用两张图并排滚动交替实现的。这里#wall_images_wrap 的width: 4000px;很关键。只有这样,才能够有足够的宽度来容纳相同的两拍图片在同一行。#wall_images为一个相框,先固定width和height将超出其容器范围内的图片都hide掉。下一层的#wall_images_wrap因为宽度太大,肯定是撑开容器的,这也是我们期望的。这里的4000px是我们硬编码的,当然也可以用js根据img的数量和大小来动态定义。
这里还要说,img默认的是inline布局,这里把#wall_images1和#wall_images2设成inline-block。这里把它们看做内联元素之后,那么div就不会一下子占满100%的width。而是作为内联元素一样老老实实的该多大就多大。所以这里#wall_images1和#wall_images2都很长,并且等长,不会占满100%的width。
而这里如果把inline-block改成inline也是可以工作的。如果你改成inline,就不能利用盒模型来修饰div了。这里我们没有牵扯到盒模型。所以两个长长的div也可以并排滚动。
或者也可以这样,让#wall_images1和#wall_images的float:left,其他不变。还是block的div。我本来以为div还是会占满100%的width,但是发现没有。Div竟然老老实实的该是多长就是多长。也许这就是float的特性,把块级元素默认占100%的特性消除掉了。这里也可以由有效果的。
这里还要说明一点,只要#wall_images_wrap的width比两个div理论上的两倍多就可以了,多多少无所谓,你用scroll试一下就知道了。