jQuery实现带有上下控制按钮的简单多行滚屏效果代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了jQuery实现带有上下控制按钮的简单多行滚屏效果代码。分享给大家供大家参考。具体如下:

这里使用了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" content="text/html; charset=gb2312" />
<title>用jQuery实现最简单的滚屏效果,加了上下按钮</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 type="text/javascript" src="jquery-1.6.2.min.js"></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:3000,up:"btn1",down:"btn2"});
});
</script>
</head>
<body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
<ul>
<li><a href="" target="_blank">信言企业公司建站程序 v1</a></li>
<li><a href="" target="_blank">EPffms 环保时代ASP家庭财务管理系统 v5.0</a></li>
<li><a href="" target="_blank">jQuery两幅图像动画叠加的效果</a></li>
<li><a href="" target="_blank">Android 滑动提示、菜单及列表等小程序源码</a></li>
<li><a href="" target="_blank">Maxcms 马克斯电影视频系统 v4.0</a></li>
<li><a href="" target="_blank">DedeCms v5.7 GBK</a></li>
<li><a href="" target="_blank">DedeCms v5.7 UTF-8</a></li>
<li><a href="" target="_blank">Piwik PHP站点流量统计系统 v1.2.1</a></li>
</ul>
</div>
<span id="btn2">向上</span>
<span id="btn1">向下</span>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 #Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 #Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 #Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 #Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 #Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 #Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 #Javascript
You might like
php实现邮件发送并带有附件
2014/01/24 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python 操作文件的基本方法总结
2017/08/10 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python数据库小程序源代码
2019/09/15 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python新手学习标准库模块命名
2020/05/29 Python
Python如何合并多个字典或映射
2020/07/24 Python
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
应届生简历中的自我评价
2014/01/13 职场文书
挂科检讨书范文
2014/02/20 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
本科应届生自荐信
2014/06/29 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
校本培训个人总结
2015/02/28 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
硕士论文致谢范文
2015/05/14 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python