css&js实现顶部banner滚动提示效果


以一个小例子来展示滚动提示的代码部分:

try.html

<div id="scrollobj" >
<span class="scrollTxt">本活动将于2016年8月30日结束,如有抽奖机会,请尽快使用。&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp </span>
</div>

try.css

#scrollobj{
white-space:nowrap;
overflow:hidden;
width:100%;
height: 30px;
line-height: 30px;
background-color: #0553a9;
}
.scrollTxt{
width: 100%;
font-size: 16px;
color: #fff880;
}

try.js

function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft==tmp) { obj.innerHTML += obj.innerHTML;}
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) { obj.scrollLeft=0; }

}
$interval(function(){
scroll(document.getElementById('scrollobj'));
},30);


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM