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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
怎么清空javascript数组
May 11 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python实现发送邮件功能代码
2017/12/14 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python实现简单加密解密机制
2019/03/19 Python
python 公共方法汇总解析
2019/09/16 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python实现处理mysql结果输出方式
2020/04/09 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
学前教育求职自荐信范文
2013/12/25 职场文书
五好关工委申报材料
2014/05/31 职场文书
学校施工安全责任书
2015/01/29 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
Java移除无效括号的方法实现
2021/08/07 Java/Android
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python