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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
javascript 鼠标滚轮事件
Apr 09 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
vue实现在线学生录入系统
May 30 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python编程中装饰器的使用示例解析
2016/06/20 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Python实现自动整理文件的脚本
2020/12/17 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
关于热爱祖国的演讲稿
2014/05/04 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年政工师工作总结
2014/12/18 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
人事任命书范本
2015/09/21 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android