初期空白のないランニングライト効果

もともと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)
	}

})

 
この走馬灯の原理はよくわかります.imagesのoverflowがscrollになればわかります.2枚の図を並べて交互にスクロールすることで実現される.ここで#wall_images_wrapのwidth:4000 px;肝心です.このようにしてこそ、同じ2つの写真を同じ行に収容するのに十分な幅があります.wall_imagesはフォトフレームで、widthとheightを固定して容器の範囲を超えた画像をhideします.次の階の#wall_images_wrapは幅が大きすぎるので、容器を広げているに違いありません.これも私たちが望んでいることです.ここでの4000 pxは我々がハードコーディングしたものであり,もちろんjsを用いてimgの数と大きさに基づいて動的に定義することもできる.ここではimgのデフォルトはinlineレイアウトですが、ここでは#wall_images 1と#wall_images 2はinline-blockに設定します.ここではそれらをインライン要素と見なした後,divが一気に100%widthを占めることはない.内連の要素として同じようにおとなしくてどれだけ大きいかです.だからここはimages 1と#wall_images 2はいずれも長く、等長で100%widthを占めない.ここではinline-blockをinlineに変更しても動作します.inlineに変更すると、ボックスモデルを利用してdivを修飾することはできません.ここでは箱の模型には関与していません.したがって、2つの長いdivも並んでスクロールすることができます.あるいは、#wall_images 1と#wall_imagesのfloat:left、その他は変わりません.やはりblockのdivです.divはやはり100%widthを占めると思っていたが、見つからなかった.Divはなんとおとなしくてどれくらいの長さなのか.これがfloatの特性かもしれませんが、ブロックレベルの要素のデフォルトが100%を占める特性を除去します.ここでも効果的です.ここでもう少し説明します.images_wrapのwidthは2つのdiv理論の2倍以上でいいので、いくらでもいいので、scrollで試してみればわかります.