テキストや画像を水平方向に自動スライドしてみます。
1.JavaScriptの記述例
<script type="text/javascript" src="crawler.js"></script> <script type="text/javascript"> //テキスト(#idTxtslide)のスライド設定 marqueeInit({ uniqueid: 'idTxtslide', style: { 'padding': '5px', 'margin': '0px auto', 'width': '500px', 'background': 'lightyellow', 'border': '1px solid #cccccc' }, inc: 5, //speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 2, neutral: 150, persist: true, savedirection: true }); //画像(#idImgslide)のスライド設定 marqueeInit({ uniqueid: 'idImgslide', style: { 'padding': '50px 0 0 0', 'margin': '0px auto', 'width': '260px', 'height': '50px' }, inc: 0, //speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 2, neutral: 150, savedirection: false, random: false }); </script>
オプションで速度やマウスオーバー時の挙動等が設定出来る様です。
2.HTMLの記述例
<div class="marquee" id="idTxtslide"> 「DAD UNION(ダットユニオン)」は「世のお父さんをもっと生きやすく」をテーマにしたWEB技術メディアです。 </div> <div class="marquee" id="idImgslide"><img src="img1.jpg" border="0"><img src="img2.jpg" border="0"><img src="img3.jpg" border="0"><img src="img4.jpg" border="0"><img src="img5.jpg" border="0"></div>