前段时间做项目一个需求,轮播方式实现不了,自己写了一个跑马灯实现效果。
HTML:
<div class="container">
<div class="scroll_div">
<div class="scroll_begin">
<ul>
<li><a href="#">文字1</a></li>
<li><a href="#">文字2</a></li>
<li><a href="#">文字3</a></li>
<li><a href="#">文字4</a></li>
<li><a href="#">文字5</a></li>
<li><a href="#">文字6</a></li>
<li><a href="#">文字7</a></li>
<li><a href="#">文字8</a></li>
<li><a href="#">文字9</a></li>
<li><a href="#">文字10</a></li>
<li><a href="#">文字11</a></li>
</ul>
</div>
<div class="scroll_end"></div>
</div>
</div>
js:
window.onload = function() {
getSroll();
}
// 动画效果
function getSroll() {
var speed = 30
var scroll_begin = $(".scroll_begin")[0];
var scroll_end = $(".scroll_end")[0];
var scroll_div = $(".scroll_div")[0];
scroll_end.innerHTML = scroll_begin.innerHTML
function Marquee() {
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
scroll_div.scrollLeft -= scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar = setInterval(Marquee, speed)
scroll_div.onmouseover = function() {
clearInterval(MyMar)
}
scroll_div.onmouseout = function() {
MyMar = setInterval(Marquee, speed)
}
};
css:
.container{
width: 100%;
height: 50px;
}
.container.scroll_div {
width: 100%;
height: 50px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
background: #333;
color: #a6a6a6;
}
.container.scroll_div a {
width: 120px;
height: 50px;
margin: auto 8px;
color: #333;
}
.container.scroll_begin,
.container.scroll_end,
.container.scroll_begin ul,
.container.scroll_end ul,
.container.scroll_begin ul li,
.container.scroll_end ul li {
display: inline-block;
}
.container.scroll_begin ul li,
.container.scroll_end ul li {
display: inline-block;
min-width: 200px;
}
.container.scroll_begin ul li a,
.container.scroll_end ul li a {
display: inline-block;
width: 100%;
line-height: 50px;
color: #a6a6a6;
text-decoration: none;
}
.container.scroll_begin ul li a:hover,
.container.scroll_end ul li a:hover {
text-decoration: underline;
}