/**
文字滚动
**/
var WordScroll = function (area, list, options) {
this._init(area, list, options);
};
WordScroll.prototype = {
_init: function (area, list, options) {
this.area = $(area);
this.list = $(list);
this._setOptions(options);
this.speed = this.options.speed;
this.step = this.options.step;
this.index = 1;
this.num = this.list.find("li").length;
},
_start: function () {
var self = this;
setInterval(function () {
self._run();
}, this.speed);
},
_run: function () {
if (this.index < this.num) {
this.index++;
this.list.animate({ "marginTop": "-=" + this.step }, 500);
} else {
this.index = 1;
this.list.animate({ "marginTop": 0 }, 1);
}
},
_setOptions: function (options) {
this.options = {
speed: 1,
step: 0
};
$.extend(this.options, options);
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.area
{
width: 400px;
height: 50px;
border: solid 1px #000000;
line-height: 50px;
padding: 0px 10px;
overflow: hidden;
}
.area *
{
margin: 0px;
padding: 0px;
}
.area ul li
{
list-style: none;
padding: 0px 10px;
}
.arealist
{
margin-top: -0px;
}
</style>
</head>
<body>
<div class="area">
<ul class="arealist">
<li>新闻一</li>
<li>新闻二</li>
<li>新闻三</li>
</ul>
</div>
</body>
</html>
<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../js/jone.js" type="text/javascript"></script>
<script src="WordScroll.js" type="text/javascript"></script>
<script type="text/javascript">
var _wordScroll = new WordScroll(".area", ".arealist", { "speed": 1500, "step": "50" });
_wordScroll._start();
</script>
