jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!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 文字滚动大全 单行滚动 多行滚动 带按钮控制滚动 www.mb5u.com</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.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="http://www.mb5u.com/">jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式</a></li>
<li><a href="http://www.mb5u.com/">jquery 图片切换 switchable 带左右按钮控制分页索引图片切换</a></li>
<li><a href="http://www.mb5u.com/">jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、表单验证等</a></li>
<li><a href="http://www.mb5u.com/">jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等</a></li>
<li><a href="http://www.mb5u.com/">jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框</a></li>
<li><a href="http://www.mb5u.com/">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
<li><a href="http://www.mb5u.com/">jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图</a></li>
<li><a href="http://www.mb5u.com/">jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放</a></li>
</ul>
</div><!--scrollDiv end-->
<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="http://www.mb5u.com/">jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡</a></li>
<li><a href="http://www.mb5u.com/">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></li>
<li><a href="http://www.mb5u.com/">jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效</a></li>
<li><a href="http://www.mb5u.com/">jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效</a></li>
<li><a href="http://www.mb5u.com/">jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示</a></li>
<li><a href="http://www.mb5u.com/">jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide</a></li>
<li><a href="http://www.mb5u.com/">jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效</a></li>
<li><a href="http://www.mb5u.com/">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="http://www.mb5u.com/">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a></li>
<li><a href="http://www.mb5u.com/">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
<li><a href="http://www.mb5u.com/">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
<li><a href="http://www.mb5u.com/">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
<li><a href="http://www.mb5u.com/">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
<li><a href="http://www.mb5u.com/">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
<li><a href="http://www.mb5u.com/">jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效</a></li>
<li><a href="http://www.mb5u.com/">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><!--demopage end-->
</body>
</html>
jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动的更多相关文章
- jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML特效文字代码大全
HTML特效文字代码大全一.从右向左移代码<marquee direction=left>需要移动的文字</marquee>二.从左向右移代码<marquee dire ...
- zTree -- jQuery 树插件实现点击文字展开子节点
新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- PHP加水印代码 支持文字和图片水印
PHP加图片水印.文字水印类代码,PHP加水印类,支持文字图片水印的透明度设置.水印图片背景透明.自己写的一个类,因为自己开发的一套CMS中要用到,网上的总感觉用着不顺手,希望大家也喜欢这个类,后附有 ...
- 《网页文档/文字复制方法大全》 - imsoft.cnblogs
<网页文档/文字复制方法大全> 一: 1.首先,找到自己要的文档. 2.文章题目复制,在搜索引擎的框框里输入:site:wenku.baidu.com "题目"/sit ...
- jQuery获取radio选中后的文字
原文链接:http://blog.csdn.net/zhanyouwen/article/details/51393216 jQuery获取radio选中后的文字转载 2016年05月13日 10:3 ...
- [转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
- WPF文字描边的解决方法（二）——支持文字竖排和字符间距调整
原文:WPF文字描边的解决方法(二)--支持文字竖排和字符间距调整 自前天格式化文本效果出来后,今天又添加文本竖排和调整字符间距的功能.另外,由于上次仓促,没来得及做有些功能的设计时支持,这次也调整好 ...
随机推荐
- chrome浏览器调试报错：Failed to load resource: the server responsed width a status of 404 (Not Found)…http://127.0.0.1:5099/favicon.ico
chrome浏览器在调试的时候默认会查找根目录下的favicon.ico文件,如果不存在就会报错. 解决办法:F12,点击<top frame>左侧漏斗形状的filter,勾选上" ...
- 利用进程ID获取主线程ID
利用进程ID获取主线程ID,仅适用于单线程.多线程应区分哪个是主线程,区分方法待验证 (1)好像可以用StartTime最早的,不过通过线程执行时间不一定可靠,要是在最开始就CreateThread了 ...
- 利用Ffmpeg获得flv视频缩略图和视频时间的代码
问题描述:获得flv视频的缩略图和视频时间长度 谷歌了半天发现可以使用Ffmpeg获得视频的一些信息,先介绍一下FFMEPG 这里简单说一下:FFmpeg是用于录制.转换和流化音频和视频的完整解决方案 ...
- C#编程（小结）---------- 小总结
总结 概括 委托是寻址方法的.NET版本,类似于C++中的指针.委托可以理解为指向函数的指针,它是类型安全的,定义了具体的参数和返回值. 定义一个委托,实际上是定义一个类,委托是对方法的引用,如方法F ...
- 手工Ghost安装系统
(1)其实手工ghost很简单,正确操作的话是不会有什么问题的,在PE下,打开ghost程序 (2)按任意键进入ghost操作界面,出现ghost菜单,我们现在只用到Local菜单项,下面有三个子项: ...
- [转]mysqldump备份还原和mysqldump导入导出语句大全详解
FROM : http://www.cnblogs.com/zeroone/archive/2010/05/11/1732834.html mysqldump备份还原和mysqldump导入导出语句大 ...
- PHP xhprof性能优化
xhprof window http://dev.freshsite.pl/php-extensions/xhprof.html http://php.net/manual/en/book.xhpro ...
- react-router的browserHistory/react-router-dom的BrowserRouter刷新页面404问题解决
前端解决: '/' 表示把所有的url都发给代理https://api.example.com bypass 表示不需要发给发给代理服务器的条件 如下配置,可以监听https://api.exampl ...
- Linux Command : top
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程所占用的系统资源,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷 ...
- 在IIS上SSL的部署和启动SSL安全【转】
在这次的项目中遇见了这个问题,之前我并懂了不了多少,只对了SSL和HTTPS理论了解.但并不知道在实际中如何运行.经过自己在网上查阅一番,最后靠自己解决了这个问题,现在在这里和大家分享一下.如果写的有 ...