jQuery控制li，文字上下滚动 带停止
时间：2010-09-04 来源：NetSir
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$.fn.extend({
Scroll: function(opt, callback) {
//参数初始化
if (!opt) var opt = {};
var count = 0, it;//count 记录循环次数,it记录总共循环了多少个li
var _btnUp = $("#" + opt.up); //Shawphy:向上按钮
var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
var timerID;
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height(), //获取行高
line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒）
timer = opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
// alert(opt.line);
if (line == 0) line = 1;
var upHeight = 0 - line * lineH;
// alert(upHeight);
//滚动函数
var scrollUp = function() {
_btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定
_this.animate({
marginTop: upHeight
}, speed, function() {
if (count * opt.line +opt.line < document.getElementById('myprofession').getElementsByTagName('li').length) {//获取li总数，比较循环li数与总数
_btnUp.bind("click", scrollUp);
// alert(count * 4);
for (i = 1; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
// alert(count);
it = (count - 1) * opt.line + opt.line;
// alert(it);
} else {
_btnUp.unbind("click"); //Shawphy:取消向下按钮的函数绑定
count = 0;
}
_this.css({ marginTop: 0 });
});
_btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件
count = count + 1;
}
//Shawphy:向下翻页函数
var scrollDown = function() {
_btnDown.unbind("click", scrollDown);
it = it - opt.line;
// _this.css({ marginTop: upHeight });
_this.animate({
marginTop: 0
}, speed, function() {
if (it >= 0) {
for (i = 1; i <= line; i++) {
_this.find("li:last").show().prependTo(_this);
}
} else {
_btnDown.unbind("click", scrollDown);
count = 0;
}
if (it == 0) { _btnDown.unbind("click", scrollDown); count = 0; _btnUp.bind("click",scrollUp); }
_btnDown.bind("click", scrollDown);
});
}
//Shawphy:自动播放
var autoPlay = function() {
//if(timer)timerID = window.setInterval(scrollUp,timer);
};
var autoStop = function() {
//if(timer)window.clearInterval(timerID);
};
//鼠标事件绑定
_this.hover(autoStop, autoPlay).mouseout();
_btnUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay); //Shawphy:向上向下鼠标事件绑定
_btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay);
}
})
})(jQuery);
$(document).ready(function() {
$("#scrollDiv").Scroll({ line: 12, speed: 500, timer: 1000, up: "btn1", down: "btn2" });
});
</script>
<div class="arrow" ><span id="pre2">
<img src="../qimg/up.gif" width="123" height="20" id="btn1" /></span>
</div>
<div class="classify mr10" >
<div id="scrollDiv" style=" overflow:hidden;">
<ul id="myprofession">
<asp:ObjectDataSource ID="ods_getProfessionVideo" runat="server" SelectMethod="getProfessionVideo"
TypeName="JzCode.Web.MultiMedia_List">
</asp:ObjectDataSource>
<asp:Repeater ID="rpt_getProfessionVideo" runat="server" DataSourceID="ods_getProfessionVideo">
<ItemTemplate>
<li><a runat="server" href='<%# Eval("professionID","list.aspx?proid={0}")%>' target="_self"><asp:Literal ID="ltlProfessionName" runat="server" Text='<%# Eval("ProfessionName")%>' />(<span><asp:Label
ID="ltVideoCount" runat="server" Text='<%# Eval("count")%>' /></span>)</a></li>
</ItemTemplate>
</asp:Repeater>//要滚动的li内容
</ul>
</div>
</div>
<div class="arrow" ><span id="next2">
<img src="../qimg/down.gif" width="123" height="20" id="btn2" /></span>
</div>
注：该方法不是很合适，应适当修改
相关阅读 更多 +
