テキストや画像を水平方向に自動スライドしてみます。
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>
