textSlider多行文字滚动jQuery插件特效代码

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

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

以下是 textSlider多行文字滚动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=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为textSlider多行文字滚动jQuery插件，属于站长常用代码" />
<title>textSlider多行文字滚动jQuery插件</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.textSlider.js"></script>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{ overflow:auto}
.scrollText{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid; float:left;overflow:hidden}
.scrollText li{height:25px;padding-left:10px;}
.up{ margin-left:310px; width:50px; height:50px; background:#F90}
.down{ margin:0 0 0 310px; zoom:1; width:50px; height:50px; background:#960}
</style>
</head>
<body>
<!-- 代码 开始 -->
<p>textSlider多行文字滚动插件（jQuery)：</p>
<div id="scrollDiv">
<div class="scrollText">
  <ul style="margin-top: 0px; ">
      <li>这是公告标题的第一行</li><li>这是公告标题的第二行</li><li>这是公告标题的第三行</li><li>这是公告标题的第四行</li><li>这是公告标题的第五行</li><li>这是公告标题的第六行</li><li>这是公告标题的第七行</li><li>这是公告标题的第八行</li><li>这是公告标题的九行</li><li>这是公告标题的第十行</li><li>这是公告标题的第十一行</li><li>这是公告标题的第十二行</li><li>内容 搜集整理</li>
  </ul>
</div>
<div class="up" style="cursor: pointer; ">UP</div>
<div class="down" style="cursor: pointer; ">down</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#scrollDiv").textSlider({line:4,speed:500,timer:3000});
});
</script>
</body>
</html>

JS代码(jQuery.textSlider.js):

/** * @author feiwen */
(function($){
	$.fn.textSlider = function(settings){
	settings = jQuery.extend({
	speed:"normal",line:2,timer:1000}
,settings);
	return this.each(function(){
	$.fn.textSlider.scllor( $( this ),settings );
}
);
}
;
	$.fn.textSlider.scllor = function($this,settings){
	//alert($this.html());
	var ul = $( "ul:eq(0)",$this );
	var timerID;
	var li = ul.children();
	var _btnUp=$(".up:eq(0)",$this)var _btnDown=$(".down:eq(0)",$this)var liHight=$(li[0]).height();
	var upHeight=0-settings.line*liHight;
	//滚动的高度；var scrollUp=function(){
	_btnUp.unbind("click",scrollUp);
	ul.animate({
	marginTop:upHeight}
,settings.speed,function(){
	for(i=0;
	i<settings.line;
	i++){
	//$(li[i]).appendTo(ul);
	ul.find("li:first").appendTo(ul);
	// alert(ul.html());
}
ul.css({
	marginTop:0}
);
	_btnUp.bind("click",scrollUp);
	//Shawphy:绑定向上按钮的点击事件}
);
}
;
	var scrollDown=function(){
	_btnDown.unbind("click",scrollDown);
	ul.css({
	marginTop:upHeight}
);
	for(i=0;
	i<settings.line;
	i++){
	ul.find("li:last").prependTo(ul);
}
ul.animate({
	marginTop:0}
,settings.speed,function(){
	_btnDown.bind("click",scrollDown);
	//Shawphy:绑定向上按钮的点击事件}
);
}
;
	var autoPlay=function(){
	timerID = window.setInterval(scrollUp,settings.timer);
	//alert(settings.timer);
}
;
	var autoStop = function(){
	window.clearInterval(timerID);
}
;
	//事件绑定ul.hover(autoStop,autoPlay).mouseout();
	_btnUp.css("cursor","pointer").click( scrollUp );
	_btnUp.hover(autoStop,autoPlay);
	_btnDown.css("cursor","pointer").click( scrollDown );
	_btnDown.hover(autoStop,autoPlay)}
;
}
)(jQuery);

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