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 相关文章推荐
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
Angular简单验证功能示例
Dec 22 Javascript
详解Vue中watch的高级用法
May 02 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
taro开发微信小程序的实践
May 21 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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若干单维数组遍历方法的比较
2011/09/20 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Python如何在bool函数中取值
2020/09/21 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
自荐书模板
2013/12/19 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
内衣营销方案
2014/03/15 职场文书
老干部工作先进事迹
2014/08/17 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android