使用 jQuery 的简单滚动条

引言

这是一个非常简单的滚动条脚本，可以添加到任何 HTML 页面。此示例经过测试，与 IE、Netscape、Firefox 和 Opera 浏览器兼容。

背景

此示例是使用 jQuery 框架完成的。

使用代码

HTML 结构

<div id="tickerwrapper">
    <div class="container">
        <ul>
            <li>1 </li>
            <li>2 </li>
            <li>3 </li>
            <li>4 </li>
            <li>5 </li>
            <li>6 </li>
        </ul>
    </div>    
</div>  

CSS

*{padding:0;margin:0}
ul li{list-style:none}
#tickerwrapper{padding:20px;width:150px}
#tickerwrapper ul li{padding:5px;text-align:center}
#tickerwrapper .container{background:#ccc;height:31px;overflow:hidden;width:150px;} 

JavaScript 代码

var containerheight = 0;
var numbercount = 0;
var liheight;
var index = 1;

function callticker() {    
    $(".container ul").animate({
        "margin-top": (-1) * (liheight * index)
    }, 2500);
    if (index != numbercount - 1) {
        index = index + 1;
    }
    else {
        index = 0;
    }
    timer = setTimeout("callticker()", 100);
}
$(document).ready(function() {
    numbercount = $(".container ul li").size();
    liheight = $(".container ul li").outerHeight();
    containerheight = $(".container ul  li").outerHeight() * numbercount;
    $(".container ul").css("height", containerheight);
    var timer = setTimeout("callticker()", 100);
}); 

查看此示例

点击这里