javascript滚动新闻代码
2014-02-07 22:52
204 查看
我在这里列出两种滚动模式:大家可以将代码拷贝到本机,建立一个html文件,直接运行就可以了。
1:一个一个的循环上移
2:整体循环上移
1:一个一个的循环上移
<style>a{display:block;font-size:15px};</style> <div id="div1" style="width:300px;height:68px;overflow:hidden"> <a href="javascript:">1,我要赚钱,</a> <a href="javascript:">2,我要生活 </a> <a href="javascript:">3,我要买房,</a> <a href="javascript:">4,我要一切</a> <a href="javascript:">5,男人就要对自己狠点</a> </div> <script> var t=setInterval(myfunc,1000) var d=document.getElementById("div1") function myfunc(){ var o=d.firstChild d.removeChild(o) d.appendChild(o) } d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,1000)} </script>
2:整体循环上移
<div id="marquees"> <a href="#">新闻一</a><br> <br> <a href="#">新闻二</a><br> <br> <a href="#">新闻三</a><br> <br> <a href="#">新闻四</a><br> <br> </div> <script language="JavaScript"> marqueesHeight=200; stopscroll=false; with(marquees){ style.width=0; style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; onmouseover=new Function("stopscroll=true"); onmouseout=new Function("stopscroll=false"); } document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>'); preTop=0; currentTop=0; function init(){ templayer.innerHTML=""; while(templayer.offsetHeight<marqueesHeight){ templayer.innerHTML+=marquees.innerHTML; } marquees.innerHTML=templayer.innerHTML+templayer.innerHTML; setInterval("scrollUp()",30); } document.body.onload=init; function scrollUp(){ if(stopscroll==true) return; preTop=marquees.scrollTop; marquees.scrollTop+=1; if(preTop==marquees.scrollTop){ marquees.scrollTop=templayer.offsetHeight-marqueesHeight; marquees.scrollTop+=1; } } </script>
相关文章推荐
- 利用JavaScript实现新闻滚动效果(实例代码)
- 利用JavaScript实现新闻滚动效果(实例代码)
- Javascript实现滚动图片新闻的实例代码
- Javascript实现滚动图片新闻的实例代码
- javascript滚动新闻代码
- javascript滚动新闻代码
- javascript写的新闻滚动代码
- asp.net+javascript滚动新闻(详细实现)by C#
- javascript 滚动+停留 代码
- JavaScript实现垂直向上无缝滚动特效代码
- js 向上滚动新闻代码
- javaScript滚动新闻
- 新闻滚动代码
- 【JAVASCRIPT】jquery实现新闻滚动效果
- 实现网页内容水平或垂直滚动的Javascript代码
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
- JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
- 上下循环滚动代码JAVASCRIPT
- 图片无缝滚动代码(DIV+CSS+JavaScript)