第一种
新建一个网页
将下面代码复制进去运行就ok
<html>
<head><title>滚动信息 - 51windows.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body{font-size:12px;background-color:#FFF;overflow:hidden;}
td{font-size:12px;}
.titletd td{background-color:#EFEFEF;padding:2px;text-align:center;}
.datatd td{background-color:#FFFFFF;height:18px;padding-left:2px;}
.td1{width:80px;}
.td2{width:85px;}
.td3{width:100px;}
.td4{width:70px;}
.td5{width:60px;}
.td6{width:85px;}
.td7{width:62px;}
</style></head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="550" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<tr class="titletd">
<td nowrap class="td1">产品名称</td>
<td nowrap class="td2">规格</td>
<td nowrap class="td3">产地</td>
<td nowrap class="td4">价格</td>
<td nowrap class="td5">单位</td>
<td nowrap class="td6">企业名称</td>
<td nowrap class="td7">日期</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<div id="A1">
<div id="A2">
<table width="550" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" style="margin-top:-1px;">
<tbody class="datatd">
<tr>
<td nowrap class="td1">白银</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">3,465</td>
<td nowrap class="td5">元/公斤</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">锑</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">47,000</td>
<td nowrap class="td5">元/公斤</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">电解锰</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">12,700</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">铜升水</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">600</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">铜升水</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">300</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">电解铜</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">68,490</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">电解铝</td>
<td nowrap class="td2">A00</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">19,540</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">电解铅</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">12,000</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">电解锌</td>
<td nowrap class="td2">0#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">29,650</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">电解锌</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">27,900</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">无氧铜丝</td>
<td nowrap class="td2">Φ3mm</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">69,400</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">镍</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">315,000</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">锡</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">78,000</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">钴</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">400,000</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">漆包线</td>
<td nowrap class="td2">0.1-2.5mm</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">75,540</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">MB超细镍粉</td>
<td nowrap class="td2">150～1000</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">550</td>
<td nowrap class="td5">元/公斤</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">砷铜合金</td>
<td nowrap class="td2"> </td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">68,500</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-25</td>
</tr>
<tr>
<td nowrap class="td1">砷铜合金</td>
<td nowrap class="td2"> </td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">68,500</td>
<td nowrap class="td5">元/吨</td>
<td nowrap class="td6">长江现货</td>
<td nowrap class="td7">2006-8-24</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<tr class="titletd">
<td nowrap class="td1">名称1</td>
<td nowrap class="td1">名称2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<div id="B1">
<div id="B2">
<table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" style="margin-top:-1px;">
<tbody class="datatd">
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
<SCRIPT language=JavaScript>
<!--
function _InitScroll(_S1,_S2,_W,_H,_T){
return "var marqueesHeight"+_S1+"="+_H+";var stopscroll"+_S1+"=false;var scrollElem"+_S1+"=document.getElementById('"+_S1+"');with(scrollElem"+_S1+"){style.width="+_W+";style.height=marqueesHeight"+_S1+";style.overflow='hidden';noWrap=true;}scrollElem"+_S1+".οnmοuseοver=new Function('stopscroll"+_S1+"=true');scrollElem"+_S1+".οnmοuseοut=new Function('stopscroll"+_S1+"=false');var preTop"+_S1+"=0; var currentTop"+_S1+"=0; var stoptime"+_S1+"=0;var leftElem"+_S2+"=document.getElementById('"+_S2+"');scrollElem"+_S1+".appendChild(leftElem"+_S2+".cloneNode(true));setTimeout('init_srolltext"+_S1+"()',"+_T+");function init_srolltext"+_S1+"(){scrollElem"+_S1+".scrollTop=0;setInterval('scrollUp"+_S1+"()',50);}function scrollUp"+_S1+"(){if(stopscroll"+_S1+"){return;}currentTop"+_S1+"+=1;if(currentTop"+_S1+"==(marqueesHeight"+_S1+"+1)) {stoptime"+_S1+"+=1;currentTop"+_S1+"-=1;if(stoptime"+_S1+"=="+_T/50+") {currentTop"+_S1+"=0;stoptime"+_S1+"=0;}}else{preTop"+_S1+"=scrollElem"+_S1+".scrollTop;scrollElem"+_S1+".scrollTop +=1;if(preTop"+_S1+"==scrollElem"+_S1+".scrollTop){scrollElem"+_S1+".scrollTop=0;scrollElem"+_S1+".scrollTop +=1;}}}";
}
eval(_InitScroll("A1","A2",550,19*6,4000));
eval(_InitScroll("B1","B2",164,19*4,2000));
/*
A1,A2或B1,B2是滚动内容区域外的两个DIV的ID
如
<div id="B1">
<div id="B2">
_W为滚动内容的宽度
_H为滚动内容的高度,必须为单元格高度的整数倍，这里每个单元格是19px高
_T为滚动后每次停留言时间
CSode by 51windows.net
Email:51windows#gmail.com
2006-8-25
*/
//-->
</SCRIPT>
<pre style="color:green;">
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
/*
简单要说明：
A1,A2或B1,B2是滚动内容区域外的两个DIV的ID
_W为滚动内容的宽度
_H为滚动内容的高度,必须为单元格高度的整数倍，这里每个单元格是19px高
_T为滚动后每次停留言时间
Code by 51windows.net
Email:51windows#gmail.com
2006-8-25
*/
</pre>
</body>
</html>
第二种兼容ie6,ie7,firfox的文字不间断向上滚动特效代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容多个浏览器的文字滚动特效代码</title>
<style type="text/css">
.cls_container{border:1px solid #ccc;width:680px;font-size:12px;height:24px;overflow:hidden;}
.cls_container ul{list-style-type:none;margin:0;padding:0;margin-left:32px;}
.cls_container ul li{height:24px;line-height:24px;width:320px;float:left;display:inline;}
</style>
</head>
<body>
<div id="myscroll" class="cls_container">
<ul>
<li><a href="http://www.111cn.cn">微软和谷歌对浏览器的垄断会导致Web的私有化吗? </a></li>
<li><a href="#">Subversion高级应用:SVN的多种认证方式</a></li>
<li><a href="#">年度总结:2008年Java工具</a></li>
<li><a href="#">要不要把IT主导权还给业务人员? </a></li>
<li><a href="#">IT专家网08年回顾:开发语言与开发平台共舞 </a></li>
<li><a href="#">下一代网络业务融合</a></li>
<li><a href="#">方正科技七大优势 打造全流程专业外包</a></li>
<li><a href="#">08回顾:Oracle能否继续领跑者数据库市场? </a></li>
<li><a href="#">Web安全性问题的层次关系分析</a></li>
<li><a href="#">从融合至存储 以太网成企业网络终极答案</a></li>
</ul>
</div>
<div id="showhint"></div>
<script type="text/javascript">
function $(element){
if(arguments.length>1){
for(var i=0,length=arguments.length,elements=[];i<length;i++){
elements.push($(arguments[i]));
}
return elements;
}
if(typeof element=="string"){
return document.getElementById(element);
}else{
return element;
}
}
var Class={
create:function(){
return function(){
this.initialize.apply(this,arguments);
}
}
}
Function.prototype.bind=function(object){
var method=this;
return function(){
method.apply(object,arguments);
}
}
var Scroll=Class.create();
Scroll.prototype={
initialize:function(element,height){
this.element=$(element);
this.element.innerHTML+=this.element.innerHTML;
this.height=height;
this.maxHeight=this.element.scrollHeight/2;
this.counter=0;
this.scroll();
this.timer="";
this.element.οnmοuseοver=this.stop.bind(this);
this.element.οnmοuseοut=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);
},
scroll:function(){
if(this.element.scrollTop<this.maxHeight){
this.element.scrollTop++;
this.counter++;
}else{
this.element.scrollTop=0;
this.counter=0;
}
if(this.counter<this.height){
this.timer=setTimeout(this.scroll.bind(this),20);
}else{
this.counter=0;
this.timer=setTimeout(this.scroll.bind(this),3000);
}
},
stop:function(){
clearTimeout(this.timer);
}
}
var myscroll=new Scroll("myscroll",24);
</script>
</body>
</html>
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
