Jony's Blog

懒的说废话了，直接贴代码吧。

HTML 部分

<div id=”marqee” style=”width:200px; height:24px; overflow:hidden;”>
    <table border=”0″ cellspacing=”0″ cellpadding=”0″>
        <tr>
            <td id=”marqee_frame” height=”24″><table border=”0″ cellspacing=”0″ cellpadding=”0″>
                <tr>
                    <td nowrap=”nowrap”>滚动测试用文字一</td>
                    <td nowrap=”nowrap”>滚动测试用文字二</td>
                    <td nowrap=”nowrap”>滚动测试用文字三</td>
                    <td nowrap=”nowrap”>滚动测试用文字四</td>
                </tr>
            </table></td>
            <td id=”marqee_tmp” height=”24″></td>
        </tr>
    </table>
</div>

JS 部分

var speed=20;
$(‘#marqee_tmp’).html($(‘#marqee_frame’).html());
function Marquee(){
    var w = $(‘#marqee’).width() – $(‘#marqee_frame’).width();
    if(w<0) w=0;
    if($(‘#marqee_tmp’).width() – $(‘#marqee’).scrollLeft() <= w){
        $(‘#marqee’).scrollLeft($(‘#marqee’).scrollLeft() – $(‘#marqee_frame’).offsetWidth);
    }else{
        $(‘#marqee’).scrollLeft($(‘#marqee’).scrollLeft() + 1);
    }
}
var MyMar=setInterval(Marquee,speed);
$(‘#marqee’).hover(
    function(){ clearInterval(MyMar) },
    function(){ MyMar=setInterval(Marquee,speed) }
);