【Jquery】自己寫的簡易連續跑馬燈

展示

CSS:
#marquee_snp { position: relative; width: 400px; height:90px; margin: 0 auto 0 auto; border: 1px solid #CCC; overflow:hidden; } #marquee_snp ul{ position: absolute; margin:0px; } #marquee_snp li { list-style-type: none; margin-top:2px; }

程式部分：
$(function (){ var $marUL = $("#marquee_snp ul"), $marCopy = $marUL.append($marUL.html()).children(), // 複製一分到文件下方 $num = $marUL.children("li").length, // 一行的高度 $speed = 2000, // 速度 $marHeight,$timer; $marLiHeight = ($marUL.height() / $num); $timer = setTimeout(marMove, $speed); // 開始執行 function marMove(){ $i = (($marUL.position().top / $marLiHeight) * -1) + 1; // 目前第幾個在+1 $marUL.animate({ top: ($marLiHeight * $i) * -1 // 移動高度 },600,function (){ if ($i >= $num / 2){ // 如果已經跑完一遍 讓高度變0 $marUL.css('top','0'); } }); $timer = setTimeout(marMove, $speed); } // 當滑鼠移入停止動作 滑出在開始 $marUL.hover(function (){ clearTimeout($timer); },function (){ $timer = setTimeout(marMove, $speed); }); })

HTML:
<div id="marquee_snp"> <ul> <li>1.跑馬燈跑馬燈跑馬燈跑馬燈跑馬燈1</li> <li>2.跑馬燈跑馬燈跑馬燈跑馬燈跑馬燈2</li> <li>3.跑馬燈跑馬燈跑馬燈跑馬燈跑馬燈3</li> <li>4.跑馬燈跑馬燈跑馬燈跑馬燈跑馬燈4</li> <li>5.跑馬燈跑馬燈跑馬燈跑馬燈跑馬燈5</li> <li>6.跑馬燈跑馬燈跑馬燈跑馬燈跑馬燈6</li> </ul> </div>