JavaScript 经典效果集2

本文 28921 pv

JavaScript 经典效果集2

在来一个js效果集,可运行代码观看效果，有喜欢的就下载拉!

网页的内容不让复制的代码

精美Css+Xhtml下拉列表菜单

<!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" lang="gb2312" xml:lang="gb2312">
<head>
<title>精美Css+Xhtml下拉菜单~</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
</head>
<body>
<div id="nav">
  <ul>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">站酷首页  
  <div class="list">
    <a href="#">我的Png</a><br />
        <a href="#">我的Gif</a><br />
        <a href="#">我的酷站</a><br />
    <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
  <div class="list">
    <a href="#">我的CHINAY</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信  
  <div class="list">
    <a href="#">我的CHINAY</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理  
  <div class="list">
    <a href="#">我的CHINAY</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
    <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
  </div>
  </li>
  </ul>
</div>
</body>
</html>

运行代码

复制代码

滚屏显示
将下面的代码插入到之间

滚动的按钮

制作特殊字的脚本

<html>
<head>
<title>特殊文字的制作</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body text=#00ff00 bgColor=black  onload=e(d.q)>
<center>特殊文字的制作</font></center>
<br>
<center>
<table border=2 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为效果显示</strong></font></td></tr>
<tr><td align=left>
<SCRIPT>d=document;wr='write';v=void 0;u='';sn='<span style="background-color:#00ff00;color:black;">';sa='</span>';function di(x,y){for(i=1;i<x;i++)d[wr](y);}d.layers?n4=1:n4=0;d.all?i4=1:i4=0;i4&&navigator.platform.indexOf('Mac')!=-1?i4=0:v;fn='font-family:Courier;font-size:12px;';!n4?vb='.g{background-color:black;border-color:green;border-style:solid;border-width:1px;color:#00ff00;'+fn+'}.h{background-color:#00FF00;border:none;color:black;'+fn+'}':vb=u;di(2,'<style>'+vb+'body{'+fn+'}</style>');el='elements';vl='value';ih='innerHTML';sp='　';br='<br>';a1='15';a2='1234';a3='12345';a4='234';a5='2345';a6='1';a7='3';a8='5';a9='135';b0='24';b1='23';b2='2';b3='14';b4='123';b5='4';b6='34';b7='235';f=new Array();f['A']=[a4,a1,a1,a3,a1,a1,a1];f['B']=[a2,a1,a1,a2,a1,a1,a2];f['C']=[a5,a6,a6,a6,a6,a6,a5];f['D']=[a2,a1,a1,a1,a1,a1,a2];f['E']=[a3,a6,a6,a2,a6,a6,a3];f['F']=[a3,a6,a6,a2,a6,a6,a6];f['G']=[a5,a6,a6,'1345',a1,a1,a5];f['H']=[a1,a1,a1,a3,a1,a1,a1];f['I']=[a3,a7,a7,a7,a7,a7,a3];f['J']=[a5,a8,a8,a8,a1,a1,a4];f['K']=[a1,b3,'13','12','13',b3,a1];f['L']=[a6,a6,a6,a6,a6,a6,a3];f['M']=[a1,'1245',a9,a1,a1,a1,a1];f['N']=[a1,a1,'125',a9,'145',a1,a1];f['O']=[a4,a1,a1,a1,a1,a1,a4];f['P']=[a2,a1,a1,a2,a6,a6,a6];f['Q']=[a4,a1,a1,a1,a9,b3,b7];f['R']=[a2,a1,a1,a2,'13',b3,a1];f['S']=[a5,a6,a6,a4,a8,a8,a2];f['T']=[a3,a7,a7,a7,a7,a7,a7];f['U']=[a1,a1,a1,a1,a1,a1,a4];f['V']=[a1,a1,a1,a1,a1,b0,a7];f['W']=[a1,a1,a9,a9,a9,a9,b0];f['X']=[a1,a1,b0,a7,b0,a1,a1];f['Y']=[a1,a1,b0,a7,a7,a7,a7];f['Z']=[a3,a8,b5,a7,b2,a6,a3];f['a']=[u,u,a4,a8,a5,a1,a5];f['b']=[a6,a6,a2,a1,a1,a1,a2];f['c']=[u,u,a5,a6,a6,a6,a5];f['d']=[a8,a8,a5,a1,a1,a1,a5];f['e']=[u,u,a4,a1,a3,a6,a5];f['f']=['345',b2,a3,b2,b2,b2,b2];f['g']=[u,u,a5,a1,a5,a8,a4];f['h']=[a6,a6,a2,a1,a1,a1,a1];f['i']=[a7,u,b4,a7,a7,a7,a3];f['j']=[a8,u,a8,a8,a8,a1,a4];f['k']=[a6,a6,a1,b3,b4,b3,a1];f['l']=[b4,a7,a7,a7,a7,a7,a3];f['m']=[u,u,b0,a9,a9,a9,a9];f['n']=[u,u,a4,a1,a1,a1,a1];f['o']=[u,u,a4,a1,a1,a1,a4];f['p']=[u,u,a2,a1,a2,a6,a6];f['q']=[u,u,a5,a1,a5,a8,a8];f['r']=[u,u,a4,a1,a6,a6,a6];f['s']=[u,u,a5,a6,a4,a8,a2];f['t']=[u,b2,a3,b2,b2,b2,'345'];f['u']=[u,u,a1,a1,a1,a1,a4];f['v']=[u,u,a1,a1,a1,b0,a7];f['w']=[u,u,a9,a9,a9,a9,b0];f['x']=[u,u,a1,b0,a7,b0,a1];f['y']=[u,u,a1,a1,a5,a8,a4];f['z']=[u,u,a3,b5,a7,b2,a3];f['1']=[b4,a7,a7,a7,a7,a7,a3];f['2']=[a2,a8,a8,a4,a6,a6,a3];f['3']=[a2,a8,a8,a4,a8,a8,a2];f['4']=[b6,b0,b3,b3,a3,b5,b5];f['5']=[a3,a6,a6,a2,a8,a8,a2];f['6']=[a5,a6,a6,a2,a1,a1,a4];f['7']=[a3,a8,a8,b5,a7,a7,a7];f['8']=[a4,a1,a1,a4,a1,a1,a4];f['9']=[a4,a1,a1,a5,a8,a8,a2];f['0']=f['O'];f['`']=[a6,b2,a7,u,u,u,u];f['~']=[b7,b3,u,u,u,u,u];f['!']=[a7,a7,a7,a7,a7,u,a7];f['@']=[a2,a8,b7,a9,a9,a9,a4];f['#']=[b0,a3,b0,a3,b0,u,u];f['$']=[a7,a5,a6,a4,a8,a2,a7];f['%']=['25',a9,b0,a7,b0,a9,b3];f['^']=[a7,b0,a1,u,u,u,u];f['&']=[a4,a6,a6,'25',a9,b3,b7];f['*']=[a7,a9,a4,a9,a7,u,u];f['(']=[b6,b2,b2,b2,b2,b2,b6];f[')']=[b6,a8,a8,a8,a8,a8,b6];f[']']=[b1,b5,b5,b5,b5,b5,b1];f['-']=[u,u,u,a3,u,u,u];f['=']=[u,u,a3,u,a3,u,u];f['+']=[u,a7,a7,a3,a7,a7,u];f['[']=[a4,b2,b2,b2,b2,b2,a4];f[']']=[a4,b5,b5,b5,b5,b5,a4];f['{']=[b6,b2,b2,a6,b2,b2,b6];f['}']=[b1,b5,b5,a8,b5,b5,b1];f['|']=[a7,a7,a7,a7,a7,a7,a7];f['\']=[a6,a6,b2,a7,b5,a8,a8];f['/']=[a8,a8,b5,a7,b2,a6,a6];f['<']=[u,b5,a7,b2,a7,b5,u];f['>']=[u,b2,a7,b5,a7,b2,u];f['?']=[a4,a1,b5,a7,a7,u,a7];f['.']=[u,u,u,u,u,u,a7];f[':']=[u,u,a7,u,u,u,a7];f[';']=[u,u,a7,u,u,a7,b5];f[',']=[u,u,u,u,u,a7,b5];f[''']=[a7,a7,a7,u,u,u,u];f['"']=[b0,b0,b0,u,u,u,u];f['_']=[u,u,u,u,u,u,a3];f['id']=[u,u,u,u,a6,b0,a7,u];f[' ']=[u,u,u,u,u,u,u];if(n4)window.onResize=rI;function rI(){window.history.go(0);}function w(y,z){sp=z.charCodeAt(0)<256?"&nbsp;":"　";y=y.split('');for(i in y)!f[y[i]]?y[i]='id':v;s=u;for(i=0;i<7;i++){for(k in y){for(j=1;j<6;j++){y[k]=='id'?i==2?j==5?s+=sn+"O"+sa:s+=sp:i==3?j==2?s+=sn+"I"+sa:j==4?s+=sn+"E"+sa:s+=sp:i==4?j==3?s+=sn+"D"+sa:s+=sp:s+=sp:f[y[k]][i].indexOf(j)!=-1?s+=z:s+=sp;}s+=sp;}s+=br;}return s;}function e(v){n4?l=d.layers['p']:i4?l=d.all['p']:l=d.getElementById('p');r=v[el][1][vl].split(u);t=d.q1[el][0];z=r[0];y=v[el][0][vl];!n4?i4?l[ih]=br+w(y,z):l[ih]=w(y,z):l.document[wr]('<span style="font-family:Courier;font-size:12px;">'+w(y,z));n4?l.document.close():v;t[vl]="<div style='font-family:Courier'>"+w(y,z)+"</div>";}</SCRIPT>
<SCRIPT>di(2,'IDEO ASCII TYPESETTER');di(56,sp);di(2,'：）'+br);di(81,'-');</SCRIPT>
<FORM name=q><BR><BR>1. 请输入字母: &nbsp; &nbsp;<INPUT class=g  value=chenxi><BR><BR>2. 请选择一种字符: <INPUT class=g size=5 value=■><BR><BR>3. 
Generate ASCII: 
&nbsp;&nbsp;<INPUT class=h onclick=e(d.q) type=button value=Run><BR><BR><BR>
<SCRIPT>di(81,'-');di(2,br+'copy & paste:');di(38,sp);</SCRIPT><BR><BR><BR>
<DIV id=p style="WIDTH: auto; POSITION: absolute; HEIGHT: auto"></DIV>
<SCRIPT>di(11,br);di(81,'-');</SCRIPT>
<BR>copy &amp; paste into html:<BR><BR><BR></FORM>
<FORM name=q1><TEXTAREA rows=3 cols=67></TEXTAREA><BR><BR></FORM>
</td></tr>
</table></center>
<br>
<br><br>
<br><br>
<br><br>
<br>

