无初始空白的跑马灯效果

 

本来想用 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试一下就知道了。