码迷,mamicode.com
首页 > 其他好文 > 详细

marquee 跑马灯公告

时间:2018-09-15 18:44:32      阅读:588      评论:0      收藏:0      [点我收藏+]

标签:nbsp   interval   tail   nim   speed   ice   ++   art   set   

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 跑马灯公告

标签:nbsp   interval   tail   nim   speed   ice   ++   art   set   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!