jquery 文字滚动大全单行滚动多行滚动带按钮控制滚

来源：互联网发布：hql和sql的区别编辑：程序博客网时间：2024/04/29 06:57

<!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>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
.demopage{width:960px;margin:0 auto;}
.demopage h2{font-size:14px;margin:20px 0;}
/* scrollDiv */
.scrollDiv{height:25px;/* 必要元素 */line-height:25px;border:#ccc 1px solid;overflow:hidden;/* 必要元素 */}
.scrollDiv li{height:25px;padding-left:10px;}
#s2,#s3{height:100px;}
</style>
</head>

<body>
<div class="demopage">
<h2>jquery 文字上下滚动--单行批量多行文字图片上下翻滚 | 单行滚动</h2>
<div class="scrollDiv" id="s1">
  <ul>
   <li><a href="#">jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式</a></li>
   <li><a href="#">jquery 图片切换 switchable 带左右按钮控制分页索引图片切换</a></li>
   <li><a href="#">jquery powerFloat万能浮动框提示插件支持图片、文字、ajax异步加载、表单验证等</a></li>
   <li><a href="#">jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等</a></li>
   <li><a href="#">jquery 表单美化 jquery tzCheckbox 复选框美化自定义默认复选框</a></li>
   <li><a href="#">jquery HTML5 幻灯片插件用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
   <li><a href="#">jquery 图片放大镜图片类似放大镜效果鼠标滑过小图异步加载中图、大图</a></li>
   <li><a href="#">jquery 图片幻灯片点击小图显示大图异步加载支持按钮播放</a></li>
  </ul>
</div>
<script type="text/javascript">
function AutoScroll(obj){
  $(obj).find("ul:first").animate({
   marginTop:"-25px"
  },500,function(){
   $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
  });
}
$(document).ready(function(){
  setInterval('AutoScroll("#s1")',3000);
});
</script>

<h2>jquery 文字上下滚动--单行批量多行文字图片上下翻滚 | 多行滚动</h2>
<div class="scrollDiv" id="s2">
  <ul>
   <li><a href="#">jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡</a></li>
   <li><a href="#">jquery 文字连续滚动节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></li>
   <li><a href="#">jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效</a></li>
   <li><a href="#">jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效</a></li>
   <li><a href="#">jquery菜单特效鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示</a></li>
   <li><a href="#">jquery 图片切换自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide</a></li>
   <li><a href="#">jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效</a></li>
   <li><a href="#">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
  </ul>
</div>
<script type="text/javascript">
//滚动插件
(function($){
  $.fn.extend({
   Scroll:function(opt,callback){
     //参数初始化
     if(!opt) var opt={};
     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;
     //滚动函数
     scrollUp=function(){
       _this.animate({
         marginTop:upHeight
       },speed,function(){
         for(i=1;i<=line;i++){
           _this.find("li:first").appendTo(_this);
         }
         _this.css({marginTop:0});
       });
     }
     //鼠标事件绑定
     _this.hover(function(){
       clearInterval(timerID);
     },function(){
       timerID=setInterval("scrollUp()",timer);
     }).mouseout();
   }
  });
})(jQuery);

$(document).ready(function(){
  $("#s2").Scroll({line:4,speed:500,timer:4000});
});
</script>

<h2>jquery 上下滚动--单行批量多行文字图片上下翻滚 | 可控制向前向后的多行滚动</h2>
<div class="scrollDiv" id="s3">
  <ul>
   <li><a href="#">jquery colorpicker 插件颜色选择器点击颜色选择颜色值与颜色相应变化</a></li>
   <li><a href="#">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
   <li><a href="#">jquery图片切换滚动水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
   <li><a href="#">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
   <li><a href="#">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
   <li><a href="#">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
   <li><a href="#">jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效</a></li>
   <li><a href="#">jquery 图片幻灯片仿IBM首页焦点图切换，类似flash动态效果图片切换</a></li>
  </ul>
</div>
<span id="btn1" >点击向上滚动</span>  <span id="btn2">点击向下滚动</span>
<script type="text/javascript">
(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);

$(document).ready(function(){
  $("#s3").Scroll({line:4,speed:500,timer:2000,up:"btn1",down:"btn2"});
});
</script>

</div>
</body>
</html>

0 0

jquery 文字滚动大全 单行滚动 多行滚动 带按钮控制滚

jquery 文字滚动大全单行滚动多行滚动带按钮控制滚