只记录了本人需要用到的,转载自http://www.yaosansi.com/post/1309.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
创建人:牛腩
创建时间:2009-1-12 11:59:55
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<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 type="text/javascript" src="/js/jquery.pack.js"></script>
<script type="text/javascript">
$.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();
}
})
$(document).ready(function() {
$("#scrollDiv").Scroll({ line: 4, speed: 500, timer: 3000 });
});
</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>
</body>
</html>
分享到:
相关推荐
基于jQuery的一个无间隔滚动效果,代码简单,可以随意设置每次滚动的行数和停隔时间等,用于在网站首页滚动最新动态等非常实用、好看
jQuery,滚动,jQuery 子级元素在父级元素内滚动
CSS+jQuery箭头控制图文左右滚动代码。
一、左右轮播,滚动持续0.6秒,滚动延迟3秒,滚动效果swing,初始焦点第1张,点选按键自动隐藏,按键边框半径(IE8-只方不圆)5px(以上各项为默认设置值) 二、上下轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果...
jquery无间隔连续滚动,代码简单一看便会。
jQuery实现列表自动滚动循环滚动展示新闻,鼠标悬停时停止滚动并提示,离开后,继续滚动,实现的代码如下,需要的朋友可以看看
jquery文本单行多行滚动特效。 1、文本列表一行或多行间隔滚动。 2、可以设置滚动的速度与间隔时间。 3、jquery特效兼容浏览器。
jquery自下而上循环滚动table
jQuery响应式图片滚动插件按钮控制图片滚动
jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告
jquery向上无缝滚动单行向上滚动!!!!!!
jQuery表格自动向上滚动代码,鼠标悬浮停止,离开自动继续滚动 jQuery表格自动向上滚动代码,鼠标悬浮停止,离开自动继续滚动
用jQuery实现的上下滚动公告栏。主要用jQuery中的animate()方法和setInterval()实现的,代码简单使用。
jQuery图文左右滚动代码(箭头控制)
jQuery,滚动背景,jQuery实现滚动背景,图片背景滚动!
jQuery ui页面全屏滚动fullPage.js插件页面滚动 jQuery ui页面全屏滚动fullPage.js插件页面滚动
jquery图片左右滚动按钮控制图片左右滚动效果代码
jQuery左右图片自动滚动特效,滚动图片数量不限,js已经做了自动判断,当低于滚动数量时,取消自动滚动。
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
jQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航...