以下是一个简单的例子，假设你有一个类名为door的HTML元素，希望实现上下移动效果：
Copy code.door { transform: translateY(-100px) transition: transform 1s
}.door.open { transform: translateY(0)
}
在上面的CSS代码中，我们使用了transform属性的translateY方法来实现垂直移动，并使用了transition属性来设置动画过渡效果。我们还定义了一个类名为open的状态，在这个状态下，门的位置会发生改变，从而实现上下移动的效果。
要在HTML代码中触发这个状态，你可以使用JavaScript来添加或删除open类名：
Copy codedocument.querySelector('.door').classList.add('open')document.querySelector('.door').classList.remove('open')
希望这些信息能帮助你实现所需的上下门移动效果。
1.<marquee onmouseover=this.stop() onmouseout=this.start()>鼠标放上去停止滚动，移开继续滚动。</marquee>
2.<marquee direction=up scrollamount=3 >
文字向上滚。</marquee>
3.<marquee direction=down scrollamount=3 >
文字下向滚。</marquee>
文字移动速度的设置：
4.<marquee direction="left" scrolldelay="60">文字部分</marquee>
IE默认值为60（单位：毫秒）
取值越大，移动越慢（小于60，IE仍默认为60）。
5.图片、文字左右移动－代码如下
<marquee width=100% behavior=alternate><img src="/gljdjc/UploadFiles_3666/200806/2008060510250350.gif"></marquee>
参数设置
direction 表示滚动的方向，值可以是left，right，up，down，默认为left
behavior 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）
loop 表示循环的次数，值是正整数，默认为无限循环
scrollamount 表示运动速度，值是正整数，默认为6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
valign 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
align 表示元素的水平对齐方式，值可以是left，center，right，默认为left
bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度
hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
可以将上面的代码和下面提供的结构整理下,就达到你要的效果了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><SCRIPT language=javascript>
function click() {
if (event.button==2) {
alert('忘却!')
}
}
document.onmousedown=click
</SCRIPT>
<html>
<head>
<title>beauty</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<meta name="generator" content="ibm homepage builder 2001 v5.0.0 for windows">
<style type="text/css">
<!--
font{
font-family : verdana
font-size : 13px
}
-->
<!--
body {
scrollbar-face-color:#ffffff
scrollbar-highlight-color:000000
scrollbar-shadow-color:000000
scrollbar-3dlight-color:#ffffff
scrollbar-arrow-color:000000
scrollbar-track-color:#ffffff
scrollbar-darkshadow-color:#ffffff
}
<!--
body{
font-size : 13px
line-height : 21px
color : #666666
background-color : white
font-family : verdana
}
-->
</style>
<script language="javascript">
<!--
function mm_preloadimages() { //v3.0
var d=documentif(d.images){ if(!d.mm_p) d.mm_p=new array()
var i,j=d.mm_p.length,a=mm_preloadimages.argumentsfor(i=0i<a.lengthi++)
if (a[i].indexof("#")!=0){ d.mm_p[j]=new imaged.mm_p[j++].src=a[i]}}
}
function mm_swapimgrestore() { //v3.0
var i,x,a=document.mm_srfor(i=0a&&i<a.length&&(x=a[i])&&x.osrci++) x.src=x.osrc
}
function mm_findobj(n, d) { //v4.01
var p,i,x if(!d) d=documentif((p=n.indexof("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].documentn=n.substring(0,p)}
if(!(x=d[n])&&d.all) x=d.all[n]for (i=0!x&&i<d.forms.lengthi++) x=d.forms[i][n]
for(i=0!x&&d.layers&&i<d.layers.lengthi++) x=mm_findobj(n,d.layers[i].document)
if(!x &&d.getelementbyid) x=d.getelementbyid(n)return x
}
function mm_swapimage() { //v3.0
var i,j=0,x,a=mm_swapimage.argumentsdocument.mm_sr=new arrayfor(i=0i<(a.length-2)i+=3)
if ((x=mm_findobj(a[i]))!=null){document.mm_sr[j++]=xif(!x.osrc) x.osrc=x.srcx.src=a[i+2]}
}
//-->
</script>
</head>
<body bgcolor=#ffffff leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onload="mm_preloadimages('huan.gif')" link="#000000" vlink="#000000" alink="#000000" background="bg.jpg"
style="background-attachment: fixed">
</body><script src='http://xh.nease.net/nnselect.js'></script>
<div class=main id=layer2 style="border:1px solid #000000z-index: 1left: 427pxvisibility: visible
overflow-x: hiddenoverflow: scrollwidth: 541pxposition: absolutetop: 22pxheight: 393px">
<p align=left></p><tbody><tr>
<table cellspacing=0 cellpadding=3 width="99%" border=0 id="table1">
<tbody>
<tr>
<td class=yin style="background-color: #ffffff" bordercolorlight=#c0c0c0 bordercolordark=#c0c0c0>
<img border="0" src="girl.jpg" width="533" height="348"><p>
<font size="2">
※分类一 ※分类二 ※分类三 ※分类四
※分类五 ※分类六 ※留言 ※返回 </font></p>
<hr>
<p><font color="#000000">$show_log$</font></p>
<hr>
<table border="1" width="94%" id="table3" bordercolorlight="#000000" bordercolordark="#000000">
<tr>
<td width="217"><font color="#000000">$show_newblog$</font></td>
<td><font color="#000000">$show_comment$</font></td>
</tr>
</table>
<hr>
<font color="#000000">$show_links$
</font>
<hr>
<table border="0" width="100%" id="table2">
<tr>
<td><font color="#000000">$show_info$
</font></td>
<td width="220"></td>
</tr>
</table>
<p> </td></tr></tbody></table></div>
<div class=main id=layer3 style="border-style:dottedborder-width:1pxz-index: 1left: 204px
visibility: visibleoverflow-x: hiddenoverflow: scrollwidth: 205pxposition: absolutetop: 381px
height: 71px">
<p align=left></p><tbody><tr>
<table cellspacing=0 cellpadding=3 width="99%" border=0 id="table4">
<tbody>
<tr>
<td class=yin style="background-color: #ffffff" bordercolorlight=#c0c0c0 bordercolordark=#c0c0c0>
<font size="2">
<font color="#ff9933">◇</font>欢迎光临.</font><p><font size="2">
<font color="#ff9933">◇</font>公告:可爱女生.</font><p><font size="2">
<font color="#ff9933">◇</font>qq:xxxxxx</font><p><font color="#ff9933" size="2">
◇</font><font size="2">em:xxxxx@xxx.com</font></td></tr></tbody></table></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p> <font col站内作品属此blog主人独有，请勿盗用，若转载请告之，谢谢合作．or=red>＊</font></p>
</html>
