常用的文字、图片的无缝滚动

最新推荐文章于 2024-10-15 09:57:04 发布

HelloJimmy520

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量1.6k

点赞数

分类专栏： Javascript 文章标签： class function div javascript border xhtml

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.文字的无缝向上滚动

<!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>文字列表无缝向上滚动JavaScript代码</title>
<style>
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1  li{
list-style-type:none;
height:22px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
#demo2  li{
list-style-type:none;
height:22px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;height:80px;width:280px;">
<ul id="demo1">  
<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
<li><a href="/soft/5884.shtml" target="_blank">多层嵌套的一个层展开</a></li>
<li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li>
<li><a href="/soft/1286.shtml" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li>
<li><a href="/soft/4216.shtml" target="_blank">《C++ Primer》中文第四版 chm</a></li>
<li><a href="/soft/3388.shtml" target="_blank">C++工资管理系统(Access)</a></li>
<li><a href="/soft/2009.shtml" target="_blank">非常牛的左侧栏JS折叠菜单</a></li>
</ul> 
<div id="demo2"></div>
</div> 
<script> 
var speed=40 
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1"); 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetTop-demo.scrollTop<=0) 
  demo.scrollTop-=demo1.offsetHeight 
else{ 
  demo.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.οnmοuseοver=function() {clearInterval(MyMar)} 
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
</script> 
</body>
</html>

2.图片各种无缝滚动

2.1 经典图片滚动

<!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">
<!--
.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}
.rollBox .LeftBotton{height:52px;width:19px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .RightBotton{height:52px;width:20px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:530px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:132px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
-->
</style>
</head>
<body>
<div class="rollBox">
     <div class="LeftBotton" οnmοusedοwn="ISL_GoUp()" οnmοuseup="ISL_StopUp()" οnmοuseοut="ISL_StopUp()"></div>
     <div class="Cont" id="ISL_Cont">
      <div class="ScrCont">
       <div id="List1">
       
        <!-- 图片列表 begin -->
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s1.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">风景美如画</a></p>
         </div>       
        
 <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s2.jpg" width="109" height="87"  /></a>
          <p><a href="#" target="_blank">千里之行</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s3.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">学习源码站</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s4.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">每一款都测试</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s5.jpg" width="109" height="87" alt="你难道不喜欢" /></a>
          <p><a href="#" target="_blank">你难道不喜欢</a></p>
         </div>
 <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s6.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">你太令我失望了</a></p>
         </div>      
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s7.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">今天早点睡</a></p>
         </div>
        <!-- 图片列表 end -->
        
       </div>
       <div id="List2"></div>
      </div>
     </div>
     <div class="RightBotton" οnmοusedοwn="ISL_GoDown()" οnmοuseup="ISL_StopDown()" οnmοuseοut="ISL_StopDown()"></div>
    </div>
   </div>

<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 528; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
 clearInterval(AutoPlayObj);
 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间
}
function ISL_GoUp(){ //上翻开始
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrUp(){ //上翻动作
 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
 GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
 clearInterval(MoveTimeObj);
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 ISL_ScrDown();
 MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrDown(){ //下翻动作
 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
 GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
 var num;
 if(Comp == 0){MoveLock = false;return;}
 if(Comp < 0){ //上翻
  if(Comp < -Space){
   Comp += Space;
   num = Space;
  }else{
   num = -Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft -= num;
  setTimeout('CompScr()',Speed);
 }else{ //下翻
  if(Comp > Space){
   Comp -= Space;
   num = Space;
  }else{
   num = Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft += num;
  setTimeout('CompScr()',Speed);
 }
}
//--><!]]>
</script>
</body>
</html>

2.2 各种图片滚动

<!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>Marquee 替代 -- 无间滚动</title>
<style type="text/css">
<!--
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}
p {margin: 1em 0}
ul {}
li {height: 1%; overflow: hidden; list-style-type: none}
a {color: #666666; text-decoration: none}
a:hover {color: #333333}
.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}
.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px

#EAEAEA}
.call {display:block;}
.key {display: block; width: 8em; float: left}
.type {display: block; width: 6em; float: left}
.info {padding-left: 2em}
.demo {margin-bottom: 2em}
-->
</style>
<style type="text/css">
<!--
.MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto}
 .MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
.MyMarqueeY {width: 205px; height: 420px; overflow: hidden;}
 .MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
-->
</style>
<script language="javascript" type="text/javascript">
//<!--
// 附带函数
var
// 用ID获取元素
$ = function(element) {
 return typeof(element) == 'object' ? element : document.getElementById(element);
},
// 生成随机数
RandStr = function(n, u){
 var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
 var Len = tmStr.length;
 var Str = "";
 for(i=1;i<n+1;i++){
  Str += tmStr.charAt(Math.random()*Len);
 }
 return (u ? Str.toUpperCase() : Str);
};
//-->
</script>
<script language="javascript" type="text/javascript">
//<!--
/*******************************************
 - Marquee 替代 -- 无间滚动
 - By Mudoo 2008.8
 - http://hi.baidu.com/mt20
********************************************
 new Marquee({
  obj   : 'myMarquee',  // 滚动对象（必须）
  name  : 'MyMQ_1',   // 实例名（可选，不指定则随机）
  mode  : 'x',    // 滚动模式（可选，x=水平, y=垂直，默认x）
  speed  : 10,    // 滚动速度（可选，越小速度越快，默认10）
  autoStart  : true,    // 自动开始（可选，默认True）
  movePause : true    // 鼠标经过是否暂停（可选，默认True）
 });
********************************************/
var MyMarquees = new Array();
// 获取检测实例名
function getMyMQName(mName) {
 var name = mName==undefined ? RandStr(5) : mName;
 var myNames = ','+ MyMarquees.join(',') +',';
 
 while(myNames.indexOf(','+ name +',')!=-1) {
  name = RandStr(5);
 }
 return name;
}
function Marquee(inits) {
 var _o = this;
 var _i = inits;
 
 if(_i.obj==undefined) return;
 _o.mode    = _i.mode==undefined ? 'x' : _i.mode;   // 滚动模式(x:横向, y:纵向)
 _o.mName = getMyMQName(_i.name);       // 实例名
 _o.mObj  = $(_i.obj);         // 滚动对象
 _o.speed = _i.speed==undefined ? 10 : _i.speed;   // 滚动速度
 _o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始
 _o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停
 
 _o.mDo  = null;           // 计时器
 _o.pause = false;          // 暂停状态
 
 // 无间滚动初始化
 _o.init = function() {
  if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') || (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;
  
  MyMarquees.push(_o.mName);
  
  // 克隆滚动内容
  _o.mObj.innerHTML = _o.mode=='x' ? (
   '<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
   ' <tr>'+
   '  <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+
   '  <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+
   ' </tr>'+
   '</table>'
  ) : (
   '<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+
   '<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'
  );
  
  // 获取对象、高宽
  _o.mObj1 = $('MYMQ_'+ _o.mName +'_1');
  _o.mObj2 = $('MYMQ_'+ _o.mName +'_2');
  _o.mo1Width = _o.mObj1.scrollWidth;
  _o.mo1Height = _o.mObj1.scrollHeight;
  
  // 初始滚动
  if(_o.autoStart) _o.start();
 };
  
 // 开始滚动
 _o.start = function() {
  _o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed);
  if(_o.movePause) {
   _o.mObj.onmouseover = function() {_o.pause = true;} 
   _o.mObj.onmouseout = function() {_o.pause = false;}
  }
 }
 
 // 停止滚动
 _o.stop = function() {
  clearInterval(_o.mDo)
  _o.mObj.onmouseover = function() {} 
  _o.mObj.onmouseout = function() {}
 }
 
 // 水平滚动
 _o.moveX = function() {
  if(_o.pause) return;
  var left = _o.mObj.scrollLeft;
  if(left==_o.mo1Width){ 
   _o.mObj.scrollLeft = 0 ;
  }else if(left>_o.mo1Width) {
   _o.mObj.scrollLeft = left-_o.mo1Width;
  }else{ 
   _o.mObj.scrollLeft++;
  }
 };
 
 // 垂直滚动
 _o.moveY = function() {
  if(_o.pause) return;
  var top = _o.mObj.scrollTop;
  if(top==_o.mo1Height){ 
   _o.mObj.scrollTop = 0 ;
  }else if(top>_o.mo1Height) {
   _o.mObj.scrollTop = top-_o.mo1Height;
  }else{ 
   _o.mObj.scrollTop++;
  }
 };
 
 _o.init();
}
//-->
</script>
</head>
<body>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>
 <div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause});</div>
 <ul class="info gray">
  <li><span class="key">obj：</span><span class="type">Object</span>滚动对象  (*必须)</li>
  <li><span class="key">name：</span><span class="type">String</span>实例名  (*可选，默认随机)</li>
  <li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直)  (*可选,默认为x)</li>
  <li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快  (*可选，默认10)</li>
  <li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始  (*可选，默认True)</li>
  <li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停  (*可选，默认True)</li>
 </ul>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>
 <div id="MyMarqueeX" class="MyMarqueeX">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
    <td><img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /></td>
   </tr>
  </table>
 </div>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div>
 <div id="MyMarqueeY" class="MyMarqueeY">
  <img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /><br />
 </div>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式（内容不够宽）</div>
 <div id="MyMarqueeX2" class="MyMarqueeX">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
    <td><img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
   </tr>
  </table>
 </div>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式（内容不够长）</div>
 <div id="MyMarqueeY2" class="MyMarqueeY">
  <img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /><br />
 </div>
</div>
<div id="MyMarqueeY" class="MyMarqueeY">
  <img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /><br />
 </div>
<script language="javascript" type="text/javascript">
//<!--
/*********************************************
  - Marquee 演示
*********************************************/
new Marquee({
 obj : 'MyMarqueeX',
 movePause : true
});
new Marquee({
 obj : 'MyMarqueeY',
 mode : 'y'
});
new Marquee({
 obj : 'MyMarqueeX2',
 movePause : true
});
new Marquee({
 obj : 'MyMarqueeY2',
 mode : 'y'
});
//-->
</script>
</body>
</html>