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 相关文章推荐
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
javascript实现动态标签云
Oct 16 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
JavaScript实现星级评价效果
May 17 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
OpenLayers3实现地图显示功能
Sep 25 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php中array_column函数简单实现方法
2016/07/11 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python实现自动登录后台管理系统
2018/10/18 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
8种常用的Python工具
2020/08/05 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
自我鉴定思想方面
2013/10/07 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
销售团队口号大全
2014/06/06 职场文书
宣传标语大全
2014/07/01 职场文书
给老婆的道歉信
2015/01/20 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android