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> <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>
原文:https://www.cnblogs.com/ssx314/p/10303069.html