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实现div浮动层跟随页面滚动效果
Feb 11 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python装饰器使用实例详解
2019/12/14 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
如何用Python 加密文件
2020/09/10 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
联想C++笔试题
2012/06/13 面试题
自主招生自荐信范文
2013/12/04 职场文书
运动会入场词50字
2014/02/20 职场文书
生物工程专业求职信
2014/09/03 职场文书
学党史心得体会
2014/09/05 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
Python之matplotlib绘制饼图
2022/04/13 Python