又是一篇以前的笔记。分享一下
此随笔主要记录:模拟公告栏消息轮转,每行消息停留一段时间,用JS实现。
主要的思路:对需要轮转的消息clone一份一模一样的,通过scrollTop与定时器进行实现,然后当scrollTop一旦等于所需轮转消息高度,scrollTop将再次设为0,重新轮转。
听起来好像很简单的样子,其实也很简单,哈哈哈~
贴上代码:
html:
<div id="mooc"> <div id="moocTitle">消息轮转<a href="#" target="_self">更多>></a> </div> <div id="moocBox"> <ul> <li><a href="#">1.学会html5</a><span>2013-09-18</span></li> <li><a href="#">2.学会css</a><span>2013-10-09</span></li> <li><a href="#">3.学会js</a><span>2013-10-21</span></li> <li><a href="#">4.学会css3</a><span>2013-11-01</span></li> <li><a href="#">5.学会jq</a><span>2013-11-06</span></li> <li><a href="#">6.学会nodejs</a><span>2013-11-08</span></li> <li><a href="#">7.学会bootstrap</a><span>2013-11-15</span></li> <li><a href="#">8.学会angluasjs</a><span>2013-11-22</span></li> <li><a href="#">9.好多东西要学会</a><span>2013-12-06</span></li> </ul> </div> <div id ="moocBot"> </div> </div>
css:
<style> body { font-size: 12px; line-height: 24px; text-algin: center; } * { margin: 0px; padding: 0px; } ul { list-style: none; } a img { border: none; } a { color: #333; text-decoration: none; } a:hover { color: #ff0000; } #mooc { width: 399px; border: 5px solid #ababab; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; box-shadow: 2px 2px 10px #ababab; margin: 50px auto 0; text-align: left; } #moocTitle { height: 62px; overflow: hidden; font-size: 26px; line-height: 62px; padding-left: 30px; background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/ border: 1px solid ##f05e6f; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; color: #fff; position: relative; } #moocTitle a { position: absolute; right: 10px; bottom: 10px; display: inline; color: #fff; font-size: 12px; line-height: 24px; } #moocBot { width: 399px; height: 10px; overflow: hidden; } #moocBox { height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: hidden; } #mooc ul li { height: 24px; } #mooc ul li a { width: 180px; float: left; display: block; overflow: hidden; text-indent: 15px; height: 24px; } #mooc ul li span { float: right; color: #999; } </style>
js:
<script type="text/javascript"> var area = document.getElementById('moocBox'); var iliHeight = 24;//单行滚动的高度 var speed = 50;//滚动的速度 area.scrollTop=0; area.innerHTML+=area.innerHTML;//克隆一份一样的内容 var timer=null; function startMove(){ area.scrollTop++; if(area.scrollTop % iliHeight == 0){ clearInterval(timer); setTimeout("startMove()", 1000); } else{ if(area.scrollTop >= area.scrollHeight/2 ){ area.scrollTop = 0; } setTimeout("startMove()",50); } } startMove(); </script>
效果图
PS:那啥,颜色啥的就别在意,优先级的问题,我的被博客园自带的给覆盖了。懒得改了
消息轮转更多>>
- 1.学会html52013-09-18
- 2.学会css2013-10-09
- 3.学会js2013-10-21
- 4.学会css32013-11-01
- 5.学会jq2013-11-06
- 6.学会nodejs2013-11-08
- 7.学会bootstrap2013-11-15
- 8.学会angluasjs2013-11-22
- 9.好多东西要学会2013-12-06
以上内容,如有错误请指出,不甚感激。