常用的网页特效代码
- 格式:docx
- 大小:96.74 KB
- 文档页数:10
一、网页变灰的代码:a)网页变灰色<head>加到这里</head><style type="text/css">html {FILTER: gray}</style>b)<style type="text/css"><!--BODY {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}--></style>二、多余文字隐藏,用“…”表示:Text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block; }** 语法:1. text-overflow : clip | ellipsis :clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记(...)2. white-space 属性设置如何处理元素内的空白normal 默认。
空白会被浏览器忽略。
pre 空白会被浏览器保留。
其行为方式类似HTML 中的<pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到<br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承white-space 属性的值。
三、IE6下图片透明的方法:filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled , sizingMethod=sSize , src='图片的路径' )四、一个图层隐藏到另一个图层下面Z-index:200;五、鼠标放上去图片模糊<img name="img1" src="/images/cftea.gif" border=0style="filter:alpha(opacity=50)" onmouseover="this.filters.alpha.opacity='100'"onmouseout="this.filters.alpha.opacity='50'">。
style type="text/css">.star {position:absolute;layer-background-color:white;visibility:visible;top:-50px;width:50px;height:50px;font-size:1px;background-color:white;}</style><SCRIPT LANGUAGE="JavaScript"><!-- Beginvar starnum = 175; // Number of starsvar isNS = (yers);var _all = (isNS)? '' : 'all.';var _style = (isNS) ? '' : '.style';var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly; function getstartpos(obj) {obj.deltay = Math.floor(Math.random() * 12);obj.deltax = Math.floor(Math.random() * 12);obj.xdir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-'; obj.ydir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-'; obj.counter = 1;if (isNS) {obj.clip.width = 1;obj.clip.height = 1;obj.moveTo(xoffset+pageXOffset, yoffset+pageYOffset); } else {obj.width = 1;obj.height = 1;obj.pixelTop = yoffset+document.body.scrollTop;obj.pixelLeft = xoffset+document.body.scrollLeft;}}function movestar(starN) {tmpx = starN.deltax*starN.counter+starN.counter;tmpy = starN.deltay*starN.counter+starN.counter;if (isNS) {starN.clip.width = starN.counter / 3;starN.clip.height = starN.counter / 3;scrlx = pageXOffset;scrly = pageYOffset;if ((starN.left+tmpx >= w_x+scrlx) || (starN.top+tmpy >= w_y+scrly) || (starN.left-tmpx <= scrlx) || (starN.top-tmpy <= scrly)) {getstartpos(starN);} else {eval('starN.moveBy('+starN.xdir+tmpx+', '+starN.ydir+tmpy+')');}} else {starN.width = starN.counter/3;starN.height = starN.counter/3;scrlx = document.body.scrollLeft;scrly = document.body.scrollTop;if ((starN.pixelLeft+tmpx >= w_x+scrlx)||(starN.pixelTop+tmpy >= w_y+scrly) || (starN.pixelLeft-tmpx <= scrlx)||(starN.pixelTop-tmpy <= scrly)) {getstartpos(starN);} else {eval('starN.pixelTop'+starN.ydir+'=tmpy');eval('starN.pixelLeft'+starN.xdir+'=tmpx');}}starN.counter++;}function animate() {for(i=1; i <= starnum; i++) {movestar(eval('star'+i));}setTimeout('animate()', 100);}function findwindowparams() {w_x = (isNS) ? window.innerWidth : document.body.clientWidth;w_y = (isNS) ? window.innerHeight : document.body.clientHeight;xoffset = w_x / 2;yoffset = w_y / 2;for (i = 1; i <= starnum; i++) {getstartpos(eval('star'+i));}}function resizeNS() {setTimeout('document.location.reload()', 400);}(isNS) ? window.onresize = resizeNS : window.onresize = findwindowparams;window.onload = new Function("findwindowparams(); animate();");// End --></script>第二步:把<body>中加入如下代码:<SCRIPT LANGUAGE="JavaScript"><!-- Beginfor (i = 1; i <= starnum; i++) {document.writeln('<div id="star'+i+'" class="star"></div>'); eval('var star'+i+'=document.'+_all+'star'+i+_style);}// End --></script><html><head><title>滑动导航菜单</title></head><body><!--将以下代码加入HTML的<Body></Body>之间--><style><!--#ssm2 A {color:black;text-decoration:none;font-size:12;font-family:verdana;}#ssm2 A:hover {color:red;}--></style><script language="JavaScript1.2">function MM_displayStatusMsg(msgStr) {status=msgStr;document.MM_returnValue = true;function highlight(x){document.forms[x].elements[0].focus()document.forms[x].elements[0].select()}function MM_jumpMenu(targ,selObj,restore){eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0;}var NSIE=document.all;NS=yers;hdrFontFamily="Verdana";hdrFontSize="2";hdrFontColor="white";hdrBGColor="#666666";linkFontFamily="Verdana";linkFontSize="2";linkBGColor="white";linkOverBGColor="#CCCCCC";linkTarget="_top";YOffset=60;staticYOffset=20;menuBGColor="black";menuIsStatic="no";menuHeader="欢迎光临"menuWidth=150; // Must be a multiple of 5!staticMode="advanced"barBGColor="#1298fd";barFontFamily="Verdana";barFontSize="2";barFontColor="white";barText="导航菜单"function moveOut() {if (window.cancel) {cancel="";}if (window.moving2) {clearTimeout(moving2);moving2="";}if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {if (IE) {ssm2.style.pixelLeft += (5%menuWidth);}if (NS) {document.ssm2.left += (5%menuWidth);}moving1 = setTimeout('moveOut()', 5)}else {clearTimeout(moving1)}};function moveBack() {cancel = moveBack1()}function moveBack1() {if (window.moving1) {clearTimeout(moving1)}if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) { if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);}if (NS) {document.ssm2.left -= (5%menuWidth);}moving2 = setTimeout('moveBack1()', 5)}else {clearTimeout(moving2)}};lastY = 0;function makeStatic(mode) {if (IE) {winY = document.body.scrollTop;var NM=ssm2.style}if (NS) {winY = window.pageYOffset;var NM=document.ssm2}if (mode=="smooth") {if ((IE||NS) && winY!=lastY) {smooth = .2 * (winY - lastY);if(smooth > 0) smooth = Math.ceil(smooth);else smooth = Math.floor(smooth);if (IE) NM.pixelTop+=smooth;if (NS) NM.top+=smooth;lastY = lastY+smooth;}setTimeout('makeStatic("smooth")', 1)}else if (mode=="advanced") {if ((IE||NS) && winY>YOffset-staticYOffset) {if (IE) {NM.pixelTop=winY+staticYOffset}if (NS) {NM.top=winY+staticYOffset}}else {if (IE) {NM.pixelTop=YOffset}if (NS) {NM.top=YOffset-7}}setTimeout('makeStatic("advanced")', 1)}}function init() {if (IE) {ssm2.style.pixelLeft = -menuWidth;ssm2.style.visibility = "visible"}else if (NS) {document.ssm2.left = -menuWidth;document.ssm2.visibility = "show"}else {alert('Choose either the "smooth" or "advanced" static modes!') }}function MM_displayStatusMsg(msgStr) {status=msgStr;document.MM_returnValue = true;}</script><script language="JavaScript1.2">if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}tempBar=""for (i=0;i<barText.length;i++) {tempBar+=barText.substring(i, i+1)+"<BR>"}document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')function addItem(text, link, target) {if (!target) {target=linkTarget}document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'"onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYERonmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}function addHdr(text) {document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}addItem("广宇软件", "", "");addItem("天空下载", "", "");addHdr('友情连接');addItem("大富翁论坛", "", "");addItem("Codelphi", "", "");addItem("中国软件", "", "");document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')if (IE) {document.write('</DIV>')}if (NS) {document.write('</LAYER>')}if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}</script><script> window.onload=init </script></body></html>动态文字中国素材网 2005-3-31 13:23:06 流量数:--------------------------------------------------------------------------------动态文字[查看演示] 源码如下----------------------------------------------------------------------------------------<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>New Page 1-</title><style><!--div { font-family: Tahoma }--></style></head><body onload="startmotor(0)"><script language="JavaScript1.2">/*Shock Wave Text script- By ejl@Submitted to and featured on Dynamic Drive ()For full source code, usage terms, and 100's more DHTML scripts, visit */var size = 25;var speed_between_messages=1500 //in milisecondsvar tekst = new Array(){tekst[0] = "Shock Wave text @ "; tekst[1] = "Here you can type anything you want"; tekst[2] = "You can change the size";tekst[3] = "And you can change the speed";}var klaar = 0;var s = 0;var veran =0;var tel = 0;function bereken(i,Lengte){return (size*Math.abs( Math.sin(i/(Lengte/3.14))) ); }function motor(p){var output = "";for(w = 0;w < tekst[s].length - klaar+1; w++){q = bereken(w/2 + p,16);if (q > size - 0.5){klaar++;}if (q < 5){tel++;if (tel > 1){tel = 0;if (veran == 1){veran = 0;s++;if ( s == tekst.length){s = 0;}p = 0;if (window.loop){clearInterval(loop)}loop = motor();}}}output += "<font style='font-size: "+ q +"pt'>" +tekst[s].substring(w,w+1)+ "</font>";}for(k=w;k<klaar+w;k++){output += "<font style='font-size: " + size + "pt'>" +tekst[s].substring(k,k+1)+ "</font>";}idee.innerHTML = output;}function startmotor(p){if (!document.all)returnvar loop = motor(p);if (window.time){clearInterval(time)}if (klaar == tekst[s].length){klaar = 0;veran = 1;tel = 0;var time = setTimeout("startmotor(" +(p+1) + ")", speed_between_messages);}else{var time =setTimeout("startmotor(" +(p+1) + ")", 50);}}</script><div ID="idee"></div></body></html><div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand"><input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> ----------------------------------------------------------------------------------------。
网页特效代码1.滚动字幕代码:<marquee style="width: 200px; height: 94px" onmouseover="function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { function onmouseover() { this.stop() } } } } } } } } } } } }" onmouseout="function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { function onmouseout() { this.start() } } } } } } } } } } } }" direction="up" height="94" width="200" scrollamount="1"><p align="center"><font color="#ff0000" size="4"><strong>祝大家端午节快乐</strong></font><br /><font color="#ae1515">1、公告区内有成绩下载链接,请下载后查看是否有遗漏作业;<br />2、模块三活动1中非案例领取人需提前一天完成该项作业,最后一天为案例领取人总结时间。
典型特效加入收藏夹设为首页去掉超链接的下划线自动刷新网页刷新本页返回到上一页跳出小窗口自动关闭窗口给页面加保护固定字号大小状态栏例的动态欢迎语保护自己的页面不被别人放在框架中说明点击即可把你的网站添加到浏览器的收藏菜单下效果收藏本站代码<span style="CURSOR: hand" onClick="window.external.addFavorite('','网页特效集锦')" title="网页特效集锦">收藏本站</span>说明点击即可把你的网站设置为浏览器的起始页效果设为首页代码<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.s etHomePage('');" style="CURSOR: hand">设为首页</span>说明有时候看着那超链接的下划线挺讨厌的,把下面这段代码放到网页源代码<head>与</head>之间,下划线就无影无踪啦!注意,网页的<body>标签里不能再有link之类的属性,否则本效果会失效!效果试试就知道啦!代码 <style TYPE="text/css"><!--A:link{text-decoration:none}A:visited{text-decoration:none}A:hover {color: #ff00ff;text-decoration:underline}--></style>说明自动刷新网页在HTML的与之间加入下面这段代码,则在5分钟之后正在浏览的页面将会自动变为target.html这一页。
塔里木大学信息工程学院计算机12-3陈浩整理目录1.让文字不停地滚动 (4)2.不同时间段显示不同问候语 (4)3.让网页随意后退(这是写在BODY里的源码) (4)4.随机变换背景图象(一个可以刷新心情的特效) (5)5.文字效果向上的效果 (5)6.鼠标放到链接上就会出现一个说明框,里面有滚动的文字说明 (6)7.时钟 (7)8.状态栏的打字效果 (8)9.统计访问次数 (9)10.页面中登陆FTP (10)11.图片渐渐显示 (12)12.图片大小随鼠标触碰而变化 (12)13.页面自动滚屏效果 (12)14.文字从天而降 (13)15.百页窗效果 (19)16.舞台光柱照射效果 (21)17.各种用途的按钮大集合 (21)18.自动刷新网页 (23)19.保护自己的页面不被别人放在框架中 (23)20.打字机打彩色文字 (23)21.鼠标激活警告框 (25)23.彩色滚动条 (27)24.跳出小窗口 (27)25.很酷的类似鼠标跟随的遮照效果 (27)26.在一个Textarea框中,文字逐个输出,而且自动换行和刷屏 (28)27.鼠标键值表 (30)28.非常实用的随机产生用户密码脚本 (30)29.鼠标带图像效果 (33)30.一个很好的文字效果 (62)31.打把游戏 (65)32.超酷文字下落效果 (72)33.多格式下拉菜单 (77)34.文字的变换导航 (79)35.随机文字显示 (85)36.链接使图片变换 (85)37.banner变换导航 (87)39.不间断滚动的处理 (93)40.相同地方滚动新闻 (95)41.图片的任意方向移动(窗帘效果) (97)42.很酷的图片集旋转显示 (99)43.小巧实用的鼠标时钟 (102)44.上下滚动的文字 (109)45.怎样去掉图片链接点击后,图片周围的虚线? (110)46.怎样让表单没有凹凸感? (113)47.<div><span>&<layer>的区别? (113)48.让弹出窗口总是在最上面 (113)49.不要滚动条? (114)50.怎样去掉图片链接点击后,图片周围的虚线? (114)51.电子邮件处理提交表单 (114)52.在打开的子窗口刷新父窗口的代码里如何写? (114)53.如何设定打开页面的大小 (115)54.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 (115)55.检查一段字符串是否全由数字组成 (115)56. 获得一个窗口的大小 (115)57.怎么判断是否是字符 (115)58.TEXTAREA自适应文字行数的多少 (116)59. 日期减去天数等于第二个日期 (116)60. 选择了哪一个Radio (116)61.脚本永不出错 (117)62.ENTER键可以让光标移到下一个输入框 (117)63. 检测某个网站的链接速度: (117)64. 各种样式的光标 (118)65.页面进入和退出的特效 (119)66.在规定时间内跳转 (120)67.网页是否被检索 (120)68.可移动的页面窗口 (120)69.隐藏层的打开关闭 (121)70.用鼠标弹出隐藏层 (123)71.文字整屏下坠 (127)72.可显示隐藏的层 (129)73.花絮向右飞舞(有下雪的感觉) (132)74.有点象游戏中的聊天窗口 (134)75.模拟下雪景象 (138)76.极具创意的小球 (139)77.页面闪电效果 (146)78.巨酷的东西! (152)79.会自动消失的层 (159)80.页面上出现随意舞动的星 (161)81.招牌文字特效 (164)83.打开页面特效(缩小方块) (173)84.打开页面特效(一)(上下分开) (174)85.打开页面特效(二)(开门特效) (176)86.页面左右象百页窗一样地打开,也非常好看,赶快用吧 (178)87.页面象马赛克一样一块一块地慢慢打开,效果非常棒的 (180)88.可以用来做首页的诸多特效 (184)89.向右移屏 (194)90.缩进式的导航条 (195)91.获得系统时间 (200)92.取得来访用的IP (200)93.获得系统,浏览器版本 (201)94.去除IE混动条 (201)95.进入网站,跳出广告 (201)96.随机数 (201)97.向上混动代码 (201)98.自动关闭网页 (202)99.随机背景音乐 (202)100.自动刷新本页面 (202)101.ACCESS数据库连接 (203)102.SQL数据库连接 (203)103.用键盘打开网页代码 (204)104.让层不被控件复盖代码 (204)105.动网FLASH广告代码 (204)106.VBS弹出窗口小代码 (205)107.使用FSO修改文件特定内容的函数 (205)108.使用FSO读取文件内容的函数 (205)109.使用FSO读取文件某一行的函数 (206)120.使用FSO写文件某一行的函数 (206)121.使用FSO添加文件新行的函数 (207)122.读文件最后一行的函数 (207)124.点击返回上页代码 (212)125.点击刷新代码 (212)126.点击刷新代码 (212)127.弹出警告框代码 (213)128.状态栏信息 (213)129.背景色变换 (213)130.点击打开新窗口 (214)131.分页代码 (214)132.name 属性 (217)133.http-equiv属性 (218)1.让文字不停地滚动<MARQUEE>滚动文字</MARQUEE>2.不同时间段显示不同问候语(放在SCRIPT中,然后将多余的SCRIPT情节去除)<Script Language="JavaScript"><!--var text=""; day = new Date( ); time = day.getHours( );if (( time>=0) && (time < 7 ))text="夜猫子,要注意身体哦! "if (( time >= 7 ) && (time < 12))text="今天的阳光真灿烂啊,你那个朋友呢?"if (( time >= 12) && (time < 14))text="午休时间。
html特效代码大全精美 html特效代码大全精通HTML特效代码1。
忽视右键或2。
加入背景音乐IE:NS:*.mid你的背景音乐的midi格式文件3。
简单的window.open方法onclick="javascript :window.open(文件路径/文件名,newwindow, toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,width=400,height=300);">文字或图片参数解释:js脚本结束4。
简单的页面加密5。
拉动页面时背景图不动6。
让浏览器在保存页面时保存失败标内加入如:9。
网页自动关闭这个窗口会在10秒过后自动关闭,而且不会出现提示.10。
网页自动刷新在head部记入其中20为20秒后自动刷新,你可以更改为任意值。
11。
网页自动转页#前面#后面 height=100% width=100%>13。
返回上一页『返回上一页』14。
关闭窗口『关闭窗口』15。
关于iframe的透明背景16. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table17. 取消选取、防止复制18.onpaste="return false" 不准粘贴19.oncopy="return false;" oncut="return false;" 防止复制20. IE地址栏前换成自己的图标21. 可以在收藏夹中显示出你的图标22. 关闭输入法23. 永远都会带着框架24. 防止被人frame25. 网页将不能被另存为27.删除时确认删除28.屏蔽功能键Shift,Alt,Ctrl29. 网页不会被缓存或者或31.不要滚动条?让竖条没有:让横条没有:两个都去掉?更简单了32.怎样去掉图片链接点击后,图片周围的虚线?33.电子邮件处理提交表单34.在打开的子窗口刷新父窗口的代码里如何写?window.opener.location.reload()35.如何设定打开页面的大小打开页面的位置36.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动37. 检查一段字符串是否全由数字组成38. 获得一个窗口的大小document.body.clientWidth; document.body.clientHeight 39. 怎么判断是否是字符if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");else alert("全是字符");40.TEXTAREA自适应文字行数的多少Barcode区域中:")for(var i=1;idocument.write("")document.write("200){document.forms[0]["txt"+b].value="链接超时"}else{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"} b++ } function run(){for(var i=1;i")}run()46. 各种样式的光标auto :标准光标default :标准箭头hand :手形光标wait :等待光标text :I形光标vertical-text :水平I形光标no-drop :不可拖动光标not-allowed :无效光标help :?帮助光标all-scroll :三角方向标move :移动标crosshair :十字标e-resizen-resizenw-resizew-resizes-resizese-resizesw-resize47、禁止鼠标右键,把Demo的图片全都设为表格的背景,表格的大小与图片的大小一样。
Page_Enter : 进入页面Page-Exit : 离开页面Site-Enter : 进入网站Site-Exit : 离开网站Duration : 过渡速度transition :可选项。
整数值(Integer)。
设置或检索转换所使用的方式。
0 :矩形收缩转换。
1 :矩形扩张转换。
2 :圆形收缩转换。
3 :圆形扩张转换。
4 :向上擦除。
5 :向下擦除。
6 :向右擦除。
7 :向左擦除。
8 :纵向百叶窗转换。
9 :横向百叶窗转换。
10 :国际象棋棋盘横向转换。
11 :国际象棋棋盘纵向转换。
12 :随机杂点干扰转换。
13 :左右关门效果转换。
14 :左右开门效果转换。
15 :上下关门效果转换。
16 :上下开门效果转换。
17 :从右上角到左下角的锯齿边覆盖效果转换。
18 :从右下角到左上角的锯齿边覆盖效果转换。
19 :从左上角到右下角的锯齿边覆盖效果转换。
20 :从左下角到右上角的锯齿边覆盖效果转换。
21 :随机横线条转换。
22 :随机竖线条转换。
23 :随机使用上面可能的值转换。
运用:把下面代码加在文本头的<meta>标记中混合(淡入淡出)<meta http-equiv=”Page-Enter” content=”blendTrans(Duration=2.0)”>盒状收缩<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=0)”>盒状展开<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=1)”>圆形收缩<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=2)”>圆形放射<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=3)”>向上擦除<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=4)”>向下擦除<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=5)”>向右擦除<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=6)”>向左擦除垂直遮蔽<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=8)”>水平遮蔽<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=9)”>横向棋盘式<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=10)”>纵向棋盘式<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=11)”>随机溶解<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=12)”>左右向中央缩进<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=13)”>中央向左右扩展<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=14)”>上下向中央缩进<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=15)”>中央向上下扩展<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=16)”>从左下抽出<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=17)”>从左上抽出<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=18)”>从右下抽出从右上抽出<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=20)”>随机水平线条<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=21)”>随机垂直线条<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=22)”>随机<meta http-equiv=”Page-Enter” content=”revealTrans(Duration=2.0,Transition=23)”>网页幻灯片过渡效果大全IE网页过渡效果在IE5.5及以上版本的浏览器中,我们可以设置整页过渡效果,据此,我们甚至可以用IE来代替PPT了。
网页制作特效——网页特效(1)导航菜单:<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta http-equiv="refresh" content="0;URL=/jscode/js080508/jscode.htm"><title>仿网页特效观止首页栏目切换滑动门效果</title></head><body>文件较多,查看演示请直接点击下面的预览效果,下载该特效请点击上处链接下载</body></html>(2)出发导航菜单:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效代码||---经典实用的触发型导航菜单</title></head><body><STYLE type=text/css>.sec1 {BORDER-RIGHT: gray 1px solid; BORDER-TOP:#ffffff 1px solid; BORDER-LEFT: #ffffff 1pxsolid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:#eeeeee}.sec2 {BORDER-RIGHT: gray 1px solid; BORDER-TOP:#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:#000000; BACKGROUND-COLOR: #d4d0c8}.main_tab {BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8}</STYLE><!--JavaScript部分--><SCRIPT language=javascript>function secBoard(n){for(i=0;i<secTable.cells.length;i++)secTable.cells[i].className="sec1";secTable.cells[n].className="sec2";for(i=0;i<mainTable.tBodies.length;i++)mainTable.tBodies[i].style.display="none";mainTable.tBodies[n].style.display="block";}</SCRIPT><!--HTML部分--><TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0><TBODY><TR align=middle height=20><TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD><TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD><TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD><TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE><TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记--><TBODY style="DISPLAY: block"><TR><TD vAlign=top align=middle><BR><BR><TABLE cellSpacing=0 cellPadding=0 width=490 border=0><TBODY><TR><TD>指定行做为表体。
一些常用的网页特效2. <body onselectstart="return false"> 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标7. <input style="ime-mode:disabled"> 关闭输入法8. 永远都会带着框架<script language="JavaScript"><!--if (window == top)top.location.href = "frames.htm";//frames.htm为框架网页// --></script>9. 防止被人frame<SCRIPT LANGUAGE=JAVASCRIPT><!--if (top.location != self.location)top.location=self.location;// --></SCRIPT>10. 网页将不能被另存为<noscript><iframesrc="/*.html>";</iframe></noscript>11. <input type=button value=查看网页源代码onclick="window.location = "view-source:"+ """>12.删除时确认<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>13. 取得控件的绝对位置//Javascript<script language="Javascript">function getIE(e){var t=e.offsetTop;var l=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}alert("top="+t+"/nleft="+l);}</script>//VBScript<script language="VBScript"><!--function getIE()dim t,l,a,bset a=document.all.img1t=document.all.img1.offsetTopl=document.all.img1.offsetLeftwhile a.tagName<>"BODY"set a = a.offsetParentt=t+a.offsetTopl=l+a.offsetLeftwendmsgbox"top="&t&chr(13)&"left="&l,64,"得到控件的位置"end function--></script>14. 光标是停在文本框文字的最后<script language="javascript">function cc(){var e = event.srcElement;var r =e.createTextRange();r.moveStart("character",e.value.length);r.collapse(true);r.select();}</script><input type=text name=text1 value="123"onfocus="cc()">15. 判断上一页的来源javascript:document.referrer16. 最小化、最大化、关闭窗口<object id=hh1classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A 11"><param name="Command"value="Minimize"></object><object id=hh2classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A 11"><param name="Command"value="Maximize"></object><OBJECT id=hh3classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"& gt;<PARAM NAME="Command"VALUE="Close"></OBJECT><input type=button value=最小化onclick=hh1.Click()><input type=button value=最大化onclick=hh2.Click()><input type=button value=关闭onclick=hh3.Click()> 本例适用于IE17.屏蔽功能键Shift,Alt,Ctrl<script>function look(){if(event.shiftKey)alert("禁止按Shift键!"); //可以换成ALT CTRL}document.onkeydown=look;</script>18. 网页不会被缓存<META HTTP-EQUIV="pragma"CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate"><META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">或者<META HTTP-EQUIV="expires" CONTENT="0">19.怎样让表单没有凹凸感?<input type=text style="border:1 solid #000000">或<input type=text style="border-left:none;border-right:none; border-top:none; border-bottom:1 solid #000000"></textarea>20.<div><span>&<layer>的区别?<div>(division)用来定义大段的页面元素,会产生转行<span>用来定义同一行内的元素,跟<div>的唯一区别是不产生转行<layer>是ns的标记,ie不支持,相当于<div> 21.让弹出窗口总是在最上面:<body onblur="this.focus();">22.不要滚动条?让竖条没有:<body style="overflow:scroll;overflow-y:hidden"></body>让横条没有:<body style="overflow:scroll;overflow-x:hidden"></body>两个都去掉?更简单了<body scroll="no"></body>23.怎样去掉图片链接点击后,图片周围的虚线?<a href="#" onFocus="this.blur()"><imgsrc="/logo.jpg" border=0></a>24.电子邮件处理提交表单<form name="form1" method="post"action="mailto:****@***.com" enctype="text/plain"><input type=submit></form>25.在打开的子窗口刷新父窗口的代码里如何写?window.opener.location.reload()26.如何设定打开页面的大小<body onload="top.resizeTo(300,200);">打开页面的位置<bodyonload="top.moveBy(300,200);">27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动<STYLE>body{background-image:url(/logo.gif);background-repeat:no-repeat;background-position:center;background-attachment: fixed} </STYLE>28. 检查一段字符串是否全由数字组成<script language="Javascript"><!--function checkNum(str){return str.match(//D/)==null}alert(checkNum("1232142141"))alert(checkNum("123214214a1"))// --></script>29. 获得一个窗口的大小document.body.clientWidth; document.body.clientHeight 30. 怎么判断是否是字符if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");else alert("全是字符");31.TEXTAREA自适应文字行数的多少<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight" ></textarea>32. 日期减去天数等于第二个日期<script language=Javascript>function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")}cc("12/23/2002",2)</script>33. 选择了哪一个Radio<HTML><script language="vbscript"> function checkme()for each ob in radio1if ob.checked thenwindow.alert ob.valuenextend function</script><BODY><INPUT name="radio1" type="radio" value="style" checked>Style<INPUT name="radio1" type="radio"value="barcode">Barcode<INPUT type="button" value="check"onclick="checkme()"></BODY></HTML>34.脚本永不出错<SCRIPT LANGUAGE="JavaScript"><!-- Hidefunction killErrors() {return true;}window.onerror = killErrors;// --></SCRIPT>35.ENTER键可以让光标移到下一个输入框<inputonkeydown="if(event.keyCode==13)event.keyCode=9"> ;36. 检测某个网站的链接速度:把如下代码加入<body>区域中:<script language=Javascript>tim=1setInterval("tim++",100)b=1var autourl=new Array()autourl[1]=""autourl[2]=""autourl[3]=""autourl[4]=""autourl[5]=""function butt(){document.write("<form name=autof>")for(var i=1;i<autourl.length;i++)document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=textname=url"+i+" size=40> =》<input type=button value=GOonclick=window.open(this.form.url"+i+".value)><br> ;")document.write("<input type=submit value=刷新></form>")}butt()function auto(url){document.forms[0]["url"+b].value="/urlif(tim>200){document.forms[0]["txt"+b].value="/链接超时"}else{document.forms[0]["txt"+b].value=""时间"+tim/10+"秒"}b++}function run(){for(vari=1;i<autourl.length;i++)document.write("<imgsrc=http://"+autourl+"/"+Math.random()+" width=1 height=1 onerror=auto("http://"+autourl+"")>")}run()</script>37. 各种样式的光标auto :标准光标default :标准箭头hand :手形光标wait :等待光标text :I形光标vertical-text :水平I形光标no-drop :不可拖动光标not-allowed :无效光标help :?帮助光标all-scroll :三角方向标move :移动标crosshair :十字标e-resizen-resizenw-resizew-resizes-resizese-resizesw-resize38.页面进入和退出的特效进入页面<meta http-equiv="Page-Enter"content="revealTrans(duration=x, transition=y)">推出页面<meta http-equiv="Page-Exit"content="revealTrans(duration=x, transition=y)">这个是页面被载入和调出时的一些特效。
常用的网页特效代码
1.文本向上循环滚动
说明:文本自动向上循环滚动,鼠标放到上面还会暂时停下来。
果:
代码:
2.页面自动滚屏效果
<body onLoad="scrollit()">
<SCRIPT language="JavaScript">
<!--
function scrollit(){
for (I=1; I<=500; I++){
self.scroll(1,I)
}
}
//-->
</SCRIPT>
3.滚动的文字说明
说明鼠标放到链接上就会出现一个说明框,里面有滚动的文字说明
效果把鼠标放上来试试
代码
4.飘动的字符跟随鼠标
说明在鼠标后面跟着一串飘动的字符
效果看看就知道啦!Array
代码
5.一群小点跟随鼠标
说明跟随鼠标的一群小点,就象星星一样
效果看看就知道啦!
代码
6.接触链接自动打开窗口
说明鼠标放到链接上,就立刻弹出警告框
效果试试Array
代码
7.数字时钟
说明数字化的时钟
效果 现在时刻:12:07:54
代码
8.显示停留的时间
说明 显示他人在页面停留的时间,而且可以作出提醒
效果
代码 9.有影子的数字时钟
说明 这个时钟是有影子的,而且还在不停地走着呢
效果
12:09:36
12:09:36
代码
10.打字效果
说明:文字在状态栏上从左往右一个一个地显示,就象你打出的字一样
效果:看看状态栏!Array
代码:
11.文字不停闪烁
说明:一段文字在状态栏上不停跳动显示,可以作为提示信息
效果:看看状态栏!
代码:
12.图象大小自动变化
说明:把一张图片变形扭曲成各种不同的长宽,非常好玩
效果:
代码:
13.漫天飞雪
说明:漫天飞雪
效果:看到了吗?
代码:
14.自由移动的图片(一)
说明:自由移动的图片
效果:看到了吗?Array
代码:
再把<body>改为:
说明:图片在页面内随意飘动,遇到边界还会反弹。
效果: 看到了吗?
代码:
16.
状态栏里的动态欢迎语
说明 浏览器的状态栏里出现一个字接一个字往左跑的欢迎语!
效果 看看状态栏:)
代码
17.背景色变换按钮
:
18.去掉超链接的下划线
说明有时候看着那超链接的下划线挺讨厌的,把下面这段代码放到网页源代码
<head>与</head>之间,下划线就无影无踪啦!
注意,网页的<body>标签里不能再有link之类的属性,否则本效果会失效!
效果试试就知道啦!
代码
19.给页面加保护
说明如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话,不妨在HTML里加入下面这段代码。
当在网页里按下鼠标右键时,出现的不是想要的快
捷菜单而是一个警告窗口。
“\n\n”表示换行。
效果点点右键试试!
代码
20.自动关闭窗口
说明在网页源代码中加入下面的代码,则该窗口将在20秒钟之后自动关闭!这与跳出式小窗口配合使用是再好不过啦!代码中“i=20”表示关闭的延迟时间为20
秒,可任意修改。
效果注意看跳出的那个窗口……它将在10秒钟之后自动关闭!Array
代码。