1 文章排序
<ul id="nav">
<li id="q2" class="navnomenu">文章排序: </li>
<li id="q1" class="active"><a href="http://java.e800.com.cn/list/117_1_1_1.html" urn="#default_E" rel="Info_E_div" class="ive">时间</a></li>
<li id="q1" class="normal"><a href="http://java.e800.com.cn/list/117_1_1_2.html" urn="resource/include/tabs/row5/collection_117.html" rel="Info_E_div">收藏</a></li>
<li id="q1" class="normal"><a href="http://java.e800.com.cn/list/117_1_1_3.html" urn="resource/include/tabs/row5/commend_117.html" rel="Info_E_div">推荐</a></li>
<li id="q1" class="normal"><a href="http://java.e800.com.cn/list/117_1_1_4.html" urn="resource/include/tabs/row5/day_117.html" rel="Info_E_div">日点击</a></li>
<li id="q1" class="normal"><a href="http://java.e800.com.cn/list/117_1_1_5.html" urn="resource/include/tabs/row5/week_117.html" rel="Info_E_div">周点击</a></li>
</ul></DIV>
2. 更多小图标
<a href="http://java.e800.com.cn/list/145_1_1_1.html" title="更多其他Java技术">更多</a>
<img src="http://images.e800.com.cn/developer/default/icon3.gif" alt="更多其他Java技术">
3.. 删除确认
<div onclick="JavaScript:return confirm('Are you sure to delete?')">Delete</div>
<span onclick="JavaScript:return confirm('Are you sure to delete?')">Delete</span>
4.....Form
http://weather.news.qq.com/inc/ss103.htm
<html>
<head>
<title>A element example</title>
</head>
<body>
<a name="top"></a>
<h2>Used as a hyperlink:</h2>
<a href="http://www.java2s.com/" target="_blank">java2s.com</a>
</body>
</html>
<-------------- --------------- ------------- ---------------- --------------------->
'a' Example: anchor
<html>
<head>
<title>A element example</title>
</head>
<body>
<a name="top"></a>
<h2>Used as an anchor:</h2>
<p><a href="#par3">Go to paragraph #3 in this page</a></p>
<p><a href="yourdocument.html#sty">Go to the yourdocument.htm page, sty location</a></p>
<p align="left">Paragraph #2</p>
<p align="left"><a name="par3">Paragraph #3</a></p>
<p align="left"><a href="#top">Top</a></p>
</body>
</html>
<-------------- --------------- ------------- ---------------- --------------------->
input
<html>
<head>
<title>input element example</title>
</head>
<body>
<form name="form2" method="post" action="">
<p>This is a form with several input elements.</p>
<input type="text" name="textfield2" value="This is a text field" size="30">
<br>
<input type="checkbox" name="checkbox2" value="checkbox">A checkbox.
<br>
<input type="radio" name="radiobutton" value="radiobutton1">
<br>
<input type="radio" name="radiobutton" value="radiobutton2">A set of radio buttons.
<br>
<input type="button" name="myButton2" value="Submit">A submit button.
<br>
<input type="button" name="myButton2" value="Reset">A reset button.
<br>
<input type="image"
border="0"
name="imageField"
src="http://www.java2s.com/style/logo.png" width="400"height="225" alt="An input image">
</form>
</body>
</html>
-- ----- ---------------- -------- --------- ---- -------
'textarea' creates a multiline text entry control
<html>
<head>
<title>textarea element example</title>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<fieldset align="center">
<textarea name="textfield1" cols="40" rows="2" wrap="hard">
Your name and surname
</textarea>
<br>
</fieldset>
</p>
</form>
<form name="form2" method="post" action="">
<p>
<fieldset>
<input type="text" name="textfield3" value="Street address" size="65">
<br>
<input type="text" name="textfield4" value="City" size="45">
<br>
<input type="text" name="textfield5" value="Zip Code" size="55">
<br>
<input type="text" name="textfield6" value="Email" size="55">
<br>
<input type="text" name="textfield7" value="Website" size="55">
</fieldset>
</p>
</form>
</body>
</html>
<---------------------------------------> DIV
<html>
<head>
<title>div element example</title>
</head>
<body>
<div id="Layer1" style="position:absolute;
visibility:visible; left:166px;
top:312px;
width:300px;
height:294px;
background-color:#FFFFCC;
layer-backgroundcolor:#FFFFCC;
border:1px none #000000;
z-index:1">
<p><img src="http://www.java2s.com/style/logo.png"
alt=""
width="300"
height="225"></p>
<p align="center">This div element contains an image plus a center aligned text.</p>
</div>
<div id="Layer2" style="position:absolute;
visibility:visible;
left:499px;
top:338px;
width:315px;
height:174px;
background-color:#CCFFCC;
layer-background-color:#CCFFCC;
border:1px none #000000;
z-index:2">
<p>Text.</p>
</div>
</body>
</html>
<----------------------------------------------------------> iframe
<html>
<head>
<title>iframe element example</title>
</head>
<body>
<p align="center">
<iframe id="myIframe"
frameborder="1"
scrolling="yes"
src="http://www.java2s.com" width="600" height="400">
</iframe>
</p>
<br><br><br>
<p align="center">
<iframe id="myIframe"
frameborder="10"
scrolling="yes"
src="http://www.java2s.com" width="600" height="400">
</iframe>
</p>
</body>
</html>
<------------------------------------------> Padding
<html>
<body>
<p>The image below has an all-around padding of 30px.</p>
<table>
<tr>
<td style="padding='30 30 30 30'">
<img src="http://www.java2s.com/style/logo.png"
height="50"
width="50"
border="1">
</td>
</tr>
</table>
</body>
</html>
<--------------------------------------------> boder
<html>
<head>
<style>
.style1 { border:3px solid blue; }
.style2 { border:"none";}
</style>
</head>
<body>
<div id="myL"
style="width:500;
height:500;
background-color:beige"
onmouseover="this.className='style1'"
onmouseout="this.className='style2'">
This is a div element.
</div>
</body>
</html>
<-----------------------------------------> cursor
<html>
<body>
<div class="explanations"
style="background-color:#dddddd;
cursor:hand;">
Move the mouse over this element to see the hand cursor.
</div>
</body>
</html>
<---------------------------->- - margin
<html>
<body>
<img id="myImg"
src="http://www.java2s.com/style/logo.png"
height="100"
width="100"
border="1">
<button onclick="myImg.style.margin='25 25 25 25'">25 Px Margin</button>
<button onclick="myImg.style.margin='0 0 0 0'">0 Margin</button>
</body>
</html>
<---------------------------------------------> visibilty
<html>
<body>
<p>
<img id="myImg" src="http://www.java2s.com/style/logo.png">
</p>
<input type="button"
value="Set visibility property to hidden"
onclick="myImg.style.visibility='hidden'">
<input type="button"
value="Set visibility property to visible"
onclick="myImg.style.visibility='visible'">
</body>
</html>
<------------------------------------------> span
<html>
<head>
<title>span element example</title>
</head>
<body>
<p align="center">
This <span style="color:#FF0000; font-size:10pt; text-transform:uppercase;">
paragraph
</span>
has text of
<span style="color:blue; font-size:18pt; text-transform:uppercase;">
three
</span>
different
<span style="color:blue; font-size:14pt; text-decoration:underline;">
styles
</span>.
</p>
</body>
</html>
<------------------------------------------> style
<html>
<title>style element example</title>
<head>
<style>body { background-color: black; color: white; }</style>
</head>
<body>The body cotains a black background and white letters.</body>
</html>
<-------------------------------------------> marquee
<td align="center" width="68px" valign="bottom"><div align="left" class="g_a_1_1_1">访客留言</div></td>
<td align="right" height="18px" valign="bottom"><a href="gleavwords.php?groupid=1039" class="top_b">全部留言»</a></td>
</tr></table></div>
<marquee scrollAmount=2 height=120 direction=up onMouseOver="this.stop()" onMouseOut="this.start()">暂无访客留言.</marquee>
<----------------------------------------> google
<table width="100%" align="right" border="0" cellpadding="0" cellspacing="0" style="padding-top:3px;">
<tr><td><table align="right" border="0" cellpadding="0" cellspacing="0"><tr>
<td align="right" title="圈子标签:技术 网络 读书 图书" height="25" style="cursor:pointer;" width="120px">
<b>查阅本圈相关内容:</b>
</td>
<td align="right">
<input type="radio" name="srcto" value="0" checked onclick="javascript:showASearch(0);">论坛
<input type="radio" name="srcto" value="1" onclick="javascript:showASearch(1);">博客
<input type="radio" name="srcto" value="2" onclick="javascript:showASearch(2);">google
<input type="radio" name="srcto" value="3" onclick="javascript:showASearch(3);">baidu
</td>
<td id="src_0"><table align="right" border="0" cellpadding="0" cellspacing="0">
<form name="bbssrc" method="GET" action="http://bbs.51cto.com/search.php" target="_blank">
<input type=hidden name=srchtype value=title>
<input type=hidden name=stype value=1>
<input type=hidden name=searchsubmit value=yes>
<tr><td>
<input name="srchtxt" class="input_0" value="技术|网络|读书|图书" type="text" size="16" style="width:150px; height:21px;"/>
</td><td align="center" width="40px">
<input name="Submit" type="submit" class="input_top" value="搜索"/>
</td></tr>
</form>
</table></td>
<td id="src_1" style="display:none;"><table align="right" border="0" cellpadding="0" cellspacing="0">
< ------------------------------------------>
<form name="blogsrc" method="GET" action="http://blog.51cto.com/search.php" target="_blank">
<tr><td>
<input name="keyword" class="input_0" value="技术|网络|读书|图书" type="text" size="16" style="width:150px; height:21px;"/>
<input type=hidden name=step value=2>
<input type=hidden name=search_type value=art>
<input type=hidden name=search_in value=search.php>
</td><td align="center" width="40px">
<input name="Submit" type="submit" class="input_top" value="搜索"/>
</td></tr>
</form>
</table></td>
<----------------------------------------->
<td id="src_2" style="display:none;"><table align="right" border="0" cellpadding="0" cellspacing="0">
<form name="googsrc" method="GET" action="http://www.google.com/search" target="_blank">
<input type=hidden name=ie value=GB2312>
<input type=hidden name=oe value=GB2312>
<input type=hidden name=hl value=zh-CN>
<input type=hidden name=domains value="51cto.com">
<input type=hidden name=sitesearch value="51cto.com">
<tr><td>
<input name="q" class="input_0" value="技术 网络 读书 图书" type="text" size="16" style="width:150px; height:21px;"/>
</td><td align="center" width="40px">
<input name="Submit" type="submit" class="input_top" value="搜索"/>
</td></tr>
</form>
</table></td>
<------------------------------------>
<td id="src_3" style="display:none;"><table align="right" border="0" cellpadding="0" cellspacing="0">
<form name="f1" method="GET" action="http://www.baidu.com/baidu" target="_blank">
<input name=tn type=hidden value="bds">
<input name=cl type=hidden value="3">
<input name=ct type=hidden value="2097152">
<input type=hidden name=si value="51cto.com">
<input type=hidden name=s value="51cto.com">
<tr><td>
<input name="word" class="input_0" value="技术 网络 读书 图书" type="text" size="16" style="width:150px; height:21px;"/>
</td><td align="center" width="40px">
<input name="Submit" type="submit" class="input_top" value="搜索"/>
</td></tr>
</form>
</table></td>
</tr>
</table></td></tr></table>
<+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++0>
<script language="javascript">
function submitword(){
document.inword.submitw.value = 'addword';
document.inword.submit();
}
function nopope1(){
document.inword.popelwd.value = 'nlwd';
document.inword.submit();
}
function nopopeu(){
document.inword.popeuwd.value = 'ulwd';
document.inword.submit();
}
</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<form name="inword" method="post" onsubmit="javascript:submitword();">
<input type="hidden" name="submitw" value="">
<input type="hidden" name="popelwd" value="">
<input type="hidden" name="popeuwd" value="">
<tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td height="1" bgcolor="#9C9E9C"></td></tr></table>
<table width='100%' border='0' cellpadding='0' cellspacing='0' id='gonggao'><tr><td height='10' id='liuyan'></td></tr><tr> <td align="right" width="25%" valign="middle">访客留言:</td>
<td align='left' valign='top' width='75%'><textarea name='leaveword' class='input_0' style='WIDTH:380px;HEIGHT:120px'></textarea></td></tr><tr><td align='right' valign='bottom'>验证码:</td><td align='left'><input name='authnum' class='input_0' type='text' style='width:50px;' value=''/><img src="seccode.php" onclick="this.src='seccode.php'" style="cursor : pointer;"> <font color='red'>(如果看不清请点击图片进行更换.)</font></td></tr><tr><td height='10'></td></tr><tr><td colspan='2' align='center' valign='top'><input name='button2' type='button' class='input_top' onclick='javascript:submitword();' value='发表访客留言' /></tr><tr><td height='10'></td></tr></table> </td>
</tr>
</form>
</table> </div>
</div> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div><!--here-->
</div>
http://group.51cto.com/seccode.php
5..................IFrame
<html>
<head>
<title>IFrame语法小全</title>
<META NAME="keywords" CONTENT="色彩剖析,网站设计,创意舞台,平面设计,文学艺术,圆点沙龙,幽默笑话,摄影园地,CI形象设计,站点导航,精品欣赏,设计杂谈,福建省,福州,论坛,colour ,photo,joke,design,idea,web,net,graphics,CI,literature,showpiece,navigate,BBS,photo,fujian,fuzhou,apointview,guestbook">
<META NAME="Description" CONTENT="色彩剖析,网站设计,创意舞台,平面设计,文学艺术,圆点沙龙,幽默笑话,摄影园地,CI形象设计,站点导航,精品欣赏,设计杂谈,福建省,福州,论坛,colour ,photo,joke,design,idea,web,net,graphics,CI,literature,showpiece,navigate,BBS,photo,fujian,fuzhou,apointview,guestbook">
<META NAME="keywords" CONTENT="圆点视线,网站设计,基础知识,网页特效,网站设计技巧,FLASH动画,网站教程,色彩应用,网络广告,酷站推荐,网页欣赏,图库字体,网络营销,Photoshop教程,Dreamweaver教程,CSS层叠样式表,firwors教程,html教程,韩国网站,国外网站,Email营销,图库字体,图片素材资料">
<META name="Description" CONTENT="圆点视线,网站设计,基础知识,网页特效,网站设计技巧,FLASH动画,网站教程,色彩应用,网络广告,酷站推荐,网页欣赏,图库字体,网络营销,Photoshop教程,Dreamweaver教程,CSS层叠样式表,firwors教程,html教程,韩国网站,国外网站,Email营销,图库字体,图片素材资">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="MSHTML 5.00.2920.0" name=GENERATOR>
<link href="/Images/2006/apoints_con.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {color: #0099cc}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
//改变图片大小
function resizepic(thispic)
{
if(thispic.width>700){thispic.height=thispic.height*700/thispic.width;thispic.width=700;}
}
//无级缩放图片大小
function bbimg(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
//双击鼠标滚动屏幕的代码
var currentpos,timer;
function initialize()
{
timer=setInterval ("scrollwindow ()",30);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos !=document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
//更改字体大小
var status0='';
var curfontsize=10;
var curlineheight=18;
function fontZoomA(){
if(curfontsize>8){
document.getElementById('fontzoom').style.fontSize=(--curfontsize)+'pt';
document.getElementById('fontzoom').style.lineHeight=(--curlineheight)+'pt';
}
}
function fontZoomB(){
if(curfontsize<64){
document.getElementById('fontzoom').style.fontSize=(++curfontsize)+'pt';
document.getElementById('fontzoom').style.lineHeight=(++curlineheight)+'pt';
}
}
</script>
</head>
<body bgcolor="#CCCCCC" background="/images/apoints_bg.jpg" text="#000000" topmargin="0" leftmargin="2" oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>
<noscript>
<iframe src=*></iframe>
</noscript>
<div id=menuDiv style='Z-INDEX: 1000; VISIBILITY: hidden; WIDTH: 1px; POSITION: absolute; HEIGHT: 1px; BACKGROUND-COLOR: #9cc5f8'></div>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="F77126"><SCRIPT language=javascript src="http://www.apoints.com/includes/head.js"></SCRIPT></td>
</tr>
<tr>
<td bgcolor="84F726"><script language=javascript src="/web/teachtop.js"></script></td>
</tr>
</table></td>
</tr>
</table>
<table width="950" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="FB710B">
<tr><td></td></tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="720" valign="top"><table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" bgcolor="676767">
<tr>
<td width="4%"><img src="/Images/2006/index_apoints_con01.gif" width="24" height="16"></td>
<td width="96%" class="LinkPath">您现在的位置: <a class='LinkPath' href='http://www.apoints.com'>圆点视线</a> >> <a class='LinkPath' href='/web/Index.html'>网站</a> >> <a class='LinkPath' href='/web/wzjc/Index.html'>网页设计</a> >> <a class='LinkPath' href='/web/wzjc/jiqiao/Index.html'>网页制作相关技巧</a> >> 文章正文</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" background="/Images/2006/index_apoints_con03.gif"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="biaoti01" style="word-break:break-all;Width:fixed">
<tr>
<td width="3%" valign="middle"><img src="/Images/2006/index_apoints_con02.gif" width="28" height="18"></td>
<td width="66%">IFrame语法小全</td>
<td align="right"> <font color=red>热</font> <font color='#009999'>★★★</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="center" bgcolor="EFF0F0" class="articletitle">IFrame语法小全</td>
</tr>
<tr>
<td height="20" align="center" bgcolor="EFF0F0" class="articlesubhead"></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td height="25" align="center" bgcolor="A7B3B0" class="apointsauthor">作者:佚名
文章来源:圆点视线 点击数:<script language='javascript' src='/web/GetHits.asp?ArticleID=5781'></script> 更新时间:2005-8-9 11:20:45 <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(vivi=window.open('http://vivi.sina.com.cn/collect/icollect.php?pid=2008&title='+escape(d.title)+'&url='+escape(d.location.href)+'&desc='+escape(t),'vivi','scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes'));vivi.focus();" title="收藏的网页将被永久地保存到新浪ViVi收藏夹http://vivi.sina.com.cn"><img src="/images/vivi_coop1.gif" border="0" align="absmiddle"></a></td>
</tr>
<tr>
<td height="25" bgcolor="F2F2F2"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="gongneng">
<tr>
<td width="86%"> 页面功能:【<a href="/web/Comment.asp?ArticleID=5781" target="_blank">发表评论</a>】【<a href="/User/User_Favorite.asp?Action=Add&ChannelID=8&InfoID=5781" target="_blank">加入收藏</a>】【<a href="/web/SendMail.asp?ArticleID=5781" target="_blank">告诉好友</a>】【<a href="/web/Print.asp?ArticleID=5781" target="_blank">打印此文</a>】【<a href="javascript:window.close();">关闭窗口</a>】</td>
<td width="14%">【字体:<a href="javascript:fontZoomA();" class="top_UserLogin">小</a>
<a href="javascript:fontZoomB();" class="top_UserLogin">大</a>】</td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="articlecom">
<tr>
<td colspan="2" align="center" valign="top" class="articlecom" id="fontzoom" style="word-break:break-all;Width:fixed">
<TABLE class=tableBorder1 cellSpacing=0 cellPadding=0 width="99%"
align=center>
<TR>
<TD class=double bgColor=#f0f9ff height=25> <DIV align=center>
<!--正文头部广告开始位置--><script language='javascript' src='/AD_dai/200605/con_left01.js'></script>
</DIV></TD>
</TR>
</TABLE></td>
</tr>
<tr>
<td height="200" colspan="2" valign="top" class="articlecom" id="fontzoom" style="word-break:break-all;Width:fixed">
<FONT face=宋体> IFrame可以在网页内嵌入另一个页面,类似“画中画”形式。<BR><BR> 标记的使用格式是: </FONT>
<P></P>
<P><FONT face=宋体></FONT></P>
<P 150%?><FONT face=宋体> <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> <BR> src:文件的路径,既可是HTML文件,也可以是文本、ASP等; <BR> width、height:"画中画"区域的宽与高; <BR> scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示; <BR> FrameBorder:区域边框的宽度,为了让“画中画“与邻近的内容相融合,常设置为0。 </FONT>
<P><FONT face=宋体></FONT></P>
<P></P>
<P 150%?><FONT face=宋体> 比如:
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> <Iframe src="<A href="http://www.xyz.com/xyz" target=_blank><FONT color=#000000 size=2>http://www.xyz.com/xyz</FONT></A>"; width="250" height="200" scrolling="no" frameborder="0"></iframe><BR></FONT><FONT face=宋体>:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::<BR><BR> 窗口与浮动帧之间的相互控制<BR><BR> 在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 1、在父窗体中访问并控制子窗体中的对象
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 现在就有一个问题,即,我们怎样来控制这个Iframe,这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后,就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 比如在example.htm里嵌入test.htm文件,并控制test.htm里一些标记对象:</FONT><FONT face=宋体> <BR> </FONT><FONT face=宋体><Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe> <BR>test.htm文件代码为</FONT><FONT face=宋体>: <BR> </FONT><FONT face=宋体><html> <BR> </FONT><FONT face=宋体><body> <BR> </FONT><FONT face=宋体><h1 id="myH1">hello,my boy</h1> <BR> </FONT><FONT face=宋体></body> <BR> </FONT><FONT face=宋体></html> <BR> 如我们要改变ID号为myH1的H1标记里的文字为hello,my dear,则可用</FONT><FONT face=宋体>: <BR> document.myH1.innerText="hello,my dear"(其中,document可省</FONT><FONT face=宋体>) <BR> 在example.htm文件中,Iframe标记对象所指的子窗体与一般的DHTML对象模型一致,对对象访问控制方式一样,就不再赘述。
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 2、在子窗体中访问并控制父窗体中对象
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。</FONT><FONT face=宋体> <BR> 如example.htm:</FONT><FONT face=宋体> <BR> </FONT><FONT face=宋体><html> <BR> </FONT><FONT face=宋体><body onclick="alert(tt.myH1.innerHTML)"> <BR> </FONT><FONT face=宋体><Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe> <BR> </FONT><FONT face=宋体><h1 id="myH2">hello,my wife</h1> <BR> </FONT><FONT face=宋体></body> <BR> </FONT><FONT face=宋体></html> <BR> 如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend",我们就可以这样写:</FONT><FONT face=宋体> <BR> </FONT><FONT face=宋体>parent.myH2.innerText="hello,my friend" <BR> 这里parent对象就代表当前窗体(example.htm所在窗体),要在子窗体中访问父窗体中的对象,无一例外都通过parent对象来进行。
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> Iframe虽然内嵌在另一个HTML文件中,但它保持相对的独立,是一个“独立王国“哟,在单一HTML中的特性同样适用于浮动帧中。
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 试想一下,通过Iframe标记,我们可将那些不变的内容以Iframe来表示,这样,不必重复写相同的内容,这有点象程序设计中的过程或函数,减省了多少繁琐的手工劳动!另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,你只需修改一个父窗体的版式即可了。
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体> 要注意的是,Nestscape6.0之前版本不支持Iframe标记。
<P></P></FONT>
<P></P><FONT face=宋体> 例子:<BR><BR>1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::</FONT><FONT face=宋体><BR><iframe src="</FONT><FONT face=宋体>页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是否有滚动条可以填no或yes"></iframe>
<P></P></FONT>
<P></P>
<P 150%?><FONT face=宋体><IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300></IFRAME><BR> <BR><BR>2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::<BR>用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓
<P></P></FONT>
<P></P>应该怎么实现呢?<BR>回答:<BR>用下列代码替换网页的<FONT face="宋体, MS Song"><title>..</title> <BR><SCRIPT LANGUAGE="javascript"><BR>function scroll(n)<BR>{temp=n;<BR>Out1.scrollTop=Out1.scrollTop+temp;<BR>if (temp==0) return;<BR>setTimeout("scroll(temp)",80);<BR>}<BR></SCRIPT><BR><TABLE WIDTH="330"><BR><TR> <BR><TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" > <BR><DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;"> <BR></FONT>文字<FONT face="宋体, MS Song"><BR> </FONT>文字<FONT face="宋体, MS Song"><BR><BR></FONT>文字<FONT face="宋体, MS Song"><BR> <BR></FONT>文字<FONT face="宋体, MS Song"><BR><BR></FONT>文字<BR><FONT face="宋体, MS Song"><BR><BR><BR><BR></DIV><BR></TD><BR><TD WIDTH="14" VALIGN="TOP"><IMG src="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll(-3)" BORDER="0" ALT="</FONT>按下鼠标速度会更快!<FONT face="宋体, MS Song">"></TD><BR></TR><BR><TR><BR><TD WIDTH="14" VALIGN="BOTTOM"><IMG src="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="</FONT>按下鼠标速度会更快!<FONT face="宋体, MS Song">"></TD><BR></TR><BR></TABLE><BR><BR><SPAN id=ArticleContent1_ArticleContent1_lblContent>:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::<BR>下面这段代码可以实现IFrame自适应高度,即随着页面的长度,自动适应以免除页面和IFrame同时出现滚动条。
<P>源代码如下</P>
<P><script type="text/javascript"><BR>//** iframe自动适应页面 **//</P>
<P>//输入你希望根据页面高度自动调整高度的iframe的名称的列表<BR>//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。</P>
<P>//定义iframe的ID<BR>var iframeids=["test"]</P>
<P>//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏<BR>var iframehide="yes"</P>
<P>function dyniframesize() <BR>{<BR>var dyniframe=new Array()<BR>for (i=0; i<iframeids.length; i++)<BR>{<BR>if (document.getElementById)<BR>{<BR>//自动调整iframe高度<BR>dyniframe[dyniframe.length] = document.getElementById(iframeids);<BR>if (dyniframe && !window.opera)<BR>{<BR>dyniframe.style.display="block"<BR>if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape<BR>dyniframe.height = dyniframe.contentDocument.body.offsetHeight; <BR>else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE<BR>dyniframe.height = dyniframe.Document.body.scrollHeight;<BR>}<BR>}<BR>//根据设定的参数来处理不支持iframe的浏览器的显示问题<BR>if ((document.all || document.getElementById) && iframehide=="no")<BR>{<BR>var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)<BR>tempobj.style.display="block"<BR>}<BR>}<BR>}</P>
<P>if (window.addEventListener)<BR>window.addEventListener("load", dyniframesize, false)<BR>else if (window.attachEvent)<BR>window.attachEvent("onload", dyniframesize)<BR>else<BR>window.onload=dyniframesize<BR></script></P></SPAN></FONT> <center></center></center></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="5" class="articlenew">
<tr valign="top">
<td align="center">
<!--正文结束广告开始位置-->
<script language='javascript' src='/AD_dai/200605/con_left02.js'></script></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" bgcolor="E7E5E5"></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td height="20" bgcolor="F7F7F7" class="gongneng"> 【<a href="/web/Comment.asp?ArticleID=5781" target="_blank">发表评论</a>】【<a href="/User/User_Favorite.asp?Action=Add&ChannelID=8&InfoID=5781" target="_blank">加入收藏</a>】【<a href="/web/SendMail.asp?ArticleID=5781" target="_blank">告诉好友</a>】【<a href="/web/Print.asp?ArticleID=5781" target="_blank">打印此文</a>】【<a href="javascript:window.close();">关闭窗口</a>】 文章录入:apoints 责任编辑:apoints 【字体:<a href="javascript:fontZoomA();" class="top_UserLogin">小</a>
<a href="javascript:fontZoomB();" class="top_UserLogin">大</a>】 </td>
</tr>
<tr>
<td height="1" bgcolor="D7D7D7"></td>
</tr>
<tr>
<td height="42" bgcolor="EAEAEA" class="articlepage"> <li>上一篇文章: <a class='LinkPrevArticle' href='/web/wzjc/jiqiao/200508/5780.html' title='文章标题:关于鼠标拖动,改变层大小
作 者:佚名
更新时间:2005-8-9 11:03:22'>关于鼠标拖动,改变层大小</a></li><br>
<li>下一篇文章: <a class='LinkNextArticle' href='/web/wzjc/jiqiao/200508/5782.html' title='文章标题:鼠标指向某个连接,在状态栏会出现该连接的说明
作 者:佚名
更新时间:2005-8-9 11:22:26'>鼠标指向某个连接,在状态栏会出现该连接的说明</a></li></td>
</tr>
<tr>
<td height="1" bgcolor="E7E5E5"></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td height="20" bgcolor="EFEFEF" class="biaoti01"><img src="/Images/2006/index_apoints_con02.gif" width="28" height="18" align="absmiddle">相关文章</td>
</tr>
<tr>
<td height="1" bgcolor="DDDADA"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="5" class="articlenew">
<tr valign="top">
<td width="250" height="16"><script language='javascript' src='/web/JS/Article_newpic10.js'></script></td>
<td background="/Skin/blue/apoints_content_line.gif"><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200512/8119.html' title='文章标题:关于网页源代码屏蔽
作 者:佚名
更新时间:2005-12-20 15:00:51' target="_self">关于网页源代码屏蔽</a><br><a class='LinkArticleCorrelative' href='/web/wzsjjq/200508/5785.html' title='文章标题:禁止右键代码
作 者:佚名
更新时间:2005-8-9 11:27:44' target="_self">禁止右键代码</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5783.html' title='文章标题:图片边框的变幻
作 者:佚名
更新时间:2005-8-9 11:24:24' target="_self">图片边框的变幻</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5782.html' title='文章标题:鼠标指向某个连接,在状态栏会出现该连接的说明
作 者:佚名
更新时间:2005-8-9 11:22:26' target="_self">鼠标指向某个连接,在状态栏会出现该连接的</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5780.html' title='文章标题:关于鼠标拖动,改变层大小
作 者:佚名
更新时间:2005-8-9 11:03:22' target="_self">关于鼠标拖动,改变层大小</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5779.html' title='文章标题:在网页中做出一根竖的线有几种办法.
作 者:佚名
更新时间:2005-8-9 11:02:48' target="_self">在网页中做出一根竖的线有几种办法.</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5778.html' title='文章标题:在DW中如何使插入的FLASH透明。
作 者:佚名
更新时间:2005-8-9 11:02:08' target="_self">在DW中如何使插入的FLASH透明。</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5776.html' title='文章标题:用javascript代码来实现闪烁按钮。
作 者:佚名
更新时间:2005-8-9 11:01:22' target="_self">用javascript代码来实现闪烁按钮。</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5775.html' title='文章标题:Alt和Title都是提示性语言标签,请注意它们之间的区别。
作 者:佚名
更新时间:2005-8-9 11:01:07' target="_self">Alt和Title都是提示性语言标签,请注意它们</a><br><a class='LinkArticleCorrelative' href='/web/wzjc/jiqiao/200508/5774.html' title='文章标题:请问<tbody>的用法?
作 者:佚名
更新时间:2005-8-9 11:00:49' target="_self">请问<tbody>的用法?</a><br></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>
<!--相关文章下面广告开始位置--><script language='javascript' src='/AD_dai/200605/con_left03.js'></script>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="f2f3f3" class="center_tdbgall" style="word-break:break-all;Width:fixed">
<tr>
<td height="1" bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td height="25" bgcolor="E1E3E3" class="left_tdbgall"> <img src="/Images/2006/index_apoints_con04.gif" width="16" height="16" align="absmiddle"> <b>网友评论:</b>(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)</td>
</tr>
<tr>
<td class="comtop_tdbg02 "><script language='javascript' src='/web/Comment.asp?Action=JS&ArticleID=5781'></script>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="E1E3E3" class="center_tdbgall" style="word-break:break-all;Width:fixed">
<tr>
<td height="1" bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td height="25" class="left_tdbgall"> <img src="/Images/2006/index_apoints_con04.gif" width="16" height="16" align="absmiddle"> <b>发表评论:</b></td>
</tr>
<tr>
<td bgcolor="#F7F7F7" class="comtop_tdbg02 " height="1"></td>
</tr>
</table>
<table cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<tr>
<td align=middle>
<script language='JavaScript' type='text/JavaScript'>
function Check()
{
if (document.form1.Name.value=='')
{
alert('请输入姓名!');
document.form1.Name.focus();
return false;
}
if (document.form1.Content.value=='')
{
alert('请输入评论内容!');
document.form1.Content.focus();
return false;
}
return true;
}
</script>
<FORM name=form1 onsubmit="return Check();" action=http://www.apoints.com/vision/Comment.asp method=post target=_blank style="margin:0px ">
<table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#E8E8E8" class=main_tdbg_575 style="WORD-BREAK: break-all">
<tr bgcolor="#FFFFFF">
<td width="13%"> 姓 名:</td>
<td width="37%"><input name=Name size="36" maxlength=16></td>
<td width="50%">评 分:
<input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=1 name=Score>
1分
<input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=2 name=Score>
2分
<input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio checked value=3 name=Score>
3分
<input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=4 name=Score>
4分
<input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=5 name=Score>
5分 </td>
</tr>
<tr bgcolor="#FFFFFF">
<td valign="top" bgcolor="#FFFFFF"> 评论内容:</td>
<td><textarea id=textarea2 name=Content rows=5 cols=35></textarea></td>
<td bgcolor="#FFFFFF"><span class="style2"><font color="#9D9D9D">·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。<br>
·用户需对自己在使用本网服务过程中的行为承担法律责任<br>
·本站管理员有权保留或删除评论内容。 <br>
·评论内容只代表机友个人观点,与本网站立场无关。 </font></span></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><input id=Action3 type=hidden value=Save name=Action>
<input id=ArticleID3 type=hidden value="5781" name=ArticleID></td>
<td><input type=submit value=" 发表我的评论 " name=Submit></td>
<td> </td>
</tr>
</table>
</FORM></td>
</tr>
</table></td>
<td width="5" valign="top" background="/Images/2006/index_apoints_conbg.gif"><img src="../Images/2006/index_apoints_conbg.gif" width="3" height="15"></td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" bgcolor="AFB1B7" class="rightbiao"><strong><font color="#FFFFFF"></font></strong></td>
</tr>
<tr>
<td class="articlenew"><table width="100%" height="81" border="0" cellpadding="0" cellspacing="4" class="apointsauthor">
<tr>
<td align="center" valign="top">
<!--竖形广告-->
<script language='javascript' src='/AD_dai/200605/con_right01.js'></script></td>
</tr>
</table> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" bgcolor="AFB1B7" class="rightbiao"><a class="class" href="/web/ShowElite.asp"><strong><font color="#FFFFFF">最
新 推 荐</font></strong></a></td>
</tr>
<tr>
<td class="articlenew">
<script language='javascript' src='/web/JS/Article_Elite2.js'></script>
</td>
</tr>
<tr>
<td class="articlenew"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" bgcolor="AFB1B7" class="rightbiao"> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="4" class="apointsauthor">
<tr>
<td align="center" valign="top">
<!--竖形广告-->
<script type="text/javascript">
var arrBaiduCproConfig=new Array();
arrBaiduCproConfig['uid'] =119845;
arrBaiduCproConfig['n'] ='apointscpr';
arrBaiduCproConfig['tm'] =26;
arrBaiduCproConfig['cm'] =0;
arrBaiduCproConfig['um'] =0;
arrBaiduCproConfig['w'] =200;
arrBaiduCproConfig['h'] =320;
arrBaiduCproConfig['wn'] =1;
arrBaiduCproConfig['hn'] =10;
arrBaiduCproConfig['ta'] ='left';
arrBaiduCproConfig['tl'] ='top';
arrBaiduCproConfig['bu'] =0;
arrBaiduCproConfig['bd'] ='#ffffff';
arrBaiduCproConfig['bg'] ='#ffffff';
arrBaiduCproConfig['tt'] ='#40779B';
arrBaiduCproConfig['ct'] ='#000000';
arrBaiduCproConfig['url'] ='#666666';
arrBaiduCproConfig['bdl'] ='#ffffff';
arrBaiduCproConfig['rad'] =1;
</script>
<script type="text/javascript" src="http://cpro.baidu.com/cpro/ui/ui.js" >
</script>
<script type="text/javascript">
<!--
document.write(baiduCproIFrame());
-->
</script>
</td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" bgcolor="AFB1B7" class="rightbiao"><a class="class" href="/web/ShowHot.asp"><strong><font color="#FFFFFF">最
新 热 门</font></strong></a></td>
</tr>
<tr>
<td class="articlenew"> <script language='javascript' src='/web/JS/Article_Hot2.js'></script></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="4" class="apointsauthor">
<tr>
<td align="center" valign="top">
<!--竖形广告-->
<script language='javascript' src='/AD_dai/200605/con_right03.js'></script></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" bgcolor="AFB1B7" class="rightbiao"> </td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="4" class="apointsauthor">
<tr>
<td align="center" valign="top">
<!--竖形广告-->
<script type="text/javascript">
var arrBaiduCproConfig=new Array();
arrBaiduCproConfig['uid'] =119845;
arrBaiduCproConfig['n'] ='apointscpr';
arrBaiduCproConfig['tm'] =26;
arrBaiduCproConfig['cm'] =0;
arrBaiduCproConfig['um'] =0;
arrBaiduCproConfig['w'] =200;
arrBaiduCproConfig['h'] =200;
arrBaiduCproConfig['wn'] =1;
arrBaiduCproConfig['hn'] =6;
arrBaiduCproConfig['ta'] ='left';
arrBaiduCproConfig['tl'] ='top';
arrBaiduCproConfig['bu'] =0;
arrBaiduCproConfig['bd'] ='#ffffff';
arrBaiduCproConfig['bg'] ='#ffffff';
arrBaiduCproConfig['tt'] ='#40779B';
arrBaiduCproConfig['ct'] ='#000000';
arrBaiduCproConfig['url'] ='#666666';
arrBaiduCproConfig['bdl'] ='#ffffff';
arrBaiduCproConfig['rad'] =1;
</script>
<script type="text/javascript" src="http://cpro.baidu.com/cpro/ui/ui.js" >
</script>
<script type="text/javascript">
<!--
document.write(baiduCproIFrame());
-->
</script>
</td>
</tr>
<tr>
<td align="center" valign="top"><script language='javascript' src='/AD_dai/200605/con_right04.js'></script></td>
</tr>
</table></td>
</tr>
</table>
<table width="950" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="A1CC46" height="5">
<tr>
<td bgcolor="356195"><SCRIPT language=javascript src="http://www.apoints.com/includes/foot.js"></SCRIPT></td>
</tr>
</table>
</body>
</html>
<NOSCRIPT><IFRAME src='*' Width='0' Height='0'></IFRAME></NOSCRIPT>
6......
html滚动代码大全[HTML代码]会移动的文字(Marquee)
Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器。
格式:
<MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>…
</MARQUEE>
属性:
ALIGN:用于按设定的值对齐滚动的文本。ALIGN可以设定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此属性不是必须使用的。
例:
<MARQUEE ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE>
BEHAVIOR:可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE,那么文本就移动到文档上,并停留在页边距上。如果设定为ALTERNATE,则文本从一边移动到另一边。如果设定为SCROLL,文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有:SILIDE,ALTERNATE,SCROLL。
例:
<MARQUEE BEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE>
BGCOLOR:用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。
例:
<MARQUEE BGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE>
<MARQUEE BGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE>
<MARQUEE BGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE>
DIRECTION:用于设定文本滚动的方向,可以设定的值有:LEFT,RIGHT。此属性不是必须使用的。
例:
<MARQUEE DIRECTION="LEFT">文字向左边滚动</MARQUEE>
<MARQUEE DIRECTION="RIGHT">文字向右边滚动</MARQUEE>
HEIGHT:用于设定滚动字幕的高度,高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例:
<MARQUEE HEIGHT="10%">滚动字幕的高度是可视页面的10%</MARQUEE>
<MARQUEE HEIGHT="12">滚动字幕的高度是12像素</MARQUEE>
WIDTH:用于设定字幕的宽度,宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例:
<MARQUEE WIDTH="90%">滚动字幕的宽度是可视页面的90%</MARQUEE>
<MARQUEE WIDTH="200">滚动字幕的宽度是200像素</MARQUEE>
HSPACE:用于设定滚动字幕左右的空白空间,空白空间用像素表示。此属性不是必须使用的。
例:
<MARQUEE HSPACE="15">滚动字幕左右空白空间为15个像素</MARQUEE>
VSPACE:用于设定滚动字幕上下的空白空间,空白空间用像素表示。此属性不是必须使用的。
例:
<MARQUEE VSPACE="2">滚动字幕上下的空白空间为2个像素</MARQUEE>
LOOP:用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时,则文字会无限制地滚动。此属性不是必须使用的。
例:
<MARQUEE LOOP="-1">文字滚动无数次</MARQUEE>
<MARQUEE LOOP="5">文字滚动5次</MARQUEE>
SCROLLAMOUNT:用于设定每个连续滚动文本后面的间隔,该间隔用像素表示。此属性不是必须使用的。
例:
<MARQUEE SCROLLAMOUNT="10">此文本后面的间隔为10个像素</MARQUEE>
SCROLLDELAY:用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。此属性不是必须使用的。
例:
<MARQUEE SCROLLDELAY="5">此文本两次滚动之间的间隔时间为5毫秒</MARQUEE>
ONMOUSEOUT=this.start() :用来设置鼠标移出该区域时继续滚动
ONMOUSEOVER=this.stop():用来设置鼠标移入该区域时停止滚动
-------------------------------------------------------------
<TABLE height=393 cellSpacing=0 cellPadding=0 width=524 align=center bgColor=#d1f6db border=0><FONT size=4><FONT color=#990033></FONT></FONT>
<TBODY>
<TR><FONT size=4><FONT color=#990033></FONT></FONT>
<TD style="BORDER-RIGHT: 2px solid; PADDING-RIGHT: 1px; BORDER-TOP: 2px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: 2px solid; LINE-HEIGHT: 20px; PADDING-TOP: 1px; BORDER-BOTTOM: 2px solid" borderColor=#99ccff bgColor=#000000 colSpan=2 height=393>
<P style="MARGIN-TOP: -5px; MARGIN-BOTTOM: -5px; LINE-HEIGHT: 100%">
<MARQUEE scrollDelay=100 direction=up height=393><IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756252.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756538.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756304.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756318.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756503.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756827.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756521.jpg"></MARQUEE></P><PRE style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; LINE-HEIGHT: 100%"></FONT></PRE></TD></TR></TBODY></TABLE>
------------------------------------------------------------
基本语法
<marquee> ... </marquee>
文字移动属性的设置
方向
<direction=#> #=left, right <marquee direction=left>从右向左移!</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>来回走</marquee>
循环
<loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走
3 趟</marquee>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>
速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>
延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!
</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我会移动耶!</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>
面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee>
<marquee direction=up>我在向上走!</marquee>
<marquee direction=down>我又下向走了</marquee>
补充一个无缝连接的循环滚动
<html>
<head>
</head>
<body>
<TD WIDTH=390 HEIGHT=99><MARQUEE scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99>
<SCRIPT language=JavaScript>
for(t=1;t<=1000;t++)
document.write("11111111111112222222222222222233333333333333")
</SCRIPT>
</MARQUEE></TD>
</body>
</html>
另一种实现无缝连接循环滚动得方法
<div style=overflow:hidden;height:100px width:100px>
<div href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank">nudeangel_2</a>
<a href="#" target="_blank">nudeangel_3</a>
<a href="#" target="_blank">nudeangel_4</a>
<a href="#" target="_blank">nudeangel_5</a>
<a href="#" target="_blank">inudeangel_6</a>
<a href="#" target="_blank">nudeangel_7</a>
</div>
<div t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function nudeangelMarquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
var repeat=setInterval(nudeangelMarquee,50);
demo.onmouseover=function() {clearInterval(repeat);}
demo.onmouseout=function() {repeat=setInterval(nudeangelMarquee,50);}
-----------------------------------------------------------
<marquee><bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>
最简单的图片移动特效———图片水平向左循环移动
:<marquee>
<img src="http://unibbs.unibbs.com/images/upphoto/647253.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647264.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647269.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647247.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/648164.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648169.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648177.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648182.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648186.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648189.gif">
</marquee