运行代码

复制代码

CSS模仿IE警告信息栏

<!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>
<title>geekos.com代码演示专用页面</title>
<style type="text/css">
body {
        margin: 0 !important;
        padding: 0 !important;
}
/* A fake IE information bar */
#infobar {
        font: message-box;
}
/* Please adjust the values if the infobar is not looking good */
#infobar a, #infobar a:link, #infobar a:visited, #infobar a:active {
        display: block;
        float: left;
        clear: both;
        width: 100%;
        color: InfoText;
        background: InfoBackground url(http://www.51du.cn/img/warning.gif) no-repeat fixed .3em .3em;
        padding: .45em .3em .45em 2em;
        border-bottom: .16em outset;
        text-decoration: none;
        cursor: default;
}
#infobar a:hover {
        color: HighlightText;
        background: Highlight url(http://www.51du.cn/img/warning2.gif) no-repeat fixed .3em .3em;
}
/* A fake viewplot for IE information bar */
#viewplot {
        width: 100%;
        height: expression(this.parentNode.offsetHeight - this.offsetTop);
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 1em;   /* Please set this to the value as that of your <body> */
}
</style>
</head>
<body>
<div id="infobar" align=center><a rel="nofollow" href="http://www.geekso.com/">欢迎访问这一技客网的BLOG</a></div>
</body>
</html>

运行代码

复制代码

文字幻灯片

<!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>
<title>geekso代码演示专用页面</title>
<style type="text/css">
.trans {filter:revealTrans(Transition=12,Duration=2)}
</style>
</head>
<body>
<script language="JavaScript">
Text = new Array(
  "<a href='http://www.geekso.com' target='_blank' class='cr4'>班级留言“说”出口，校友录开通语音留言服务</a>",
  "<a href='http://www.geekso.com' class='cr4'>星级会员新体验,享受无广告的清新校友录</a>",
  "<a href='http://www.geekso.com' target='_blank' class='cr4'>星级会员免费多彩留言,表情,贴图,个性无限...</a>",
  "<a href='http://www.geekso.com' target='_blank' class='cr4'>星级会员免费留言下载,导出更多昔日记忆</a>",
  "<a href='http://www.geekso.com' target='_blank' class='cr4'>在5千万用户中脱颖而出,我是星级会员</a>"
)
var IDX= -1;
function playAd() {
  if (IDX==Text.length-1) {
    IDX=0;
  } else {
    IDX++;
  }
  var prefix = "";
  divText.filters[0].apply();
  divText.innerHTML = prefix + Text[IDX];
  divText.filters[0].play();
  to = setTimeout("playAd()",6000);
}
</script>
<table width=453 border=0 cellspacing=3 cellpadding=0>
          <tr bgcolor=CCF4B9> 
            <td height=24 bgcolor=CCF4B9 id=divText class=trans></td>
          </tr>
    <script>playAd()</script>
 </table>
</body>
</html>

运行代码

复制代码

一个非常不错的loading 效果.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>www.geekso.com</title>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
function startLongProcess()
{
   divProgressDialog.style.display = "";
   resizeModal();
   btnCancel.focus();
   // Add a resize handler for the window
   window.onresize = resizeModal;
   // Add a warning in case anyone tries to navigate away or refresh the page
   window.onbeforeunload = showWarning;
   //
   // Here's where you would normally kick off a long asynchronous process
   // like a file download or a remote database operation. Here, we use
   // our "long process" to simulate this process.
   //
   continueLongProcess();
}
function updateProgress(nNewPercent)
{
   // Update our pseudo progress bar
   divProgressInner.style.width = (parseInt(divProgressOuter.style.width) 
      * nNewPercent / 100)+ "px";
}
function stopLongProcess()
{
   if (g_oTimer != null)
   {
      // Clear the timer so we don't get called back an extra time
      window.clearTimeout(g_oTimer);
      g_oTimer = null;
   }
   // Hide the fake modal DIV
   divModal.style.width = "0px";
   divModal.style.height = "0px";
   divProgressDialog.style.display = "none";
   // Remove our event handlers
   window.onresize = null;
   window.onbeforeunload = null;
   nRepetitions = 0;
}
function continueLongProcess()
{
   if (nRepetitions < NUMBER_OF_REPETITIONS)
   {
      // Set the timeout somewhere between 0 and .25 seconds
      var nTimeoutLength = Math.random() * 250;
      updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);
      g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
      nRepetitions++;
   }
   else
   {
      stopLongProcess();
   }
}
function showWarning()
{
   //Warn users before they refresh the page or navigate away
   return "Navigating to a different page or refreshing the window could cause you to lose precious data.nnAre you*absolutely* certain you want to do this?";
}
function resizeModal()
{
   // Resize the DIV which fakes the modality of the dialog DIV
   divModal.style.width = document.body.scrollWidth;
   divModal.style.height = document.body.scrollHeight;
   // Re-center the dialog DIV
   divProgressDialog.style.left = ((document.body.offsetWidth - 
divProgressDialog.offsetWidth) / 2);
   divProgressDialog.style.top = ((document.body.offsetHeight - 
divProgressDialog.offsetHeight) / 2);
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">

<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX: 
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface; 
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog" 
onselectstart="window.event.returnValue=false;">
   <DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext; 
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
      Downloading Requested Document
   </DIV>
   <DIV STYLE="PADDING: 5px">
      Please wait while I download the document you requested.
   </DIV>
   <DIV STYLE="PADDING: 5px">
      This may take several seconds.
   </DIV>
   <DIV STYLE="PADDING: 5px">
         <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow; 
WIDTH: 336px; HEIGHT: 15px">
            <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN: 
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT: 
13px;"></DIV>
         </DIV>
   </DIV>
   <DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px; 
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
         <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button" 
ID="btnCancel" onclick="stopLongProcess();" VALUE="Cancel">
   </DIV>
</DIV>


<DIV ID="divModal"
   STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
 absolute; TOP: 0px; Z-INDEX: 3"
   onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>

</body>
</html>

运行代码

复制代码

文字滚动

运行代码

复制代码

可拖动窗口，附带鼠标控制渐变透明，开启关闭功能

运行代码

复制代码

繁简体文字转换工具

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>这一技客</title>
<link href="style.css" rel="stylesheet" type="text/css">
</script>
</head>
<body>
<div align="center">
<table width="750" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
  <tr>
    <td align="center" bgcolor="#F4F4F4"><b>欢迎使用繁简体文字转换工具</b></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF"><input type=button class="Submit" onclick=iText.value=iText.value.s2t() value='简→繁'>
      　
      <input type=button class="Submit" onclick=iText.value=iText.value.t2s() value='繁→简'>
      <br>
      <textarea cols="70" rows="8" class="transform" id="iText">欢迎使用 繁简 文本 转换</textarea></td>
  </tr>
</table>
  <script>
function window.onload(){
var s="万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县叁参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫嗬嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆塬墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尝尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并幺广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳煺熘爱爷牍牦牵牺犊犟犭状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铌铍铎铏铐铑铒铓铔铕铖铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铩铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗锘错锚锛锜锝锞锟锠锡锢锣锤锥锦锧锨锩锪锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镄镅镆镇镈镉镊镋镌镍镎镏镐镑镒镓镔镕镖镗镘镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镵镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹙鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾鼋鼌鼍鼗鼹齄齐齑齿龀龁龂龃龄龅龆龇龈龉龊龋龌龙龚龛龟"
var t="萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮沖決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣三參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁呵噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪原牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵嘗堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並么廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊退溜愛爺牘犛牽犧犢強犬狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗贊贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈮鈹鐸鉶銬銠鉺鋩錏銪鋮鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鎩鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺鍩錯錨錛錡鍀錁錕錩錫錮鑼錘錐錦鑕鍁錈鍃錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鐨鎇鏌鎮鎛鎘鑷钂鐫鎳鎿鎦鎬鎊鎰鎵鑌鎔鏢鏜鏝鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑱鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶖鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽黿鼂鼉鞀鼴齇齊齏齒齔齕齗齟齡齙齠齜齦齬齪齲齷龍龔龕龜"
function String.prototype.s2t(){
var k=''
for(var i=0;i<this.length;i++) k+=(s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i)))
return k
}
function String.prototype.t2s(){
var k=''
for(var i=0;i<this.length;i++) k+=(t.indexOf(this.charAt(i))==-1)?this.charAt(i):s.charAt(t.indexOf(this.charAt(i)))
return k
}
}
</script>
</div>
</body>
</html>

运行代码

复制代码

向上滚动

<div id=demo style=overflow:hidden;height:100;width:90; 
background:#214984;color:#ffffff> 
<div id=demo1> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 </div> 
 <div id=demo2></div> 
 </div> 
   <script> 
   var speed=30 
   demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2 
   function Marquee(){ 
//当滚动至demo1与demo2交界时 
if(demo2.offsetTop-demo.scrollTop<=0)   
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 
else{ 
demo.scrollTop++ 
   } 
   } 
   var MyMar=setInterval(Marquee,speed)//设置定时器 
//鼠标移上时清除定时器达到滚动停止的目的 
   demo.onmouseover=function() {clearInterval(MyMar)} 
//鼠标移开时重设定时器 
   demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} 
</script>

运行代码

复制代码

向下滚动

<div id=demo style=overflow:hidden;height:100;width:90; 
background:#214984;color:#ffffff> 
<div id=demo1> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
 <img src="http://www.geekso.com/template/default/images/logo.gif"> 
