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 研究心得 取得属性的值
Nov 30 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
Vue实现浏览器打印功能的代码
Apr 17 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python版名片管理系统
2018/11/30 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Python 实现微信自动回复的方法
2020/09/11 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
维修工先进事迹
2014/05/29 职场文书
环境保护标语
2014/06/20 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang