下载

1下载券

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 HTML中的一些特效示例

HTML中的一些特效示例.pdf

HTML中的一些特效示例

weishikai1992
2010-10-21 0人阅读 举报 0 0 0 暂无简介

简介:本文档为《HTML中的一些特效示例pdf》,可适用于IT/计算机领域

页面自动刷新<script>setTimeout("locationhref='url'",)<script>说明:url是要刷新的页面URL地址,是等待时间=秒文本框不可编辑<inputtype="text"name="a"readonly><inputtype="text"name="a"readonly="readonly">鼠标移到文本框内容自动全选<inputname="pc"type="text"value="pccom"onMouseOver="thisfocus()"onFocus="thisselect()"size="">一个链接打开多个网址<ahref="#"onclick='windowopen("http:链接一")windowopen("http:链接二")windowopen("http:链接三")'>演示链接<a>让背景图不滚动:IE浏览器支持一个Body属性bgproperties它可以让背景不滚动:<BodyBackground="图片文件"bgproperties="fixed">让你的网页无法另存为:<noscript><iframesrc=*><iframe><noscript>让IFRAME框架内的文档的背景透明:<iframesrc="about:<bodystyle='background:transparent'>"allowtransparency><iframe>禁止右键:<bodyoncontextmenu="returnfalse"ondragstart="returnfalse"onselectstart="returnfalse"onselect="documentselectionempty()"oncopy="documentselectionempty()"onbeforecopy="returnfalse"onmouseup="documentselectionempty()">进入页面后立即自动刷新:<metahttpequiv="refresh"content="url=http:***">***,这是你自己的网址。打开窗口即最大化<scriptlanguage="javascript"><!BeginselfmoveTo(,)selfresizeTo(screenavailWidth,screenavailHeight)End><script>加入背景音乐<bgsoundsrc="midwindbluemid"loop="">只适用于IE<embedsrc="musicmid"autostart="true"loop="true"hidden="true">对Netscape,IE都适用嵌入网页<iframename="tt"src="ahtml"width=""height=""scrolling="Auto"frameborder=""><iframe>第页HTML中的特效示例滚动<MARQUEEdirection=upheight=onmouseout=start()onmouseover=stop()scrollAmount=><marquee>细线分隔线<hrnoshadesize=color=#CCC>过度方式<metahttpequiv="PageExit"content="revealTrans(Duration=,Transition=)">Duration的值为网页动态过渡的时间单位为秒。Transition是过渡方式它的值为到分别对应种过渡方式。如下表:盒状收缩盒状放射圆形收缩圆形放射由下往上由上往下从左至右从右至左垂直百叶窗水平百叶窗水平格状百叶窗垂直格状百叶窗随意溶解从左右两端向中间展开从中间向左右两端展开从上下两端向中间展开从中间向上下两端展开从右上角向左下角展开从右下角向左上角展开从左上角向右下角展开从左下角向右上角展开水平线状展开垂直线状展开随机产生一种过渡方式如何控制横向和纵向滚动条的显隐<bodystyle="overflowy:hidden">去掉x轴<bodystyle="overflowx:hidden">去掉y轴<bodyscroll="no">不显加入注释的格式是:   〈![注释内容⋯]〉怎样在网页中加入Email链接并显示预定的主题<Ahref="mailto:huxiworktomcomsubject=主题">⋯⋯<a>定义本网页关键字可以在〈Head〉〈Head〉中加入如下代码: <metaname="Keywords"content="china,enterprise,business,net">  Content中所包含的就是关键字,你可以自行设置。  这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如:<metaname="Keywords"content="china,china,china,china">设为首页和添加到收藏夹:<ahref=#onClick=thisstylebehavior='url(#default#homepage)'thissetHomePage('http:wwwpccom')>设为首页<a><Ahref=javascript:windowexternaladdFavorite('http:wwwpccom','论坛乐趣')>加入收藏<a>定制浏览器地址栏前的小图标:A:在网页的〈head〉〈head〉间加入以下语句:<linkrel="shortcuticon"href="http:⋯iconico">即可。其中iconico为x的图标文件颜色不要超过色。把滚动条放在浏览器窗口的左边A:在<body>中加dir=RTL即<bodydir=RTL>第页HTML中的特效示例去掉热点地图上的区域线框与超链接的线框使用CSS定义<style>a{blr:expression(thisonFocus=thisblur())}area{blr:expression(thisonFocus=thisblur())}<style>或者<ahref="http:wwwwancorpnet"onFocus=thisblur()><imgsrc="LongFilesogif"border=><a>可以在收藏夹中显示出你的图标<linkrel="bookmark"href="faviconico">光标是停在文本框文字的最后:<scriptlanguage="javascript">functioncc(){vare=eventsrcelementvarr=ecreatetextrange()rmovestart(character,evaluelength)rcollapse(true)rselect()}<script><inputtype=textname=textvalue=""onfocus="cc()">最小化、最大化、关闭窗口:(本例适用于ie)<objectid=hhclassid="clsid:adbadffcfaaba"><paramname="command"value="minimize"><object><objectid=hhclassid="clsid:adbadffcfaaba"><paramname="command"value="maximize"><object><objectid=hhclassid="clsid:adbadffcfaaba"><paramname="command"value="close"><object><inputtype=buttonvalue=最小化onclick=hhclick()><inputtype=buttonvalue=最大化onclick=hhclick()><inputtype=buttonvalue=关闭onclick=hhclick()>怎样让表单没有凹凸感?<inputtype=textstyle="border:solid#">或<inputtype=textstyle="borderleft:noneborderright:nonebordertop:noneborderbottom:solid#"><textarea>在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动<style>body{backgroundimage:url(logogif)backgroundrepeat:norepeatbackgroundposition:centerbackgroundattachment:fixed}<style>脚本永不出错<scriptlanguage="javascript"><!hidefunctionkillerrors(){第页HTML中的特效示例returntrue}windowonerror=killerrors><script>点击返回上页代码:<form><p><inputTYPE="button"value="返回上一步"<I>onCLICK<I>="historyback()"><p><form>点击刷新代码:<form><p><inputTYPE="button"value="刷新按钮一"<I>onCLICK<I>="ReloadButton()"><p><form><<I>script<I>language="Java<I>script<I>"><!<I>function<I>ReloadButton(){locationhref="allbuttonhtm"}><<I>script<I>>点击刷新代码:<form><p><inputTYPE="button"value="刷新按钮二"<I>onClick<I>="historygo()"><p><form><form><p><inputTYPE="button"value="打开一个网站"<I>onCLICK<I>="HomeButton()"><p><form><<I>script<I>language="Java<I>script<I>"><!<I>function<I>HomeButton(){locationhref="http:nettraincom"}><<I>script<I>>我们平常会发现复选框有时候只能准确的点击那个小框框加入这段代码点中跟在小框框后面的文字也可以选中!!!<form><labelfor="check">经常来这里<label><inputtype="CHECKBOX"id="check"value="often"name="checkoften"><labelfor="check">偶尔来看看<label><inputtype="CHECKBOX"id="check"value="seldom"name="checkseldom"><form>如何自动加入最后修改日期◆在源代码中的<BODY>⋯<BODY>之间加入如下代码:<scriptLanguage="Javascript"><!documentwrite("LastUpdated:"documentlastModified)><script>用一个复选框来选中整个表单(form)中所有复选框先插入以下代码:<scriptlanguage="javascript"><!functionCheckAll(form){for(vari=i<formelementslengthi){vare=formelementsiif(ename!='chkall')echecked=formchkallchecked第页HTML中的特效示例}}><script>然后再加入:选中所有<inputtype=checkboxvalue="on"name="chkall"onclick="CheckAll(thisform)">完工^^web中滚动字幕的最简洁制作方法<marqueedirection=upTrueSpeedscrollAmount=scrollDelay=height=onMouseOut=thisstart()onMouseOver=thisstop()width=border="">科杰在线<br>第一排<br>第二排<br>第三排<br>第四排<br><marquee>显示日期<scriptlanguage="javascript"><!today=newDate()varweekvardateif(todaygetDay()==)week="星期日"if(todaygetDay()==)week="星期一"if(todaygetDay()==)week="星期二"if(todaygetDay()==)week="星期三"if(todaygetDay()==)week="星期四"if(todaygetDay()==)week="星期五"if(todaygetDay()==)week="星期六"date=(todaygetYear())"年"(todaygetMonth())"月"todaygetDate()"日"""documentwrite("<spanstyle='fontsize:pt'>"dateweek"<span>")><script>关闭窗口这个是不会弹出提示直接关的:把如下代码加入<body>区域中<OBJECTid=closestype="applicationxoleobject"classid="clsid:adbadffcfaaba"><paramname="Command"value="Close"><object><scriptlanguage="javascript">functionshutwin(){closesClick()return}<script><ahref="javascript:shutwin()">关闭本窗口<a>随机图片:把如下代码加入<body>区域中<scriptlanguage="javascript"><!today=newDate()jran=todaygetTime()functionrnd(){ia=ic=im=第页HTML中的特效示例jran=(jran*iaic)imreturnjran(im*)}functionrand(number){returnMathceil(rnd()*number)}documentwrite("<CENTER>")for(i=i<=i){myNum=(rand())改成你要随机显示的图片数if(myNum==)documentwrite("<imgsrc='photobackjpg'>")if(myNum==)documentwrite("<imgsrc='photojgif'>")图片路径可用http:if(myNum==)documentwrite("<imgsrc='photoemailgif'>")if(myNum==)documentwrite("<imgsrc='photoarrowgif'>")if(myNum==)documentwrite("<imgsrc='photojgif'>")if(myNum==)documentwrite("<imgsrc='photoemailgif'>")if(myNum==)documentwrite("<imgsrc='photoarrowgif'>")if(myNum==)documentwrite("<imgsrc='photojgif'>")if(myNum==)documentwrite("<imgsrc='photobackjpg'>")if(myNum==)documentwrite("<imgsrc='photoemailgif'>")else{documentwrite()}}documentwrite("<CENTER>")><script>其实改一改随机什么都行也不一定在body中图片显隐效果脚本说明:把如下代码加入<body>区域中<scriptlanguage=javascript>FlashImageExtensionforDreamwever,byYichunYuan(dezonesinacom)nereidFadeObjects=newObject()nereidFadeTimers=newObject()functionnereidFade(object,destOp,rate,delta){if(!documentall)returnif(object!="object"){dothissoIcantakeastringtoosetTimeout("nereidFade("object","destOp","rate","delta")",)return}clearTimeout(nereidFadeTimersobjectsourceIndex)diff=destOpobjectfiltersalphaopacitydirection=if(objectfiltersalphaopacity>destOp){direction=}delta=Mathmin(direction*diff,delta)objectfiltersalphaopacity=direction*deltaif(objectfiltersalphaopacity!=destOp){nereidFadeObjectsobjectsourceIndex=objectnereidFadeTimersobjectsourceIndex=setTimeout("nereidFade(nereidFadeObjects"objectsourceIndex","destOp","rate","delta")",rate)}第页HTML中的特效示例}<script><ahref=#><imgsrc="photoshopcnjpg"border=onMouseOut=nereidFade(this,,,)onMouseOver=nereidFade(this,,,)style="FILTER:alpha(opacity=)"><a>细线表格<style>thin{background:#}thintd{background:#FFFFFF}<style><tablewidth=""border=""cellspacing=""cellpadding=""class="thin"><tr><td><td><td><td><td><td><tr><tr><td><td><td><td><td><td><tr><tr><td><td><td><td><td><td><tr><table>去掉邮箱的标志<ahref="webmaster#sina#commailtwebmaster#sina#com">webmaster#sina#com<a>文字上的下划点线把如下代码加入<body>区域中<STYLETYPE="textcss">A{textdecoration:NONE}A:hover{borderbottom:pxdashed#de}<style><aclass=middlehref="#"><fontcolor="#de">鼠标放上来会有下划线<font><a>文本框效果<inputtype="text"name="title"size=""style="border:pxdoublergb(,,)font:pt"onfocus="stylebackgroundColor='#CCFF'"onblur="stylebackgroundColor='#efefef'">表单相关特效整理只能是一些限定的东西ENTER键可以让光标移到下一个输入框<inputonkeydown="if(eventkeyCode==)eventkeyCode="><br>只能是中文<inputonkeyup="value=valuereplace(~g,'')"onkeydown="if(eventkeyCode==)eventkeyCode="><br>只能是英文和数字屏蔽了输入法<inputstyle="imemode:disabled"第页HTML中的特效示例onkeydown="if(eventkeyCode==)eventkeyCode="><br>只能输入英文和数字<inputonkeyup="value=valuereplace(Wg,'')"onbeforepaste="clipboardDatasetData('text',clipboardDatagetData('text')replace(^dg,''))"onkeydown="if(eventkeyCode==)eventkeyCode="><br>只能是数字<inputonkeyup="value=valuereplace(^dg,'')"onbeforepaste="clipboardDatasetData('text',clipboardDatagetData('text')replace(^dg,''))"><br>只能显示不能修改<inputreadonlyvalue="只能显示不能修改">TEXTAREA自适应文字行数的多少<textarearows=name=scols=onpropertychange="thisstyleposHeight=thisscrollHeight">去掉下拉选项的边框<divstyle="position:absoluteleft:pxtop:pxwidth:pxheight:pxclip:rect()"><select><option>cnpeople<option><option>cnrose<option><option>cnbruce<option><select><font><div>下拉列表打开窗口<selectonChange="if(thisselectedIndexthisselectedIndex!=){windowopen(thisvalue)}thisselectedIndex="><optionselected>更多链接⋯⋯<option><optionvalue="http:wwwcnbrucecom"target="blank">cnbrucehttp:wwwcnbrucecom">cnbruce<option><optionvalue="http:daonetmyricecomold"target="blank">daonethttp:daonetmyricecomold">daonet<option><optionvalue="http:wwwblueideacom"target="blank">blue!dea'>http:wwwblueideacom">blue!dea<select>图片的固定方法*图片固定在左上角把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:norepeatbackgroundattachment:fixedbackgroundposition:lefttop}>第页HTML中的特效示例<STYLE> *图片固定在左下角把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:norepeatbackgroundattachment:fixedbackgroundposition:leftbottom}><STYLE> *图片固定在右上角把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:norepeatbackgroundattachment:fixedbackgroundposition:righttop}><STYLE> *图片固定在右下角把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:norepeatbackgroundattachment:fixedbackgroundposition:rightbottom}><STYLE> *图片固定在正中把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:norepeatbackgroundattachment:fixedbackgroundposition:centercenter}>第页HTML中的特效示例<STYLE> *图片上横固定把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:repeatxbackgroundattachment:fixedbackgroundposition:centertop}><STYLE> *图片下横固定把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:repeatxbackgroundattachment:fixedbackgroundposition:centerbottom}><STYLE> *图片左联固定把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:repeatybackgroundattachment:fixedbackgroundposition:leftcenter}><STYLE> *图片右联固定把代码加在<head><head>间□□□gif是图片的路径路径即是图片所在的位置。例如图片XXXgif在images文件夹里面则该路径写为:imagesXXXgif。图片的格式可以为gif、jpg。代码如下:<STYLEtype="textcss"><!BODY{backgroundimage:url(□□□gif)backgroundrepeat:repeatybackgroundattachment:fixedbackgroundposition:rightcenter}>第页HTML中的特效示例<STYLE>网页代码:永远居中的背景图像STYLETYPE="textcss">BODY{backgroundimage:URL(BUGIF)backgroundposition:centerbackgroundrepeat:norepeatbackgroundattachment:fixed}<STYLE>将上面的bugif换成你需要的背景图片名称网页代码:透明背景的Flash动画若想在网页制作中引用FLASH动画时将其背景透明化,只要在插入FLASH动画后在动画地址后加入一句:wmode="transparent"就OK了。<embedsrc="swf"width=""height=""quality="high"pluginspage="http:wwwmacromediacomgogetflashplayer"type="applicationxshockwaveflash"wmode="transparent"><embed>一段简单的倒计时代码<scriptlanguage="javascript">varurodz=newDate("")vars="今天离五一劳动节"varnow=newDate()varile=urodzgetTime()nowgetTime()vardni=Mathfloor(ile(***))if(dni>)documentwrite(""s"还有"dni"天")elseif(dni==)documentwrite("只有天啦!")elseif(dni==)documentwrite("只有天啦!")elsedocumentwrite("好象已经过了哦!")<script>有时分秒的倒计时代码<br>距离考试还有<br><spanid="spandtdt"style='border:pxsolidblackbackgroundcolor:#FFFFFF'><span><scriptlanguage=javascript><!documentwrite("")functionshowstudenttime(){windowsetTimeout("showstudenttime()",)BirthDay=newDate("")改成你的计时日期today=newDate()timeold=(BirthDaygetTime()todaygetTime())sectimeold=timeoldsecondsold=Mathfloor(sectimeold)msPerDay=***edaysold=timeoldmsPerDaydaysold=Mathfloor(edaysold)ehrsold=(edaysolddaysold)*hrsold=Mathfloor(ehrsold)第页HTML中的特效示例eminsold=(ehrsoldhrsold)*minsold=Mathfloor((ehrsoldhrsold)*)seconds=Mathfloor((eminsoldminsold)*)spandtdtinnerHTML=daysold"天"hrsold"小时"minsold"分"seconds"秒"}showstudenttime()><script>注:以上代码中的日期可自行修改。网页代码:会变色的表格首先在<head>和<head>之间加入下例代码:<scriptlanguage="javascript">functionchangeto(highlightcolor){source=eventsrcElementif(sourcetagName=="TR"||sourcetagName=="TABLE")returnwhile(sourcetagName!="TD")source=sourceparentElementif(sourcestylebackgroundColor!=highlightcolorsourceid!="ignore")sourcestylebackgroundColor=highlightcolor}functionchangeback(originalcolor){if(eventfromElementcontains(eventtoElement)||sourcecontains(eventtoElement)||sourceid=="ignore")returnif(eventtoElement!=source)sourcestylebackgroundColor=originalcolor}<script>然后在需要变换颜色的单元格中加入一句:bgcolor="fff"onMouseover="changeto('cccccc')"onMouseout="changeback('fff')"bgcolor为单元格背景色onMouseover为鼠标移上去后变换的颜色onMouseout是鼠标移开后变换的颜色例:<tablewidth=""border=""align="center"cellpadding=""cellspacing=""><tr><tdbgcolor="fff"onMouseover="changeto('cccccc')"onMouseout="changeback('fff')">格一<td><tr><tr><tdbgcolor="fff"onMouseover="changeto('ffcc')"onMouseout="changeback('fff')">格二<td><tr><tr><tdbgcolor="fff"onMouseover="changeto('')"onMouseout="changeback('fff')">格三<td><tr>第页HTML中的特效示例<tr><tdbgcolor="fff"onMouseover="changeto('')"onMouseout="changeback('fff')">格四<td><tr><table>网页代码:顺向变色文字<script>vartempm=functionflashsms(){for(m=m<=m){if(m==tempm)tempstr="#ff"elsetempstr="#"eval("e"m"stylecolor='"tempstr"'")}tempmif(tempm>)tempm=}setInterval("flashsms()",)<script><FONTcolor=#><SPANid=e>纯<SPAN><SPANid=e>氧<SPAN><SPANid=e>空<SPAN><SPANid=e>间<SPAN><SPANid=e>,<SPAN><SPANid=e>感<SPAN><SPANid=e>受<SPAN><SPANid=e>自<SPAN><SPANid=e>然<SPAN><SPANid=e>呼<SPAN><SPANid=e>吸<SPAN><SPANid=e>每<SPAN><SPANid=e>一<SPAN><SPANid=e>天<SPAN><SPANid=e>!<SPAN>设置网页中的链接全部默认在新窗口中打开的代码在网页代码中<head>的上面加上一行代码:<basetarget="blank">就是这样加了这行代码以后网页中的链接不用设置target="blank"也会从新窗口中打开网页制作中不可避免的要用到按钮本文列举了一些常用的按扭代码。查看源代码以下是引用片段:<inputTYPE="button"NAME="view"VALUE="查看源代码"OnClick="windowlocation='viewsource:'windowlocationhref">返回上一步以下是引用片段:<inputTYPE="button"VALUE="返回上一步"ONCLICK="historyback()">刷新按钮一以下是引用片段:<inputTYPE="button"VALUE="刷新按钮一"ONCLICK="ReloadButton()">第页HTML中的特效示例<scriptlanguage="javascript"><!functionReloadButton(){locationhref="html"}><script>刷新按钮二以下是引用片段:<inputTYPE="button"VALUE="刷新按钮二"onClick="historygo()">回首页按钮以下是引用片段:<inputTYPE="button"VALUE="回首页按钮"ONCLICK="HomeButton()"><scriptlanguage="javascript"><!functionHomeButton(){locationhref=http:wwwaaacom}><script>弹出警告框以下是引用片段:<inputTYPE="button"VALUE="弹出警告框"ONCLICK="alertButton()"><scriptlanguage="javascript"><!functionalertButton(){windowalert("今天你喝了没有?:)")}><script>状态栏信息以下是引用片段:<inputTYPE="button"VALUE="状态栏信息"ONCLICK="StatusButton()"><scriptlanguage="javascript"><!functionStatusButton(){windowstatus="你好吗?:)"}><script>背景色变换以下是引用片段:<inputTYPE="button"VALUE="背景色变换"onClick="BgButton()"><scriptlanguage="javascript"><!functionBgButton(){if(documentbgColor=='#ff'){documentbgColor='#ccff'}else{documentbgColor='#ff'}}><script>打开新窗口以下是引用片段:<inputTYPE="button"VALUE="打开新窗口"ONCLICK="NewWindow()"><scriptlanguage="javascript">第页HTML中的特效示例<!functionNewWindow(){windowopen(http:wwwdesignnet,"","height=,width=,left=,top=,status=no,loca

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/24

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利