</div> 
<div id=demo2></div> 
</div> 
    <script> 
    var speed=30 
    demo2.innerHTML=demo1.innerHTML 
    demo.scrollTop=demo.scrollHeight 
    function Marquee(){ 
    if(demo1.offsetTop-demo.scrollTop>=0) 
    demo.scrollTop+=demo2.offsetHeight 
    else{ 
    demo.scrollTop-- 
    } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() {clearInterval(MyMar)} 
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
  </script>

运行代码

复制代码

向左滚动

<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr><td id="demo1" valign="top" align="center">
          <table cellpadding="2" cellspacing="0" border="0">
            <tr align="center">
        <td><img src="http://www.geekso.com/template/default/images/logo.gif" width="88"></td>
              <td><img src="http://www.geekso.com/template/default/images/logo.gif" width="88"></td>
        <td><img src="http://www.geekso.com/template/default/images/logo.gif" width="88"></td>
        <td><img src="http://www.geekso.com/template/default/images/logo.gif" width="88"></td>
<td><img src="http://www.geekso.com/template/default/images/logo.gif" width="88"></td><td><img src="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.geekso.com/template/default/images/logo.gif" width="88"></td>
            </tr>
          </table>
        </td>
        <td id="demo2" valign="top"></td>
        </tr>
      </table>
    </div>
  <script>
  var speed=1//速度数值越大速度越慢
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo2.offsetWidth-demo.scrollLeft<=0)
  demo.scrollLeft-=demo1.offsetWidth
  else{
  demo.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>

运行代码

复制代码

向右滚动

<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr><td id="demo1" valign="top" align="center">
          <table cellpadding="2" cellspacing="0" border="0">
            <tr align="center">
        <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
        <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
        <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
            </tr>
          </table>
        </td>
        <td id="demo2" valign="top"></td>
        </tr>
      </table>
    </div>
  <script>
  var speed=1//速度数值越大速度越慢
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo.scrollLeft<=0)
  demo.scrollLeft+=demo2.offsetWidth
  else{
  demo.scrollLeft--
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>

运行代码

复制代码

将HTML自动转为JS代码

运行代码

复制代码

锁定表列

<HTML><HEAD><TITLE>锁定表格栏位范例网页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
    FONT: 12px 细明体; CURSOR: default
}
TD {
    FONT: 12px 细明体; CURSOR: default
}
.title {
    BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ccc; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap
}
.cdata {
    BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap
}
</STYLE>
<SCRIPT language=JavaScript>
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 )
var DataTitles=new Array(
"歌手 / 团体#90 #left"  ,
"专辑名称   #130#left"  ,
"发行公司   #110#left"  ,
"本周排名   #58 #center",
"排名状况   #58 #center",
"上周排名   #58 #center",
"上榜周数   #58 #center",
"最高名次   #58 #center",
"销售百分比 #70 #center")
// 栏位资料 ( 二维阵列 )
var DataFields=new Array()
DataFields[0] =new Array("萧亚轩"  ,"爱的主打歌-吻"   ,"维京 Virgin"    ,"1" ,"持平"  ,"1" ,"2","1" ,"2.9 %")
DataFields[1] =new Array("张惠妹"  ,"发烧"            ,"华纳 Warner"    ,"2" ,"持平"  ,"2" ,"2","2" ,"2.1 %")
DataFields[2] =new Array("陶吉吉"  ,"黑色柳丁"        ,"全员集合 Shock" ,"3" ,"持平"  ,"3" ,"5","1" ,"1.8 %")
DataFields[3] =new Array("S.H.E"   ,"美丽新世界"      ,"华研 HIM"       ,"4" ,"持平"  ,"4" ,"6","1" ,"1.2 %")
DataFields[4] =new Array("艾薇儿"  ,"展翅高飞"        ,"博德曼 BMG"     ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %")
DataFields[5] =new Array("任贤齐"  ,"一个任贤齐"      ,"滚石 Rock"      ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %")
DataFields[6] =new Array("范逸臣"  ,"范逸臣第一张专辑","丰华 Forward"   ,"7" ,"持平"  ,"7" ,"2","7" ,"0.9 %")
DataFields[7] =new Array("谢霆锋"  ,"无形的他全精选"  ,"新力 Sony"      ,"8" ,"下跌"  ,"6" ,"4","4" ,"0.9 %")
DataFields[8] =new Array("周蕙"    ,"寂寞城市"        ,"福茂 Decca"     ,"9" ,"下跌"  ,"5" ,"3","5" ,"0.8 %")
DataFields[9] =new Array("周杰伦"  ,"八度空间"        ,"博德曼 BMG"     ,"10","下跌"  ,"8" ,"8","1" ,"0.8 %")
DataFields[10]=new Array("酷玩乐团","玩过头"          ,"科艺百代 EMI"   ,"11","上升"  ,"16","2","11","0.7 %")
DataFields[11]=new Array("张震岳"  ,"等我有一天"      ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %")
DataFields[12]=new Array("堂本刚"  ,"红与蓝"          ,"艾回 Avex"      ,"13","新进榜","-" ,"1","13","0.6 %")
DataFields[13]=new Array("ENERGY"  ,"COME ON"         ,"环球 Universal" ,"14","下跌"  ,"10","9","5" ,"0.6 %")
DataFields[14]=new Array("陈冠希"  ,"TRANSITION"      ,"艾回 Avex"      ,"15","下跌"  ,"9" ,"3","5" ,"0.4 %")
DataFields[15]=new Array("合辑"    ,"MTV 嘻哈大师"    ,"环球 Universal" ,"16","下跌"  ,"12","3","12","0.4 %")
</SCRIPT>
<SCRIPT language=JavaScript>
var BoxWidth = 480    // 资料表显示宽度 ( 不含卷轴 )
var ShowLine = 10    // 资料表显示列数
var RsHeight = 21    // 资料列高度
var LockCols = 1    // 要锁定的栏位数 ( 由左至右 )
function WriteTable(){    // 写入表格
var iBoxWidth=BoxWidth
var NewHTML="<table border="0" cellpadding="0" cellspacing="0"><tr>
<td><div style="width:100%;overflow-x:scroll">
<table border="0" cellpadding="0" cellspacing="0"><tr>"
for(i=0;i<DataTitles.length;i++){
  if(i<LockCols){
    var cTitle=DataTitles[i].split("#")
    iBoxWidth-=cTitle[1]
    var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"
    NewHTML+="<td><div class="title" style="width:"+cTitle[1]+"px;height:"+RsHeight+"px" title=""+DynTip+"" onclick="ResetTable("+i+")">"+cTitle[0]+"</div></td>"
  }
}
NewHTML+="</tr>
<tr><td colspan=""+LockCols+"">
<div id="DataFrame1" style="position:relative;width:100%;overflow:hidden">
<div id="DataGroup1" style="position:relative"></div></div>
</td></tr></table></div></td>
<td valign="top"><div style="width:"+iBoxWidth+"px;overflow-x:scroll">
<table border="0" cellpadding="0" cellspacing="0"><tr>"
for(i=0;i<DataTitles.length;i++){
  if(i>=LockCols){
    var cTitle=DataTitles[i].split("#")
    NewHTML+="<td><div class="title" style="width:"+cTitle[1]+"px;height:"+RsHeight+"px" title="锁定此栏位" onclick="ResetTable("+i+")">"+cTitle[0]+"</div></td>"
  }
}
NewHTML+="</tr>
<tr><td colspan=""+(DataTitles.length-LockCols)+"">
<div id="DataFrame2" style="position:relative;width:100%;overflow:hidden">
<div id="DataGroup2" style="position:relative"></div>
</div></td></tr></table>
</div></td><td valign="top">
<div id="DataFrame3" style="position:relative;background:#000;overflow-y:scroll" onscroll="SYNC_Roll()">
<div id="DataGroup3" style="position:relative;width:1px;visibility:hidden"></div>
</div></td></tr></table>"
DataTable.innerHTML=NewHTML
ApplyData()
}
function ApplyData(){    // 写入资料
var NewHTML="<table border="0" cellpadding="0" cellspacing="0">"
for(i=0;i<DataFields.length;i++){
  NewHTML+="<tr>"
  for(j=0;j<DataTitles.length;j++){
    if(j<LockCols){
      var cTitle=DataTitles[j].split("#")
      NewHTML+="<td><div class="cdata" style="width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"">"+DataFields[i][j]+"</div></td>"
    }
  }
  NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup1.innerHTML=NewHTML
var NewHTML="<table border="0" cellpadding="0" cellspacing="0">"
for(i=0;i<DataFields.length;i++){
  NewHTML+="<tr>"
  for(j=0;j<DataTitles.length;j++){
    if(j>=LockCols){
      var cTitle=DataTitles[j].split("#")
      NewHTML+="<td><div class="cdata" style="width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"">"+DataFields[i][j]+"</div></td>"
    }
  }
  NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup2.innerHTML=NewHTML
DataFrame1.style.pixelHeight=RsHeight*ShowLine
DataFrame2.style.pixelHeight=RsHeight*ShowLine
DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight
DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1)
}
function ResetTable(n){
var iBoxWidth=0
for(i=0;i<DataTitles.length;i++){
  if(i<(n+1)){
    var cTitle=DataTitles[i].split("#")
    iBoxWidth+=parseInt(cTitle[1])
  }
}
if(iBoxWidth>BoxWidth){
  var Sure=confirm("n锁定栏位的宽度大於资料表显示的宽　　nn度，这可能会造成版面显示不正常。nnn您确定要继续吗？")
}else{
  Sure=true
}
if(Sure){
  LockCols=(LockCols==n+1)?0:n+1
  WriteTable()
}
}
function SYNC_Roll(){
DataGroup1.style.posTop=-DataFrame3.scrollTop
DataGroup2.style.posTop=-DataFrame3.scrollTop
}
window.onload=WriteTable
</SCRIPT>
<META content="MSHTML 6.00.3790.2666" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<H4>锁定表格栏位范例网页</H4>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar">
<DIV id=DataTable>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV style="OVERFLOW-X: scroll; WIDTH: 100%">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=title title=解除锁定 style="WIDTH: 90px; HEIGHT: 21px" onclick=ResetTable(0)>歌手 / 团体</DIV></TD></TR>
<TR>
<TD>
<DIV id=DataFrame1 style="OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; HEIGHT: 210px">
<DIV id=DataGroup1 style="POSITION: relative">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">萧亚轩</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">张惠妹</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">陶吉吉</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">S.H.E</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">艾薇儿</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">任贤齐</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">范逸臣</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">谢霆锋</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">周蕙</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">周杰伦</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">酷玩乐团</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">张震岳</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">堂本刚</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">ENERGY</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">陈冠希</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">合辑</DIV></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top>
<DIV style="OVERFLOW-X: scroll; WIDTH: 390px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 130px; HEIGHT: 21px" onclick=ResetTable(1)>专辑名称 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 110px; HEIGHT: 21px" onclick=ResetTable(2)>发行公司 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(3)>本周排名 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(4)>排名状况 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(5)>上周排名 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(6)>上榜周数 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(7)>最高名次 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 70px; HEIGHT: 21px" onclick=ResetTable(8)>销售百分比 </DIV></TD></TR>
<TR>
<TD colSpan=8>
<DIV id=DataFrame2 style="OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; HEIGHT: 210px">
<DIV id=DataGroup2 style="POSITION: relative">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">爱的主打歌-吻</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">维京 Virgin</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">2.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">发烧</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">华纳 Warner</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">2.1 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">黑色柳丁</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">全员集合 Shock</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">美丽新世界</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">华研 HIM</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.2 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">展翅高飞</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">博德曼 BMG</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.1 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">一个任贤齐</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">滚石 Rock</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.0 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">范逸臣第一张专辑</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">丰华 Forward</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">无形的他全精选</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">新力 Sony</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">寂寞城市</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">福茂 Decca</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">八度空间</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">博德曼 BMG</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">10</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">玩过头</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">科艺百代 EMI</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">11</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">上升</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">16</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">11</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.7 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">等我有一天</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">魔岩 Magicstone</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">红与蓝</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">艾回 Avex</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">13</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">13</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">COME ON</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">环球 Universal</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">14</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">10</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">TRANSITION</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">艾回 Avex</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">15</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.4 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">MTV 嘻哈大师</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">环球 Universal</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">16</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.4 %</DIV></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top>
<DIV id=DataFrame3 style="OVERFLOW-Y: scroll; BACKGROUND: #000; POSITION: relative; HEIGHT: 231px" onscroll=SYNC_Roll()>
<DIV id=DataGroup3 style="VISIBILITY: hidden; WIDTH: 1px; POSITION: relative; HEIGHT: 357px"></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<P>点取栏位标题可重新设定或解除目前的锁定状态</P></CENTER></BODY></HTML>

运行代码

复制代码

文字与图片向上动

<SCRIPT language=JavaScript>
var dde_para = new Array();
var dde_aa   = new Array();
var dde_url  = document.location.href;
var dde_pp   = dde_url.split("#")[1];
var jspfile  = 1;
var para     = null;
//滚动页面的宽
var scrollwidth = 705;
//滚动页面的高
var scrollheight = 120;
if(dde_pp!=null && dde_pp.length>0){
  dde_para = dde_pp.split("&");}
  for(i=0; dde_para!=null && i<dde_para.length;i++){
  dde_aa = dde_para[i].split("=");
  eval("var "+dde_aa[0] +"='"+dde_aa[1]+"'");}
var car_num = 5;
var i=1;
//默认滚动时间10秒
var pausebetweenimages=800 * 8;
var slideimages=new Array();
//滚动页面1的URL
slideimages[0]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='http://news.qq.com/photon/08photojdlm1.htm'></iframe>";
//滚动页面2的URL
slideimages[1]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='http://news.qq.com/photon/08photojdlm2.htm'></iframe>";
function move1(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=car_num){
tdiv.style.pixelTop=0
setTimeout("move1(tdiv)",pausebetweenimages)
setTimeout("move2(second2)",pausebetweenimages)
return}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=car_num
setTimeout("move1(tdiv)",50)}
else{
tdiv.style.pixelTop=scrollheight
tdiv.innerHTML=slideimages[0]
if (i==slideimages.length-1)
i=0
else i++}}
function move2(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=car_num){
tdiv2.style.pixelTop=0
setTimeout("move2(tdiv2)",pausebetweenimages)
setTimeout("move1(first2)",pausebetweenimages)
return}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=car_num
setTimeout("move2(second2)",50)}
else{
tdiv2.style.pixelTop=scrollheight
tdiv2.innerHTML=slideimages[1]
if (i==slideimages.length-1)
i=0
else i++}}
function conmouse(){car_num=0;}
function cmouseout(){car_num=5;}
function startscroll(){
if (document.all){
move1(first2)
second2.style.top=scrollheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollheight+5
document.main.document.second.visibility='show'}}
//-->
</SCRIPT>
  <ILAYER id=main height="&amp;{scrollheight};" 
      width="&amp;{scrollwidth};">
  <LAYER name="first" left="0" 
      top="1" width="&amp;{scrollwidth};" id=first>
  <SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[0])
