jquery 文字轮播
2024-03-29 04:08:50
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
jquery 文字轮播相关推荐
- jQuery百叶窗轮播图插件
下载地址 这款jQuery图片轮播插件提供了多种百叶窗风格的图片切换方式,每一种百叶窗风格都是随机产生的.另外这款jQuery多百叶窗风格切换焦点图插件支持悬浮文字描述,同时也支持自动播放.相信它可以 ...
- html图片与文字轮播,我是这样写文字轮播的
原标题:我是这样写文字轮播的 作者:一半水一半冰 原文:http://www.cnblogs.com/jingh/p/6377736.html 1写在前面 最近总结下之前的工作,才恍然发现时间的流逝永 ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- jQuery图片轮播(焦点图)插件(转载）
本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments 特点:兼容IE6+,Chrome,Firefox,Opera,saf ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- html轮播鼠标悬停效果,jQuery图片轮播加悬停效果
插件描述:jQuery图片轮播加悬停效果 =======以下内容由会员 只看不发了 提供============ 使用方法 1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面 ...
- 支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
- jQuery实现轮播（jQuery究竟有多好用）
jQuery实现轮播功能 完整代码 <!DOCTYPE html> <html lang="en"><head><meta charset ...
- ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告)
ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告) 广告条目可以单独写成布局文件,然后在布局文件或者代码中添加到总布局中 从源码可以看出,其实ViewFlipper间接的继承了FrameLa ...
最新文章
- 江苏省三级偏硬试题样卷
- 比尔.盖茨人生的四张面孔
- hdu2155 小黑的镇魂曲(dp)
- 推荐一个比较好的SQL工具——SQL Prompt
- 操作系统：再见CentOS，将于本月底终止维护！
- mysql存储过程 等于_mysql存储过程字符串等于
- 软件评測师真题考试分析-5
- 关于fftshift引发的问题与思考
- PHP爬虫最全总结1
- 理论+实验：Apache网页与安全优化（网页压缩、网页缓存、隐藏版本信息、网页图片防盗链）
- 日期时间编辑器（模拟QDateTimeEdit的自定义控件）——QML
- 关于python使用系统命令反弹shell的一点记录
- YUV播放器支持10bit视频
- iphone健康数据统计_如何控制哪些应用程序可以访问iPhone的健康数据
- php数据group去重,MongoDB_Mongodb聚合函数count、distinct、group如何实现数据聚合操作， 上篇文章给大家介绍了Mong - phpStudy...
- DirectX 9.0笔记]第一章 初始化 Direct3D
- 浅谈filter中的chain.doFilter(request, response)的作用
- Unity2019中的android动态申请权限（Permissions）
- HC06蓝牙2.0模块连接不稳定 和 STM32串口不传输数据（串口接收中断）的一些问题
- [摘录]优势谈判简述