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 相关文章推荐
javascript eval(func())使用示例
Dec 05 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
JS实现页面炫酷的时钟特效示例
Aug 14 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python让列表倒序输出的实例
2018/06/25 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
小松树教学反思
2014/02/11 职场文书
医院院务公开实施方案
2014/05/03 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
银行贷款收入证明
2014/10/17 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python