</SCRIPT>
  </LAYER>
  <LAYER id=second width="&amp;{scrollwidth};" top="0" left="0" 
      visibility="hide">
  <SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[1])
</SCRIPT>
  </LAYER>
  </ILAYER>
  <script language=JavaScript1.2> 
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollwidth+';height:'+scrollheight+';overflow:hiden;background-color:#ffffff">')
document.writeln('<div onMouseOver="conmouse()" onMouseOut="cmouseout()" style="position:absolute;width:'+scrollwidth+';height:'+scrollheight+';clip:rect(0 '+scrollwidth+' '+scrollheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')}
startscroll();
</script>

运行代码

复制代码

点击显示的下拉列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>这一技客</title>
<script language="javascript">
/*--------------------------------------------------|
| Phenix PanelBar | www.seu.edu.cn                  |
|---------------------------------------------------|
|                                                   |
|  I believe one day I can fly like phenix!         |
|                                                   |
| Finished: 17.11.2004                              |
|--------------------------------------------------*/
//item object
//alert("arrived here");
function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){
  
   this.id=id;
   this.pid=pid;
   this.label=label;
   this.url=url;
   this.title=title;
   this.target=target;
   this.img=img;
   this.over=over;
   this.img2=img2;
   this.over2=over2;
   this.type=type;
   //this._ih = false;  //is it the head item?
   this._hc = false;   //has the child item?
   this._ls = false;  //has sibling item?
   this._io = false;  //whether the panelbar is open?
};
//menu object
function PhenMenu(objName) {
    this.config = {
    closeSameLevel  : true
  };
  //alert("asdsdf");
  this.obj = objName;
  this.items = [];
  
  this.root = new PhenItem(-1);
    
};
//add a new item to the item array
PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){
  this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target);
};
// Outputs the menu to the page
PhenMenu.prototype.toString = function() {
  //alert("arrived here");
  var str = '<div>n';
  if (document.getElementById) {
    str += this.addItem(this.root);
  } else str += 'Browser not supported.';
  str += 'n</div>';
    //alert(str);
  //document.write(str);
  //alert(this.items[0]._hc);
  return str;
};
// Creates the menu structure
PhenMenu.prototype.addItem = function(pItem) {
  var str = '';
  //var n=0;
  for (var n=0; n<this.items.length; n++) {
    
    if(this.items[n].pid == pItem.id){
      
      var ci = this.items[n];
      //alert(ci.pid);
      //alert(ci.id);
      this.setHS(ci);
      //alert("item:"+ci._hc);
      //alert(ci._ls);
      str += this.itemCreate(ci, n);
      
      if(ci._ls) break;
      
    }
  }
  return str;
};
// Creates the node icon, url and text
PhenMenu.prototype.itemCreate = function(pItem, itemId) {
//alert(pItem.type.toLowerCase());
  var str = '';
  
    if(pItem.type == 'header')
      str = '<table width="100%" class="header" valign="middle" onmouseover="this.className='headerSelected'" onmouseout="this.className='header'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';
  else
    str = '<table width="100%" class="item" valign="middle" onmouseover="this.className='itemOver'" onmouseout="this.className='item'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';
  if (pItem.img) {
    str += '&nbsp;&nbsp;<img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />';
  }
  if (pItem.url) {
    str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
    if (pItem.title) str += ' title="' + pItem.title + '"';
    if (pItem.target) str += ' target="' + pItem.target + '"';
    str += ' onmouseover="window.status='' + pItem.label + '';return true;" onmouseout="window.status='';return true;"';
    str += '>';
  }
  str += '&nbsp;&nbsp;&nbsp;&nbsp;' + pItem.label;
  if (pItem.url) str += '</a>';
  str += '</td></tr></table>';
  //alert(pItem.url);
  //alert(str);
  if (pItem._hc) {
    str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
    str += this.addItem(pItem);
    str += '</td></tr></table>';
    //alert(str);
    //document.write(str);
  }
  return str;
};
// Checks whether a item has child and if it is the last sibling
PhenMenu.prototype.setHS = function(pItem) {
  var lastId;
  for (var n=0; n<this.items.length; n++) {
    if (this.items[n].pid == pItem.id) pItem._hc = true;
    if (this.items[n].pid == pItem.pid) lastId = this.items[n].id;
  }
  if (lastId==pItem.id) pItem._ls = true;
};
// Toggle Open or close
PhenMenu.prototype.o = function(id) {
  //alert(this.items.length);
  var ci = this.items[id];
    //alert(ci);
  //this.setHS(ci);
  //alert(this.items[id]._hc);
  this.itemStatus(!ci._io, id);
  ci._io = !ci._io;
    
  if (this.config.closeSameLevel) this.closeLevel(ci);
};
// Change the status of a item(open or closed)
PhenMenu.prototype.itemStatus = function(status, id) {
  cTable  = document.getElementById('ct' + this.obj + id);
  if(status){
      
    cTable.filters.item(0).Apply();
    cTable.style.display = 'block';
    cTable.style.visibility = "";
    cTable.filters.item(0).Play();
  }
  else
    cTable.style.display = 'none';
  
  //cDiv.style.display = (status) ? 'block': 'none';
};
// Closes all items on the same level as certain item
PhenMenu.prototype.closeLevel = function(pItem) {
               //alert(this.items[0]._hc);
  for (var n=0; n<this.items.length; n++) {
            //alert(this.items[n]._hc);
    if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {
      
      this.itemStatus(false, n);
      this.items[n]._io = false;
      this.closeAllChildren(this.items[n]);
    }
  }
};
PhenMenu.prototype.closeAllChildren = function(pItem) {
  for (var n=0; n<this.items.length; n++) {
    if (this.items[n].pid == pItem.id && this.items[n]._hc) {
      if (this.items[n]._io) this.itemStatus(false, n);
      this.items[n]._io = false;
      this.closeAllChildren(this.items[n]);    
    }
  }
};
</script>
<style>
.header {
  height:25px;
  FONT-FAMILY: Arial,Verdana;
  background-image:url(images/sideNavCategoryBg.gif);
  font-size:11px;
  color: #666666;
    
}
.headerSelected {  
  height:25px;
  FONT-FAMILY: Arial,Verdana;
  background-image:url(images/sideNavCategorySelectedBg.gif);
  font-size:11px;
  background-repeat:repeat-x; 
  COLOR: #333333;
  CURSOR: pointer;
}
.navigation_item {
  PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
}
.item {
    PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; 
}
.itemOver {
  PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
}
.itemSelected {
  PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
}
A.headerSelected {
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
}
</style>
</head>
<body>
<table width="221" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
  <p>Phenix panelbar</p>
  <script type="text/javascript">
    p = new PhenMenu('p');
        //alert("asds");
    p.add(0,-1,'label1凤凰','','header','http://www.telerik.com/images/ProductImages//e.gif');
    p.add(1,0,'label1.1凤凰','www.sina.com.cn');
    p.add(2,0,'label1.2','www.sina.com.cn');
    p.add(3,0,'label1.3','www.sina.com.cn');
    p.add(4,0,'label1.4','www.sina.com.cn');
    
    p.add(5,-1,'label2','','header','http://www.telerik.com/images/ProductImages//c.gif');
    p.add(6,5,'label2.1','www.seu.edu.cn');
    p.add(7,5,'label2.2','www.seu.edu.cn');
    p.add(8,5,'label2.3','www.seu.edu.cn');
    p.add(9,5,'label2.4','www.seu.edu.cn');
    
    p.add(10,-1,'label3','','header','http://www.telerik.com/images/ProductImages//m.gif');
    p.add(11,10,'label3.1','www.seu.edu.cn');
    p.add(12,10,'label3.2','www.seu.edu.cn');
    p.add(13,10,'label3.3','www.seu.edu.cn');
    p.add(14,10,'label3.4','www.seu.edu.cn');
    
    p.add(15,-1,'label4','','header','http://www.telerik.com/images/ProductImages//r.gif');
    p.add(16,15,'label4.1','www.seu.edu.cn');
    p.add(17,15,'label4.2','www.seu.edu.cn');
    p.add(18,15,'label4.3','www.seu.edu.cn');
    p.add(19,15,'label4.4','www.seu.edu.cn');
        //alert(p.items.length)
    document.write(p);
    
    //p.toString();
        //alert(p.items.length);
    //delete(p);
  </script>  </td>
  </tr>
