一个很不错JS公告滚动效果
其中里面的"fa fa-bullhorn"类用到了Font Awesome字库，如需使用需要先加载<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
/* top */
.top{width:100%;height:40px;margin-top:20px;border-top:1px dashed #f0f0f0;border-bottom:1px dashed #f0f0f0;font:16px/40px arial,'microsoft yahei'}
.top a{color:#333}
.top>.top-bullhorn{width:50px;height:40px;float:left;font-size:20px;line-height:40px;text-align:center;color:#f86442}
.top-box{width:calc(100% - 100px);height:40px;float:left;overflow:hidden}
.top-box>ul{width:100%;height:40px}
.top-box>ul>li{width:100%;height:40px;overflow:hidden}
.top-more{width:50px;height:40px;float:left;text-align:right}
</style>
</head>
<body>
<!-- top -->
<div class="top">
<div class="top-bullhorn fa fa-bullhorn"></div>
<div class="top-box">
<ul>
<li><a href="">2019哈尔滨年货博览会，诚招展会合作！</a></li>
<li><a href="">2019杭州年货博览会火爆招商中！</a></li>
</ul>
</div>
<a class="top-more" href="">更多</a>
</div>
<!-- top -->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
/**
* 头条
*/
function autoScroll(obj){
$(obj).find("ul").animate({
marginTop : "-40px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll(".top-box")',3000);
})
</script>
</body>
</html>https://blog.csdn.net/kou13043022076/article/details/80865686
页:
[1]