jQuery实现公告新闻自动滚屏效果实例代码

本文是小编参考网络上的一个小demo，自己做了下扩展，原来是向上滚动的，扩展了一个向下滚动的方法，具体实例代码如下所示：

<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="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(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) : 2000; //滚动的时间间隔（毫秒）
if (line == 0) line = 1;
var upHeight = 0 - line * lineH;
var downHeight=line * lineH - 0;
//滚动函数
scrollUp = function () {
_this.animate(
{ marginTop: upHeight },
speed,
function () {
for (i = 1; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css({ marginTop: 0 });
}
);
},
//向下滚动函数
scrollDown = function () {
_this.animate(
{ marginTop: downHeight },//动画展示css样式
speed,
function () {
_this.find("li:last").prependTo(_this);
_this.css({ marginTop: 0 });
}
)
}
var timerID
//鼠标事件绑定
_this.hover(function () {
clearInterval(timerID);
}, function () {
timerID = setInterval("scrollDown()", timer);//这里调用向下或者向上滚动函数
}).mouseout();
}
})
})(jQuery);
$(document).ready(function () {
$("#scrollDiv").Scroll({ line: 1, speed: 500, timer: 2000 });
});
</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实现公告新闻自动滚屏效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

    本文实例讲述了jQuery实现带有上下控制按钮的简单多行滚屏效果代码.分享给大家供大家参考.具体如下: 这里使用了jQuery插件来实现最简单的多行文字滚屏效果,还带有上下滚动控制按钮,卷动速度,数值越大,速度越慢(毫秒),滚动的时间间隔是(毫秒),每次滚动的行数,默认为一屏,即父容器高度-- 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-up-down-scroll-src-style-codes/ 具体代码如下: <!DOCT

  • JQuery移动页面开发之屏幕方向改变与滚屏的实现

    方向改变事件(orientationchange) 当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时,你的回调函数可以加入第二个参数,作用为描述设备横或纵向的属性,"portrait"或;landscape".这些值也会作为class值加入到html的元素中,使你可以通过css中的选择器改变他们的样式.注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件. 手持设备方向改变时执行 $(window).bind( 'or

  • jQuery实现公告新闻自动滚屏效果实例代码

    本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

  • 用jquery中插件dialog实现弹框效果实例代码

    复制代码 代码如下: <!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=&qu

  • html、css和jquery相结合实现简单的进度条效果实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery实现进度条</title>

  • jquery实现简单的自动播放幻灯片效果

    本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: <div id="slideshow"> <div> <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="images/5230/5638093881_a791e4f819_m.jp

  • 滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码

    安装U盘里下载的"滚动条变色"插件, 安装到DW后,如何正常应用该特效插件? 答:打开DW , 1.新建页面--代码--删除<html>前面的所有代码! 2.鼠标定位在<head>之后--点击DW"设计"--点击"滚动条变色"插件,进行设置. 滚动条代码英文翻译:arrow--箭头,track--轨道. 提示:如果插入以下代码不能变色,请把网页头部<html>前的多于代码删除即可! 滚动条变色: 也可以直接在网

  • PYQT5设置textEdit自动滚屏的方法

    在修改后的文字后面加上: self.textEdit_6.moveCursor(QTextCursor.End) 例子: self.textEdit_6.setPlainText("Hello World") 以上这篇PYQT5设置textEdit自动滚屏的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 易语言在画板中写出指定文本当画板中已满会自动滚屏

    易语言在画板中写出指定文本当画板中已满会自动滚屏

    滚动写行方法 英文命令:sprint 操作系统支持:Windows    所属对象:画板 在当前写出位置写出指定的文本.数值.逻辑值或日期时间,并将现行写出位置调整到下行行首.如果现行画板高度无法容纳当前所要写出的行,则自动向上滚动画板内容. 语法:  无返回值  画板．滚动写行 (［欲写出数据］,- ) 例程 说明 通过"滚动写行"命令向画板中写入一行指定文本,本命令与"写文本行"不同的是,当画板中已满时"滚动写行"命令会自动滚屏. 运行结果:

  • 让bootstrap的carousel支持滑动滚屏的实现代码

    原始的轮播组件,并不支持滑动滚屏: 代码如下: <span style="white-space:pre"> </span><div class="row"> <div id="carousel-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-i

随机推荐