jQuery带按钮向上滚动向下滚动代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带按钮向上滚动向下滚动代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带按钮向上滚动向下滚动代码</title>
<style type="text/css">
body{ color:#333; font-size:13px;}
h3,ul,li{margin:0;padding:0; list-style:none;}
.scrollbox{ width: 340px; margin: 0 auto; overflow: hidden; border: 1px solid #CFCFCF; padding: 10px; }
#scrollDiv{width:340px;height:359px; overflow:hidden;}/*这里的高度和超出隐藏是必须的*/
#scrollDiv li{height:90px; width:300px; padding:0 20px;background:url(ico-4.gif) no-repeat 10px 23px; overflow:hidden; vertical-align:bottom; zoom:1; border-bottom:#B7B7B7 dashed 1px;}
#scrollDiv li h3{ height:24px; padding-top:13px; font-size:14px; color:#353535; line-height:24px; width:300px;}
#scrollDiv li h3 a{color:#353535; text-decoration:none}#scrollDiv li h3 a:hover{ color:#F00}
#scrollDiv li div{ height:36px; width:300px; color:#416A7F; line-height:18px; overflow:hidden}
#scrollDiv li div a{ color:#416A7F; text-decoration:none}

.scroltit{ height:26px; line-height:26px; padding-bottom:4px; margin-bottom:4px;}
.scroltit h3{ width:100px; float:left;}
.scroltit .updown{float:right; width:32px; height:22px; margin-left:4px}
#but_up{ background:url(images/up.gif) no-repeat 0 0; text-indent:-9999px}
#but_down{ background:url(images/down.gif) no-repeat 0 0; text-indent:-9999px}


#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
</style>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jq_scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#scrollDiv").Scroll({line:1,speed:500,timer:3000,up:"but_up",down:"but_down"});
});
</script>
</head>
<body>
<p align="center"><strong>特效效果如下：</strong></p>
<p>&nbsp;</p>
<div class="scrollbox">
    <div id="scrollDiv">
        <ul>
            <li><h3><a href="#" class="linktit">移动娱乐业务突飞</a></h3> <div>为了探索推进公车改革后，新能源汽车分时租赁项目试点工作，并成立了试点工作小组... </div></li>
            <li><h3><a href="#" class="linktit">不停转动向上滚动可控制向上向下滚动特效</a></h3> <div>DIV CSS JS自动不断向上一个一个滚动可控制向上向下滚动特效... </div></li>
            <li><h3><a href="#" class="linktit">全国涂料总产量呈现直线下滑态势</a></h3> <div>我国涂料工业将面临涂料消费税征收全面铺开，环保压力持续增加，2015年的形势不容乐观... </div></li>
            <li><h3><a href="#" class="linktit">镂空渔网超吸睛</a></h3> <div>镂空罩衫，短短的版型穿起来显高又俏皮，内搭长款连衣裙，非常大方哦... </div></li>
            <li><h3><a href="#" class="linktit">主题创业街亮相</a></h3> <div>目前已有包括咖啡厅、酒吧、餐厅、瑜伽室在内的8家商铺入驻该火车... </div></li>
        </ul>
    </div>
    <div class="scroltit"><div class="updown" id="but_down">向上</div><div class="updown" id="but_up">向下</div></div>
</div>
</body>
</html>

JS代码(jq_scroll.js):

/*jQ向上滚动带上下翻页按钮*/
(function($){
	$.fn.extend({
	Scroll:function(opt,callback){
	//参数初始化 if(!opt) var opt={
}
;
	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;
	//滚动的时间间隔（毫秒） if(line==0) line=1;
	var upHeight=0-line*lineH;
	//滚动函数 var scrollUp=function(){
	_btnUp.unbind("click",scrollUp);
	//Shawphy:取消向上按钮的函数绑定 _this.animate({
	marginTop:upHeight}
,speed,function(){
	for(i=1;
	i<=line;
	i++){
	_this.find("li:first").appendTo(_this);
}
_this.css({
	marginTop:0}
);
	_btnUp.bind("click",scrollUp);
	//Shawphy:绑定向上按钮的点击事件}
);
}
//Shawphy:向下翻页函数 var scrollDown=function(){
	_btnDown.unbind("click",scrollDown);
	for(i=1;
	i<=line;
	i++){
	_this.find("li:last").show().prependTo(_this);
}
_this.css({
	marginTop:upHeight}
);
	_this.animate({
	marginTop:0}
,speed,function(){
	_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);

附件:下载该文件资源,减少时间成本(增值服务)