css
<style>
body { margin: 0; padding: 0; overflow: hidden; } .wdt-container .headerNotice-wrap { height: 50px; border-bottom: solid 1px #f0f0f0; background-color: #ffffff; color: #a0a0a0; font-size: 14px; overflow: hidden; } .wdt-container .noticetitle { width: 100px; line-height: 50px; text-align: center; float: left; } .wdt-container .headerNotice { float: left; width: calc(100% - 300px); height: 50px; overflow: hidden; position: relative; } .wdt-container .headerNotice ul { width: 100%; margin: 0 0 0 15px; padding: 0; position: absolute; top: 0; left: 0; overflow: hidden; } .wdt-container .headerNotice ul li { width: 100%; height: 50px; line-height: 50px; } .wdt-container .headerNotice ul li.hot { padding-left: 35px; } .wdt-container .headerNotice ul li a { float: left; max-width: 70%; height: 50px; line-height: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #a0a0a0; } .wdt-container .headerNotice ul li a.date { float: left; height: 50px; line-height: 50px; padding-left: 18px; } .wdt-container .morenotice { float: right; width: 100px; line-height: 50px; text-align: center; } .wdt-container .morenotice a { color: #a0a0a0; } </style>
html
<div class="wdt-container"> <div class="headerNotice-wrap"> <div class="noticetitle">平台公告</div> <div class="headerNotice"> <ul> </ul> </div> <div class="morenotice"><a href="">更多公告</a></div> </div> </div>
js
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script> $(function(){ var data = {value:{afficheList: [{title:'第一条',publishTime:'2018-08-09'}, {title:'第二条',publishTime:'2018-08-09'}, {title:'第三条',publishTime:'2018-08-09'}] }} //模拟ajax数据 var data = data.value.afficheList; var listDom='' for(var i=0;i<data.length;i++){ listDom+='<li class="hot">'+ '<a href="">'+data[i].title+'</a>'+ '<a href="" class="date">'+data[i].publishTime.slice(0,10)+'</a>'+ '</li>' } listDom+='<li class="hot">'+ '<a href="">'+data[0].title+'</a>'+ '<a href="" class="date">'+data[0].publishTime.slice(0,10)+'</a>'+ '</li>' $(".wdt-container .headerNotice ul").append(listDom) var noticeUl = $(".wdt-container .headerNotice ul"); var noticeLi = $(".wdt-container .headerNotice ul li"); var noticeLength = noticeLi.length var firstTime = 1 var noticeTimer = setInterval(function () { if(firstTime==noticeLength){ noticeUl.css({'top':'0'}) firstTime = 1 } noticeUl.animate({top:-50*firstTime},1000) firstTime++ },2700); $(".wdt-container .headerNotice ul li a").mouseenter(function (){ clearInterval(noticeTimer) }).mouseleave(function (){ noticeTimer = setInterval(function () { if(firstTime==noticeLength){ noticeUl.css({'top':'0'}) firstTime = 1 } noticeUl.animate({top:-50*firstTime},1000) firstTime++ },2700); }); }) </script>