本文章收藏了几款不错的兼容Ie6、7、8，FF以及谷歌浏览器文字向上滚动代码，有需要学习的朋友可参考一下。
| 代码如下 |
|
|
<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);
ul.appendChild(li_move);
ul.style.top = "0"
}
function scroll(obj)
{
var t= setInterval(function(){scrollOneStep(obj);},1000);
}
</script>
|
在本例中如果需要单行滚动，只需要把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>
|
