jquery 文字轮播 

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>jquery 文字滚动大全 单行滚动 多行滚动 带按钮控制滚动 转载->http://www.jq22.com </title>
  6 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  7 <style type="text/css">
  8 * {
  9     margin: 0;
 10     padding: 0;
 11 }
 12 ul, li {
 13     list-style-type: none;
 14 }
 15 body {
 16     font: 12px/180% Arial, Helvetica, sans-serif;
 17 }
 18 a {
 19     color: #333;
 20     text-decoration: none;
 21 }
 22 a:hover {
 23     color: #3366cc;
 24     text-decoration: underline;
 25 }
 26 .demopage {
 27     width: 730px;
 28     margin: 0 auto;
 29 }
 30 .demopage h2 {
 31     font-size: 14px;
 32     margin: 20px 0;
 33 }
 34 /* scrollDiv */
 35 .scrollDiv {
 36     height: 25px;/* 必要元素 */
 37     line-height: 25px;
 38     border: #ccc 1px solid;
 39     overflow: hidden;/* 必要元素 */
 40 }
 41 .scrollDiv li {
 42     height: 25px;
 43     padding-left: 10px;
 44 }
 45 #s2, #s3 {
 46     height: 100px;
 47 }
 48 </style>
 49 
 50 </head>
 51 
 52 <body>
 53 <div class="demopage">
 54   <h2>jquery 文字上下滚动--单行 批量多行 文字图片上下翻滚 | 单行滚动  <a href="#blog/" style="color:#f70">@by wangbaoguo88@126.com</a></h2>
 55   <div class="scrollDiv" id="s1">
 56     <ul>
 57       <li><a href="#">jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式</a></li>
 58       <li><a href="#">jquery 图片切换 switchable 带左右按钮控制分页索引图片切换</a></li>
 59       <li><a href="#">jquery powerFloat万能浮动框提示插件 支字、ajax异步加载、表单验证等</a></li>
 60       <li><a href="#">jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等</a></li>
 61       <li><a href="#">jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框</a></li>
 62       <li><a href="#">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
 63       <li><a href="#">jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图</a></li>
 64       <li><a href="#">jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放</a></li>
 65     </ul>
 66   </div>
 67   <!--scrollDiv end--> 
 68   <script type="text/javascript">
 69         function AutoScroll(obj) {
 70             $(obj).find("ul:first").animate({
 71                 marginTop: "-25px"
 72             }, 500, function() {
 73                 $(this).css({
 74                     marginTop: "0px"
 75                 }).find("li:first").appendTo(this);
 76             });
 77         }
 78         $(document).ready(function() {
 79             setInterval('AutoScroll("#s1")', 3000);
 80         });
 81 </script>
 82   <h2>jquery 文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动 </h2>
 83   <div class="scrollDiv" id="s2">
 84     <ul>
 85       <li><a href="#">jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡</a></li>
 86       <li><a href="#">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></li>
 87       <li><a href="#">jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效</a></li>
 88       <li><a href="#">jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效</a></li>
 89       <li><a href="#">jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示</a></li>
 90       <li><a href="#">jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide</a></li>
 91       <li><a href="#">jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效</a></li>
 92       <li><a href="#">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
 93     </ul>
 94   </div>
 95   <script type="text/javascript">
 96         //滚动插件
 97         (function($) {
 98             $.fn.extend({
 99                 Scroll: function(opt, callback) {
100                     //参数初始化
101                     if (!opt) var opt = {};
102                     var _this = this.eq(0).find("ul:first");
103                     var lineH = _this.find("li:first").height(), //获取行高
104                         line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
105                         speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）
106                         timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）
107                     if (line == 0) line = 1;
108                     var upHeight = 0 - line * lineH;
109                     //滚动函数
110                     scrollUp = function() {
111                         _this.animate({
112                             marginTop: upHeight
113                         }, speed, function() {
114                             for (i = 1; i <= line; i++) {
115                                 _this.find("li:first").appendTo(_this);
116                             }
117                             _this.css({
118                                 marginTop: 0
119                             });
120                         });
121                     }
122                     //鼠标事件绑定
123                     _this.hover(function() {
124                         clearInterval(timerID);
125                     }, function() {
126                         timerID = setInterval("scrollUp()", timer);
127                     }).mouseout();
128                 }
129             });
130         })(jQuery);
131 
132         $(document).ready(function() {
133             $("#s2").Scroll({
134                 line: 4,
135                 speed: 500,
136                 timer: 4000
137             });
138         });
139 </script>
140  
141  
142  
143   <h2>jquery 上下滚动--单行 批量多行 文字图片上下翻滚 | 可控制向前向后的多行滚动</h2>
144   <div class="scrollDiv" id="s3">
145     <ul>
146       <li><a href="#">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a></li>
147       <li><a href="#">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
148       <li><a href="#">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
149       <li><a href="#">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
150       <li><a href="#">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
151       <li><a href="#">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
152       <li><a href="#">jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效</a></li>
153       <li><a href="#">jquery 图片幻灯片仿IBM首页焦点图切换，类似flash动态效果图片切换</a></li>
154     </ul>
155   </div>
156   <span id="btn1" style="color: #F8893E">点击向上滚动</span>&nbsp;&nbsp;<span id="btn2" style="color: #F8893E">点击向下滚动</span> 
157   <script type="text/javascript">
158         (function($) {
159             $.fn.extend({
160                 Scroll: function(opt, callback) {
161                     //参数初始化
162                     if (!opt) var opt = {};
163                     var _btnUp = $("#" + opt.up); //Shawphy:向上按钮
164                     var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
165                     var timerID;
166                     var _this = this.eq(0).find("ul:first");
167                     var lineH = _this.find("li:first").height(), //获取行高
168                         line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
169                         speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒）
170                     timer = opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
171                     if (line == 0) line = 1;
172                     var upHeight = 0 - line * lineH;
173                     //滚动函数
174                     var scrollUp = function() {
175                         _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定
176                         _this.animate({
177                             marginTop: upHeight
178                         }, speed, function() {
179                             for (i = 1; i <= line; i++) {
180                                 _this.find("li:first").appendTo(_this);
181                             }
182                             _this.css({
183                                 marginTop: 0
184                             });
185                             _btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件
186                         });
187 
188                     }
189                     //Shawphy:向下翻页函数
190                     var scrollDown = function() {
191                         _btnDown.unbind("click", scrollDown);
192                         for (i = 1; i <= line; i++) {
193                             _this.find("li:last").show().prependTo(_this);
194                         }
195                         _this.css({
196                             marginTop: upHeight
197                         });
198                         _this.animate({
199                             marginTop: 0
200                         }, speed, function() {
201                             _btnDown.bind("click", scrollDown);
202                         });
203                     }
204                     //Shawphy:自动播放
205                     var autoPlay = function() {
206                         if (timer) timerID = window.setInterval(scrollUp, timer);
207                     };
208                     var autoStop = function() {
209                         if (timer) window.clearInterval(timerID);
210                     };
211                     //鼠标事件绑定
212                     _this.hover(autoStop, autoPlay).mouseout();
213                     _btnUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay); //Shawphy:向上向下鼠标事件绑定
214                     _btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay);
215 
216                 }
217             })
218         })(jQuery);
219 
220         $(document).ready(function() {
221             $("#s3").Scroll({
222                 line: 4,
223                 speed: 500,
224                 timer: 2000,
225                 up: "btn1",
226                 down: "btn2"
227             });
228         });
229       
230 </script> 
231 </div>
232 <!--demopage end-->
233 </body>
234 </html>

 

posted @ 2019-01-22 12:01  清清沁沁  阅读(1067)  评论(0)    收藏  举报