从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法:

<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:;padding:}
#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="js/jquery-1.4.1.js"></script> <script type="text/javascript">
(function ($) {
$.fn.extend({
Scroll: function (opt, callback) {
//参数初始化
if (!opt) var opt = {};
var _this = this.eq().find("ul:first");
var lineH = _this.find("li:first").height(), //获取行高
line = opt.line ? parseInt(opt.line, ) : parseInt(this.height() / lineH, ), //每次滚动的行数,默认为一屏,即父容器高度
speed = opt.speed ? parseInt(opt.speed, ) : , //卷动速度,数值越大,速度越慢(毫秒)
timer = opt.timer ? parseInt(opt.timer, ) : ; //滚动的时间间隔(毫秒)
if (line == ) line = ;
var upHeight = - line * lineH;
var downHeight=line * lineH - ;
//滚动函数
scrollUp = function () {
_this.animate(
{ marginTop: upHeight },
speed,
function () {
for (i = ; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css({ marginTop: });
}
);
},
//向下滚动函数
scrollDown = function () {
_this.animate(
{ marginTop: downHeight },//动画展示css样式
speed,
function () {
_this.find("li:last").prependTo(_this);
_this.css({ marginTop: });
}
)
}
var timerID
//鼠标事件绑定
_this.hover(function () {
clearInterval(timerID);
}, function () {
timerID = setInterval("scrollDown()", timer);//这里调用向下或者向上滚动函数
}).mouseout();
}
})
})(jQuery); $(document).ready(function () {
$("#scrollDiv").Scroll({ line: , speed: , timer: });
});
</script>
</head> <body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第1行</li>
<li>这是公告标题的第2行</li>
<li>这是公告标题的第3行</li>
<li>这是公告标题的第4行</li>
<li>这是公告标题的第5行</li>
<li>这是公告标题的第6行</li>
<li>这是公告标题的第7行</li>
<li>这是公告标题的第8行</li>
</ul>
</div>
</body>
</html>

jquery实现自动滚屏效果,适用用公告新闻等滚屏的更多相关文章

  1. 帆软报表(finereport)实现自动滚屏效果

    例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...

  2. FineReport中如何实现自动滚屏效果

    对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在F ...

  3. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  4. 用JQ仿造百度书籍预售页面的单屏滚页效果

    今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上 ...

  5. jquery实现整屏翻屏效果:jquery.mousewheel(一)

    实现整屏上下翻效果:需加载的js <script type="text/javascript" src="js/jquery-1.8.3.min.js"& ...

  6. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  7. 利用jquery.touchSwipe.js实现的移动滑屏效果。

    利用jquery.touchSwipe.js实现的移动滑屏效果. 亲测:兼容ie8及各种浏览器 <script type="text/javascript" src=&quo ...

  8. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  9. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

随机推荐

  1. Latex常用指令学习

    1:\begin{}与\end{}的用法 2:\textcolor{red}{\fangsong\zihao{2}汉字:} 3:\newpage  新的一页 4:\heiti\zihao{4}\bf{ ...

  2. Leetcode: Pacific Atlantic Water Flow

    Given an m x n matrix of non-negative integers representing the height of each unit cell in a contin ...

  3. windows7 professional.iso

    目前使用的笔记本是PC,在重新安装系统的时候,我比较挑剔. 我希望它是原样的,我希望它能够 windows update,拥有 office 2007/2003,它的个人文件夹就原封不动地在默认在 C ...

  4. C++之路进阶——codevs1281(Xn数列)

    1281 Xn数列  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master       题目描述 Description 给你6个数,m, a, c, x0, n, ...

  5. grunt让Nodejs规范起来

    Aug 17, 2013 Tags: gruntJavascriptnodejs Comments: 9 Comments grunt让Nodejs规范起来 从零开始nodejs系列文章,将介绍如何利 ...

  6. jquery之empty()与remove()区别

    要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现.可仔细观察效果的话就可以发现.empty()是只移除了 指定元素中的所有子节点,拿$("p" ...

  7. JS闭包导致循环给按钮添加事件时总是执行最后一个

    加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...

  8. jQuery validation学习(2)验证身份证

    验证邮编 jQuery.validator.addMethod("isZipCode", function(value, element) { -]{}$/; return thi ...

  9. Android中插件开发篇之----动态加载Activity(免安装运行程序)

    一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析 ...

  10. code异常处理

    private void copyPrivateRawResuorceToPubliclyAccessibleFile() { InputStream inputStream = null; File ...