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 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
JS 控制CSS样式表
Aug 20 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
vue一步步实现alert功能
Jul 05 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
python搜索指定目录的方法
2015/04/29 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
新浪网技术部笔试题
2016/08/26 面试题
运动会通讯稿100字
2014/01/31 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
小学教师见习总结
2015/06/23 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang