JS特效—新闻公告
先看一下预览效果
https://img-blog.csdn.net/20161022211611154
html代码
<div class="notice">
<div id="upRoll" class="upRoll">
<div id="holder1"><!--用于承载已滚动不可见区域-->
<ul class="ulist">
<li>
<a href="#">
<span class="text">【平台公告】系统升级“快捷充值”功能的公告</span>
<span class="time">2016-08-22</span>
</a>
</li>
<li>
<a href="#">
<span class="text">CEO出席全球互联网峰会</span>
<span class="time">2016-08-23</span>
</a>
</li>
<li>
<a href="#">
<span class="text">【平台公告】关于网络优化的公告</span>
<span class="time">2016-08-24</span>
</a>
</li>
</ul>
</div>
</div>
<div class="more">
<a href="#">
<span>更多公告</span>
</a>
</div>
</div>
css代码
@charset "UTF-8";
/*common*/
body {font:15px Arial,"Microsoft YaHei","SimHei";color: #4c5154;}
html,body,div,ul,li{margin:0;padding:0;font-family:Microsoft YaHei, Arial;}
ul li { list-style-type: none; }
ol,ul{list-style:none;}
a{ text-decoration:none; color:#747474 }
.notice {
width: 998px;
height: 42px;
margin: 100px auto;
border-bottom: 1px solid #BFBFBF;
border-top: 1px solid #BFBFBF;
}
.upRoll {
float: left;
width: 890px;
height: 42px;
overflow: hidden;
}
.more {
float: left;
width: 98px;
}
.more a {
height: 42px;
line-height: 42px;
border: 1px solid #BFBFBF;
border-radius: 14px;
padding: 0 15px;
color: #737272;
}
.more a:hover,.more a:active {
color: #2fa8e1;
border: 1px solid #2fa8e1;
}
.ulist li a{
display: block;
padding: 0 30px 0 20px;
height: 42px;
line-height: 42px;
}
.ulist li a span{
display: inline-block;
float: left;
height: 42px;
line-height: 42px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
color: #666;
}
.ulist li a span.text {
position: relative;
width: 750px;
}
.ulist li a span.time {
width: 90px;
}
js代码
<script type="text/javascript">
function marquee(height,speed,delay){
var scrollT;
var pause = false;
var ScrollBox = document.getElementById("upRoll");
//此时holder1就有作用了,占据空间
if(document.getElementById("holder1").offsetHeight <= height) return;
var _tmp = ScrollBox.innerHTML.replace('holder1', 'holder');
ScrollBox.innerHTML += _tmp;
//鼠标经过时,停止滚动
ScrollBox.onmouseover = function(){pause = true};
//鼠标离开,继续滚动
ScrollBox.onmouseout = function(){pause = false};
ScrollBox.scrollTop = 0;
function start(){
scrollT = setInterval(scrolling,speed);
if(!pause) ScrollBox.scrollTop += 2;
}
function scrolling(){
if(ScrollBox.scrollTop % height != 0){
ScrollBox.scrollTop += 2;
if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0;
}
else{
clearInterval(scrollT);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
marquee(42,30,3000);
</script>