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


Posted in Javascript onJuly 14, 2016

本文是小编参考网络上的一个小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实现公告新闻自动滚屏效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
javascript生成大小写字母
Jul 03 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 #Javascript
javascript运算符语法全面概述
Jul 14 #Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 #Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 #Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 #Javascript
全面了解addEventListener和on的区别
Jul 14 #Javascript
js计算系统当前日期是星期几的方法
Jul 14 #Javascript
You might like
PHP 采集心得技巧
2009/05/15 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
php数组删除元素示例
2014/03/21 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Django websocket原理及功能实现代码
2020/11/14 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
五型班组建设方案
2014/02/10 职场文书
幼儿园招生广告
2014/03/19 职场文书
团日活动总结书
2014/05/08 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS