以前在一些网站的公告上看到一些滚动的文字或公告,即是文字一行一行的滚动,滚动一行,停止一下,滚动一行,停止一下。后来研究了n久,发现是这个属性控制的scrolltop。
只要改变div的这个属性值就能控制div中内容的滚动了,不过前提就是必须要div中的内容有溢出,然后属性改为overflow:hidden。一下是我写的一个滚动微博的js代码:
文章来源www.chaochaoblog.com
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <div id="weiboFrame" style="width:187px; height:50px; overflow:hidden; font-size:12px; font-family:'宋体';"> </div> <script language="javascript"> var weiboNum=5; var weiboText=new Array(5); var weiboHeight=50; var weiboScrollNum=0; var weiboScrollState=0; var weiboToScroll='weiboText0'; var timeId; var timeId2; weiboText[0]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden;" id="weiboText0"><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">终于弄明白了腾讯微博sdk的使用了。正在开发一个wordpress的插件。www.chaochaoblog.com.</span> <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 手机(t.3g.qq.com)-</span></div></li>'; weiboText[1]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden;" id="weiboText1"><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">最近的天气让人觉的很沉重,早晨起来放fafsafdsafdsfdsafdsafdsafdsfafdsafsdfsdafdsafdsafdsafdasfsdafsafdsafsadffdsafdsaf在凳子上的衣服都湿了</span> <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 手机(t.3g.qq.com)-</span></div></li>'; weiboText[2]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden;" id="weiboText2"><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">@sjolzy 你好 能请教一下腾讯微afdsafdsafafsdafdsagfadsfdsafsdafdsafdsafdsafsdafdsafdasfsda博的api到底怎么333用么</span> <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 网页-</span></div></li>'; weiboText[3]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden; id="weiboText3""><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">@sjolzy 你好 能请教一下腾dafdsafdsafdsafdsfsdafdasfdsafdsafdsa讯微博的api到底怎么用444么</span> <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 网页-</span></div></li>'; weiboText[4]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden; id="weiboText4""><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">@sjolzy 你好 能请教一下腾讯afdsafdsafdsfdsfdsfdsafdsafsafafafasfas微博的api到底怎么555用么</span> <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 网页-</span></div></li>'; for(i=0;i<weiboNum;i++) { document.getElementById('weiboFrame').innerHTML+=weiboText[i]; } function scrollWeiboText() { if(weiboHeight>0) { //alert(document.getElementById('weiboText1').scrollTop); if(weiboScrollState==0) { document.getElementById('weiboFrame').scrollTop+=2; } else { document.getElementById('weiboFrame').scrollTop-=2; } weiboHeight-=2; } else { weiboHeight=50; window.clearInterval(timeId); } } function scrollInWeiboText() { if(weiboHeight>0) { document.getElementById(weiboToScroll).scrollTop+=2; weiboHeight-=2; alert(weiboHeight); } else { weiboHeight=50; window.clearInterval(timeId2); } } function moveDivText() { weiboToScroll='weiboText' + weiboScrollNum; timeId2=setInterval(scrollInWeiboText(),10); } function moveWeiboText() { if(weiboScrollState==0) { if(weiboScrollNum<weiboNum-1) { weiboScrollNum+=1; timeId=setInterval('scrollWeiboText()',10); } else { weiboScrollState=1; } } else { if(weiboScrollNum>0) { weiboScrollNum-=1; timeId=setInterval('scrollWeiboText()',10); } else { weiboScrollState=0; } } setTimeout('moveDivText()',5000); } setInterval('moveWeiboText()',10000); </script>
如无特别说明,本博客文章皆为原创。转载请说明,来自吵吵博客。
原文链接:http://chaochaoblog.com/archives/159
吵吵微信朋友圈,请付款实名加入:
文章不错,看过要留个足迹,
支持一下。