| 代码如下 | 复制代码 |
|
<script type="text/javascript"> function scrollOneStep(obj) { var ul = document.getElementById(obj); var li = ul.getElementsByTagName("li"); var li_move = li.item(0); var line = 0 - parseInt(li_move.clientHeight); var speed = 10; var pix = 0; t2 = setInterval(function(){ if(pix > line){ ul.style.top = ""+pix + "px"; pix --; }else{ clearInterval(t2); } },speed); ul.style.top += parseInt(ul.style.top)+30+"px"; ul.removeChild(li_move); } function scroll(obj) |
|
在本例中如果需要单行滚动，只需要把css中#div1的值改为18即可。
注：经测试兼容Ie6、7、8，FF以及谷歌浏览器！
| 代码如下 | 复制代码 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新闻列表单行滚动js效果，者多行滚动js效果，超简洁</title> <style> a{display:block;line-height:18px;text-decoration:none;color:#f00;font-family:Arial;font-size:12px;} a:hover{text-decoration:underline;} .shell{width:220px; } #div1{height:72px;overflow:hidden;} </style> </head> <body> <div class="shell"> <div id="div1"> <a href="/js">1jQuery的图片滚动切换插件</a> <a href="/js">2Mootools slider 滚动条拖动取值的实现 </a> <a href="/js">3VB开发的Eclipse编程软件完整版</a> <a href="/js">4VC++生成随机数并快速排序的算法</a> <a href="/js">5VB语音报数计算器源程序</a> <a href="/js">6jQuery的图片滚动切换插件</a> <a href="/js">7Mootools slider 滚动条拖动取值的实现 </a> <a href="/js">8VB开发的Eclipse编程软件完整版</a> <a href="/js">9VC++生成随机数并快速排序的算法</a> </div> <div> <p>修改说明：#div1里的高度（72px）即是你需要显示的行数<br/> js里的18即是要滚动的行高；1500即是每次滚动所需要的时间，越大则速度越慢！ <a href="/js">Js大全</a>注！<p/> </body> <script> var c,_=Function; with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");} (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))(); </script> </html> |
|
本效果是完全基于JavaScript的，使用时候最好另存一个新文件，然后引入，这样方便一些。
| 代码如下 | 复制代码 |
|
<html> <head> <title>文字滚动</title> <style type="text/css"> body{font-size:12px} a {text-decoration: none;} </style> </head> <body> <script> var marqueeContent=new Array(); marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=http://www.baidu.com target=_blank class="f12red">jQuery 动态加载静态网页的实例</a><br>'; marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=/ target=_blank class="f12red">比较炫的JavaScript图片展示特效</a><br>'; marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">JQuery模仿的LightBox图片效果</a><br>'; marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">C#酒店管理系统（VS2008+SQL2005）</a><br>'; var marqueeInterval=new Array(); var marqueeId=0; var marqueeDelay=2000; var marqueeHeight=18; function initMarquee() { var str=marqueeContent[0]; document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>'); marqueeId++; marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); } function startMarquee() { var str=marqueeContent[marqueeId]; marqueeId++; if(marqueeId>=marqueeContent.length) marqueeId=0; if(marqueeBox.childNodes.length==1) { var nextLine=document.createElement('DIV'); nextLine.innerHTML=str; marqueeBox.appendChild(nextLine); } else { marqueeBox.childNodes[0].innerHTML=str; marqueeBox.appendChild(marqueeBox.childNodes[0]); marqueeBox.scrollTop=0; } clearInterval(marqueeInterval[1]); marqueeInterval[1]=setInterval("scrollMarquee()",20); } function scrollMarquee() { marqueeBox.scrollTop++; if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){ clearInterval(marqueeInterval[1]); } } initMarquee(); </script> </body> </html> |
|
时间： 2024-04-24 15:04:18