首页 > 其他 > 详细

marquee 跑马灯公告

时间:2018-09-15 18:35:57      阅读:193      评论:0      收藏:0      [点我收藏+]

1.原始 marquee

2.自定义 marquee

.tops {
color: #fff;
height: 23px;
margin: 0 0 0 20px;
min-height: 23px;
overflow: hidden;
}

.tops a {
float: left;
}

.tops li {
height: 23px;
padding-left: 25px;
}

 

<div class="tops">
<ul>
<li>
<a href="#">top1</a>
</li>
<li>
<a href="#">top2</a>
</li>
</ul>
</div>

 

$(document).ready(function () {
$(".tops").Scroll();
});
 
(function ($) {
$.fn.extend({
Scroll: function (opt) {
if (!opt) var opt = {line: 1, speed: 1000, timer: 3000};
var oo;
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) : 3000,
timer = opt.timer ? parseInt(opt.timer, 10) : 3000;
if (line == 0) line = 1;
var upHeight = 0 - line * lineH;
scrollUp = function () {
_this.animate({
marginTop: upHeight
}, speed, function () {
for (i = 1; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css({ marginTop: 0 });
}
);
};
var timerID = function () {
oo = setInterval("scrollUp()", timer);
};
timerID();
_this.hover(function () {
clearInterval(oo);
}, function () {
timerID();
});
}
});
})(jQuery);

marquee 跑马灯公告

原文:https://www.cnblogs.com/justSmile2/p/9651715.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!