<!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://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.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="btn2">向上</span> <span id="btn1">向下</span>
</body>
</html>
分享到：
相关推荐
`来获取当前的顶部位置，然后在点击按钮时进行比较和调整。 6. **停止动画**：为了防止多个点击事件同时触发动画，可以使用`.stop()`方法来停止当前的动画，确保每次只执行一个动画过程。 7. **回调函数**：在`....
标题“图片上下滚动带按钮”描述的是一个网页或应用程序中的交互设计功能，用户可以通过点击页面上下的两个按钮来实现图片的上下滚动。这种设计常见于图片展示、产品介绍或者滑动浏览场景，使得用户可以方便地查看...
【箭头按钮控制jQuery图文上下滚动切换特效】是一种常见的网页交互设计，主要应用于展示多条图文信息，并通过箭头按钮实现上下滚动切换，为用户提供友好的浏览体验。这种特效在新闻、博客、产品展示等场景中非常常见...
标题中的“可做菜单用，效果为点击按钮上下移动菜单”描述了一种特殊的轮播图实现方式，它不是通过自动滑动，而是用户通过点击按钮来手动控制菜单的上下移动。 这种设计有以下几个关键知识点： 1. **轮播图原理**...
可控制的滚动意味着开发者可以自定义滚动行为，例如设置特定元素的滚动事件，使得用户点击按钮就能实现页面的上下滚动。这种功能常见于单页应用（SPA）或是长滚动设计中，以提供更流畅的用户体验。开发者可以使用...
3. **jQuery操作**：在JavaScript中，主要通过jQuery选择器获取到DOM元素，然后绑定点击事件到控制按钮上。当按钮被点击时，会执行相应的函数，这个函数会处理两个列表之间的数据转移。常见的做法是，首先找到被选中...
在网页设计中，实现“图片上下滚动带控制按钮”是一种常见的动态效果，它能为用户提供更直观、便捷的浏览体验。这种效果尤其适用于展示多张图片的场景，如产品展示、摄影集或画廊等。下面我们将深入探讨如何实现这个...
滑动条的上下调节按钮是在原有滑动条基础上增加的功能，允许用户通过点击按钮快速地增大或减小值。这在需要精细调节或者快速跳跃到某一定位的场景下特别有用。实现这一功能可能需要在JavaScript中添加事件监听器，当...
《jQuery实现图片上下滑动切换详解》 在网页设计中，动态效果的运用可以极大地提升用户体验，其中图片的上下滑动切换是一种常见的交互方式。本文将深入探讨如何使用jQuery库来实现这一功能，帮助读者理解并掌握这一...
【CSS3按钮悬停上下滑动动画展开特效】是一种创新且引人注目的网页交互设计，它利用了CSS3的强大功能来实现动态效果。在网页设计中，按钮是用户与界面交互的重要元素，一个吸引人的按钮动画能提升用户体验，使网站...
这个"jQuery新闻图片上下滚动切换代码.zip"压缩包包含了一个使用jQuery实现的新闻图片滚动切换效果，特别适合用于网站的新闻展示或者产品展示区域，以吸引用户的注意力并提供动态的用户体验。 首先，我们要理解...
首先，单排图片上下滚动是指在网页的一行（或一列）内展示图片，并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的网页空间可以展示更多的图片信息，同时保持页面布局的整洁。在JavaScript中...
在易语言中，"标签上下滚动"是一个常见的用户界面（UI）效果，常用于显示大量文本信息时，避免因信息过多而无法完全展示。 "标签"在软件开发中通常指的是一个可以显示固定或动态文本的控件，如Windows操作系统中的...
在JavaScript中，实现点击按钮图片上下滚动的效果是一个常见的交互功能，常常用于轮播图或滚动展示内容。这个示例展示了如何通过JavaScript事件响应和页面元素属性动态操作来达到这一目的。下面我们将详细讨论这个...
"jquery文字上下滚动"是jQuery应用的一个常见功能，常用于网站新闻更新、滚动公告或者滚动字幕等场景，为用户提供动态且吸引人的视觉效果。 要实现jQuery文字上下滚动的效果，首先需要在页面中引入jQuery库。这通常...
在本例中，我们关注的是使文本向上滚动的jQuery实现，同时具备上下翻转按钮，用户可以通过点击这些按钮来控制滚动方向。 要创建这样的插件，我们需要遵循以下步骤： 1. **基础结构**：首先，确保引入jQuery库到你...
在uni-app中，开发一个具备自定义文案和上下滑动选择日期功能的日历组件，可以大大提升用户体验。下面将详细解释这个组件的相关知识点。 1. **uni-app框架**：uni-app是一个基于Vue.js的开发框架，它的核心思想是...
这时，我们可以利用JavaScript来实现div内的滚动效果，并通过按钮来控制滚动的上下方向。这种功能常用于新闻滚动、公告栏等场景，能有效提升用户体验，使信息展示更加动态。 【实现原理】 1. **CSS布局**：首先，...
通过上下滚动切换，用户可以轻松浏览多个内容区块，而无需点击单独的链接或按钮。 首先，我们要理解jQuery的核心概念：选择器（Selectors）、DOM操作（DOM Manipulation）和事件处理（Event Handling）。在这个特效...