</table>
</body>
</html>

运行代码

复制代码

用层模拟可移动的小窗口``` 可用于网站的提示信息哦

<html>
<head>
<title>_xWin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="http://www.xuemu.net">
<style type='text/css'>

</style>
<script language=JScript>

</script>
<script language='JScript'>

</script>
</head>
<base target="_blank">
<body onselectstart='return false' oncontextmenu='return false' >
<a onclick="ShowHide('1',null);return false;" href="">窗口1</a>
<a onclick="ShowHide('2',null);return false;" href="">窗口2</a>
<a onclick="ShowHide('3',null);return false;" href="">窗口3</a>
</body>
</html>

运行代码

复制代码

获得文本框的文件名

运行代码

复制代码

无图片实现圆角框

运行代码

复制代码

图片预加载的使用

图片切换效果

运行代码

复制代码

功能强大的旋转导航文字圈

<body>
<style type="text/css"> 
BODY 
{ 
background : #efefef; 
font : 12px Verdana; 
} 
A { color : #e70 } 
A:hover { text-decoration : none } 
.spin 
{ 
position : absolute; 
visibility : hidden; 
z-index : auto; 
} 
.spin A 
{ 
font : 12px Verdana; 
text-decoration : none; 
} 
.spin A:hover 
{ 
text-decoration : underline overline; 
} 
</style> 
<script language="JavaScript1.2">
function getPageSize()
{
  this.x = document.getElementsByTagName('html').item(0).clientWidth||document.getElementsByTagName('html').item(0).offsetWidth||document.body.offsetWidth||innerWidth
  this.y = document.getElementsByTagName('html').item(0).clientHeight||document.getElementsByTagName('html').item(0).offsetHeight||document.body.offsetHeight||innerHeight
  this.x2 = parseInt(this.x/2)||0
  this.y2 = parseInt(this.y/2)||0
  this.sx = document.body.scrollWidth||0
  this.sy = document.body.scrollHeight||0
}
var pg
var pi = 3.1415
function spinMenu(cls,rad,eSpd,rSpd,dir,x,y,noCt,runEx)
{
  pg = new getPageSize()
  this.cls = cls
  this.rad = rad
  this.eSpd = eSpd
  this.rSpd = rSpd
  this.dir = dir ? 1 : -1
  this.x = x<0 ? pg.x2 : x
  this.y = y<0 ? pg.y2 : y
  this.runEx = runEx||0
  this.noCt = noCt||0
  this.r = 0 // radius flux
  this.ex = 0 // expand timeout
  this.ct = 0 // contract timeout
  this.rt = 1 // rotate timeout
  this.vis = 0 // visibility
  this.rNum = 0 // rotational flux
  this.rSpd2 = 0 // rSpd holder
  this.exDone = 0 // expand complete?
  this.ctDone = 1 // contract complete?
  this.toFig = 0
  this.atX = 0
  this.atY = 0
  this.url = 0
  this.target = 0
  eval(this.obj + "=this")
  this.items = new Array()
  this.el = document.getElementsByTagName('div')
  for(i=0;(this.el.item(i));i++)
  {
    if(this.el.item(i).className==this.cls)
    {
      this.el.item(i).onmouseover = new Function(this.obj+'.stop()')
      this.el.item(i).onmouseout = new Function(this.obj+'.rotate()')
      this.el.item(i).onclick = new Function(this.obj+'.contract()')
      this.items[this.items.length] = this.el.item(i)
    }
  }
  delete this.el
  for(i=0;(this.items[i]);i++)
  {
    if(!this.items[i].childNodes.item(0).nodeValue)
    {
      this.items[i].childNodes.item(0).onmouseover = new Function('status=this.href;return true')
      this.items[i].childNodes.item(0).onmouseout = new Function('status='';return true')
      this.items[i].childNodes.item(0).onclick = new Function(this.obj+'.setURL(this.href,this.target);return false')
      this.items[i].childNodes.item(0).onfocus = new Function('this.blur()')
    }
  }
  return this
}
spinMenu.prototype.init = function()
{
  this.hide()
  this.place()
  this.expand()
}
spinMenu.prototype.rotate = function()
{
  if(this.rSpd)
  {
    this.rNum += pi/(1000/this.rSpd)*this.dir
    if(this.exDone)
    {
      this.place()
      clearTimeout(this.rt)
      this.rt = setTimeout(this.obj+'.rotate()',20)
    }
  }
}
spinMenu.prototype.stop = function()
{
  clearTimeout(this.rt)
  this.rt = 0
}
spinMenu.prototype.expand = function()
{
  if(this.exDone!=1)
  {
    this.ctDone=0
    if(!this.vis) this.show()
    if(this.runEx) eval(this.runEx)
    if(this.ct!=0)
    {
      clearTimeout(this.ct)
      this.ct = 0
    }
    if(this.r<this.rad)
    {
      this.r += this.eSpd
      if(this.rSpd2==0) this.rSpd2 = this.rSpd
      this.rSpd = this.eSpd*3
      this.rotate()
      this.place()
      this.ex = setTimeout(this.obj+'.expand()',10)
    }
    else
    {
      this.ex = 0
      this.rSpd = this.rSpd2
      this.rSpd2 = 0
      this.ctDone = 0
      this.exDone = 1
      this.rotate()
    }
  }
}
spinMenu.prototype.contract = function()
{
  if(this.ctDone!=1&&!this.noCt)
  {
    this.exDone = 0
    if(this.ex!=0)
    {
      clearTimeout(this.ex)
      this.ex = 0
    }
    if(this.r>0)
    {
      this.r -= this.eSpd
      if(this.rSpd2==0) this.rSpd2 = this.rSpd
      this.rSpd = this.eSpd
      this.rotate()
      this.place()
      this.ct = setTimeout(this.obj+'.contract()',10)
    }
    else
    {
      this.rSpd = this.rSpd2
      this.rSpd2 = 0
      this.rNum = 0
      this.stop()
      this.hide()
      this.exDone = 0
      this.ctDone = 1
      this.goURL()
    }
  }
  else this.goURL()
}
spinMenu.prototype.place = function()
{
  for(i=0;(this.items[i]);i++)
  {
    this.atPt(i)
    this.items[i].style.left = this.atX-(this.items[i].offsetWidth/2)+'px'
    this.items[i].style.top = this.atY-(this.items[i].offsetHeight/2)+'px'
  }
}
spinMenu.prototype.atPt = function(pt)
{
  this.toFig = pi/(this.items.length/2)*(pt+this.rNum)
  this.atX = parseInt(Math.cos(this.toFig)*this.r+this.x)
  this.atY = parseInt(Math.sin(this.toFig)*this.r+this.y)
}
spinMenu.prototype.show = function()
{
  for(i=0;(this.items[i]);i++)
  {
    this.items[i].style.display = 'block'
    this.items[i].style.visibility = 'visible'
    this.vis = 1
  }
}
spinMenu.prototype.hide = function()
{
  for(i=0;(this.items[i]);i++)
  {
    this.items[i].style.visibility = 'hidden'
    this.items[i].style.display = 'none'
    this.vis = 0
  }
}
spinMenu.prototype.changeDir = function()
{
  this.dir = this.dir==1 ? -1 : 1
}
spinMenu.prototype.setURL = function(url,target)
{
  this.url = url
  this.target = target
}
spinMenu.prototype.goURL = function()
{
  if(this.url)
  {
    if(!this.target)
      if(document.getElementsByTagName('base').length) this.target = document.getElementsByTagName('base').item(0).target
    if(this.target)
    {
      if(this.target=='_blank') open(this.url)
      else if(this.target=='_parent') parent.location = this.url
      else if(this.target=='_top') top.location = this.url
      else if(this.target.indexOf('_')<0)
      {
        if(eval('parent.'+this.target)) eval('parent.'+this.target+'.document.location=this.url')
        else if(eval('top.'+this.target)) eval('top.'+this.target+'.document.location=this.url')
        else open(this.url,this.target)
      }
      else location = this.url
    }
    else location = this.url
    this.url = 0
  }
}
</script> 
<script language="JavaScript1.2" type="text/javascript"> 
function centerIt() 
{ 
pg = new getPageSize() 
menu.x = pg.x2-10 
menu.y = pg.y2 
} 
function initSpinMenu() 
{ 
menu = new spinMenu( 
'spin', // className 
120, // radius 
12, // expand/contract speed 
3, // rotational speed 
1, // direction (cw=1,ccw=0) 
-1, // origin x 
-1, // origin y 
0, // stay expanded? 
0 // run before expand 
) 
menu.init() 
} 
onload=initSpinMenu 
onresize=centerIt 
</script> 
<base target="newWin"> 
<div align="right"><a href="javascript:menu.expand()" target="_self">展开</a> | <a href="javascript:menu.contract()" target="_self">隐藏</a> | <a href="javascript:menu.stop()" target="_self">停止</a> | <a href="javascript:menu.rotate()" target="_self">旋转</a> | <a href="javascript:menu.changeDir()" target="_self">改变旋转方向</a></div> 
<div class="spin"><a href="http://www.butong.net">网页特效库</a></div> 
<div class="spin"><a href="http://www.butong.net/background/index.htm">背景特效</a></div> 
<div class="spin"><a href="http://www.butong.net/moban/index.htm">整站模板</a></div> 
<div class="spin"><a href="http://www.butong.net/navigation/index.htm">导航特效</a></div> 
<div class="spin"><a href="http://www.butong.net/time/index.htm">时间特效</a></div> 
<div class="spin"><a href="http://www.butong.net/img/index.htm">图象特效</a></div> 
<div class="spin"><a href="http://www.butong.net/text/index.htm">文本特效</a></div> </body>

运行代码

复制代码

XP效果右键菜单

<STYLE>
.menutable {
  BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; Z-INDEX: 100; BORDER-LEFT: #307ce8 5px solid; BORDER-BOTTOM: #307ce8 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
.menutrin {
  CURSOR: hand; COLOR: #ffffff; BACKGROUND-COLOR: #1a71e6
}
.menutrout {
  CURSOR: hand; COLOR: #000000
}
.menutd0 {
  WIDTH: 28px; HEIGHT: 25px; TEXT-ALIGN: center; 改变这个修改菜单高度---: 
}
.menutd1 {
  WIDTH: 46px; FONT-FAMILY: Webdings; TEXT-ALIGN: right
}
.linktd1 {
  WIDTH: 46px
}
.menutd2 {
  WIDTH: 4px
}
.menuhr {
  BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-BOTTOM: #307ce8 1px inset
}
</STYLE>
<BGSOUND id=theBS src="" loop=0>
<body>
<script>

  var one = new MouseMenu("one");
  
  one.addMenu("菜单一",1,"javascript:alert('I am menu');","_self","I am title");
    one[0].addLink("连接一",2,"javascript:alert('I am link')")
    one[0].addHR()
    one[0].addLink("连接二","","javascript:alert('I am link')")    
    one[0].addMenu("菜单三");
      one[0][one[0].length-1].addLink("连接一",1,"javascript:;")
    one[0].addLink("连接三","","javascript:alert('I am link')")
    one[0].addLink("连接四","","javascript:alert('I am link')")
  one.addLink("连接二","","javascript:alert('I am link')")
  one.addMenu("菜单二",3);
    one[2].addLink("连接一","","javascript:alert('I am link')")
  one.addHR();
  one.addLink("连接三，多长都可以",4,"javascript:alert('I am link')")  
  one.addHR();
  one.addLink("网页天使收集",4,"javascript:alert('为你献上最好的javascript脚本')")  
    
</script>
</body>

运行代码

复制代码

腾讯女性频道的一个图片效果广告

运行代码

复制代码

交叉式菜單

运行代码

复制代码

中英文双语导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="中英文,导航,菜单" />
<meta http-equiv="Description" content="这是一中英文双语导航菜单的演示" />
<meta content="all" name="robots" />
<meta name="author" content="blank,怿飞" />
<meta name="copyright" content="http://www.planabc.net" />
<title>中英文双语导航菜单</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">
#nav {
  padding: 10px 10px 0;
  font-size: 12px;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif,宋体;
  margin: 1em 0 0;
  list-style:none;
}

#nav li {
  float: left;
  margin-right: 1px;
}

#nav li a,#nav li a:hover span {
  line-height: 20px;
  text-decoration: none;
  background: #DDDDDD;
  color: #666666;
  display: block;
  width: 80px;
  text-align: center;
  overflow:hidden;
}

#nav li a span {
    display:none;
}

#nav a:hover {
  position: relative;
}

#nav a:hover span {
  display:block;
  position:absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

#nav a:hover span {
    padding-top:2px;
}

#nav li a:hover,#nav li a:hover span {
  color: #FFFFFF;
  background: #DC4E1B;
}

#navbar{
  background: #DC4E1B;
  height: 8px;
  overflow: hidden;
  clear: both;
}
</style>
</head>
<body>
<div id="top">
  <h1>演示：中英文双语导航菜单</h1>
  <samp>原文地址：<a href="http://www.geekso.com" title="中英文双语导航菜单">http://www.geekso.com</a></samp>
  <div id="show">
   <ul id="nav">
    <li><a href="index.html">Home<span>首　页</span></a></li>
    <li><a href="about.html">About us<span>关于我们</span></a></li>
    <li><a href="products.html">Products<span>产品展示</span></a></li>
    <li><a href="services.html">Services<span>售后服务</span></a></li>
    <li><a href="contact.html">Contact<span>联系我们</span></a></li>
  </ul>
  <div id="navbar"></div>
  </div>
</div>
</body>
</html>

运行代码

复制代码

准确获取指定元素 CSS 属性值

<p id="mydiv">要获取背景色的元素</p>

// 说明：准确获取指定元素 CSS 属性值
// 作者：John Resig 《Pro JavaScript Techniques》
// 来源：http://bbs.blueidea.com/viewthread.php?tid=2745446
// 整理：CodeBit.cn ( http://www.CodeBit.cn )

function getStyle( elem, name )
{
  //如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
  if (elem.style[name])
  {
    return elem.style[name];
  }

//否则，尝试IE的方式
  else if (elem.currentStyle)
  {
    return elem.currentStyle[name];
  }

//或者W3C的方法，如果存在的话
  else if (document.defaultView && document.defaultView.getComputedStyle)
  {
    //它使用传统的"text-Align"风格的规则书写方式，而不是"textAlign"
    name = name.replace(/([A-Z])/g,"-$1");
    name = name.toLowerCase();

//获取style对象并取得属性的值(如果存在的话)
    var s = document.defaultView.getComputedStyle(elem,"");
    return s && s.getPropertyValue(name);

//否则，就是在使用其它的浏览器
  }
  else
  {
    return null;
  }
}

var el = document.getElementById("mydiv");

document.write("用 el.style.backgroundColor 获取的值为：'" + el.style.backgroundColor + "'<br />");
document.write("用 getStyle(el,"backgroundColor") 获取的值为：'" + getStyle(el,"backgroundColor") + "'<br />");

//-->
</script>

<br />

运行代码

复制代码