jquery滚动特效集锦


Posted in Javascript onJune 03, 2015

jquery单行滚动、批量多行滚动、文字图片翻屏滚动效果代码,需要的朋友可以参考下。

以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果。

一、单行滚动效果

<!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" c />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://img.3water.com/jslib/jquery/jquery14.js" type="text/javascript"></script>
<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("#scrollDiv")',1000)
});
</script>
</head>
<body>
<div id="scrollDiv">
<ul>
<li>百度 www.baidu.com</li>
<li>三水点靠木 3water.com</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

二,多行滚动效果

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://img.3water.com/jslib/jquery/jquery14.js" type="text/javascript"></script>
<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(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:1000});
});
</script>
</head>
<body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
<ul>
<li>百度 www.baidu.com</li>
<li>三水点靠木 3water.com</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

三、可控制向前向后的多行滚动

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://img.3water.com/jslib/jquery/jquery14.js" type="text/javascript"></script>
<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(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"});
});
</script>
</head>
<body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
<span id="btn1">向前</span> <span id="btn2">向后</span>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
jQuery实现文本展开收缩特效
Jun 03 #Javascript
jQuery插件制作之参数用法实例分析
Jun 01 #Javascript
jQuery插件制作之全局函数用法实例
Jun 01 #Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 #Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 #Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 #Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 #Javascript
You might like
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python实现的计数排序算法示例
2017/11/29 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python验证身份证信息实例代码
2019/05/06 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
家长对学生的评语
2014/04/18 职场文书
买房协议书范本
2014/10/23 职场文书
惊天动地观后感
2015/06/10 职场文书