网页特效代码大全
网页特效CSS大全
HTML网页特效CSS大全css属性代码大全一CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性:list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式:background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性:a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式:链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表:border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369 /*设置上框线top颜色*/border-top-width :1px /*设置上框线top宽度*/border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式:margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性:字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width}宽度值:thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值:分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha |none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}字体属性:(font)大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位:PX、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性:(background)色彩{background-color: #FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fixed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/区块属性:(Block) /*这个属性第一次认识,要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用,多实践下*/对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{text-indent: 数值px;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性:(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性:(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border:width style color; /*简写*/列表属性:(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)。
网页设计特效代码大全
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特效代码大全(完整全收录)1) 贴图:<img src="图片地址">2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a>3)在新窗口打开连接:<a href="相关地址" target="_blank">写上要写的字</a>消除连接的下划线在新窗口打开连接:<a href="相关地址" style="text-decoration:none"target="_blank">写上你想写的字</a>4)移动字体(走马灯):<marquee>写上你想写的字</marquee>5)字体加粗:<b>写上你想写的字</b>6)字体斜体:<i>写上你想写的字</i>7)字体下划线: <u>写上你想写的字</u>8)字体删除线: <s>写上你想写的字</s>9)字体加大: <big>写上你想写的字</big>10)字体控制大小:<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大,h5最小)11)更改字体颜色:<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间12)消除连接的下划线:<a href="相关地址" style="text-decoration:none">写上你想写的字</a>13)贴音乐:<embed src=音乐地址width=300 height=45 type=audio/mpeg autostart="false">14)贴flash: <embed src="flash地址" width="宽度" height="高度">15)贴影视文件:<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>16)换行:<br>17)段落:<p>段落</p>18)原始文字样式:<pre>正文</pre>19)换帖子背景:<body background="背景图片地址">20)固定帖子背景不随滚动条滚动:<body background="背景图片地址" bodybgproperties=fixed>21)定制帖子背景颜色:<body bgcolor="#value">(value值见10)22)帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>23)贴网页:<iframe src="相关地址" width="宽度" height="高度"></iframe>HTML特效代码1。
常用的网页特效代码
常用的网页特效代码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:3612:09:36代码10.打字效果说明:文字在状态栏上从左往右一个一个地显示,就象你打出的字一样效果:看看状态栏!Array代码:11.文字不停闪烁说明:一段文字在状态栏上不停跳动显示,可以作为提示信息效果:看看状态栏!代码:12.图象大小自动变化说明:把一张图片变形扭曲成各种不同的长宽,非常好玩效果:代码:13.漫天飞雪说明:漫天飞雪效果:看到了吗?代码:14.自由移动的图片(一)说明:自由移动的图片效果:看到了吗?Array代码:再把<body>改为:说明:图片在页面内随意飘动,遇到边界还会反弹。
效果: 看到了吗?代码:16.状态栏里的动态欢迎语说明 浏览器的状态栏里出现一个字接一个字往左跑的欢迎语!效果 看看状态栏:)代码17.背景色变换按钮:18.去掉超链接的下划线说明有时候看着那超链接的下划线挺讨厌的,把下面这段代码放到网页源代码<head>与</head>之间,下划线就无影无踪啦!注意,网页的<body>标签里不能再有link之类的属性,否则本效果会失效!效果试试就知道啦!代码19.给页面加保护说明如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话,不妨在HTML里加入下面这段代码。
常用网站特效代码
我们要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页<head></head>之间加上如下代码:
<link REL = "Shortcut Icon" href="/blog/index.ico">
5.让网页随意后退
11.表格的半透明显示效果
在<head></head>之间加上如下代码:
<style>
.alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度
</style>
在<body></body>之间加上如下代码:
<table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" >
self.moveBy (0,-800);
for(i = x; i > 0; i--)
{
self.moveBy(0,3);
}
for(j = 200; j > 0; j--){ //如果你认为窗口抖动厉害,就200换成个位数
self.moveBy(0,j);
<a href="java:history.go(-X)">X</a> //把X换成你想要后退在页数
//把“-”变成“+”就为前进
6.鼠标指向时弹出信息框
在<body></body>之间加上如下代码:
<a href over="alert('弹出信息!')">显示的链接文字</a>
网页制作特效源码集锦
单行文字滚动新闻效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title> </title><style>a{display:block;font-size:15px;line-height:18px;text-decoration:none;color:#333;font-family:Aria l;font-size:12px;}.shell{background:url(/images/common/xml.gif) no-repeat 4px 5px;border:1px solid #aaa;width:400px;padding:3px 2px 2px 20px;}#div1{height:18px;overflow:hidden;}</style></head><body><div class="shell"><div id="div1"><a href="javascript:">请教高手帮我看下这段代码FLASH显示不了</a><a href="javascript:">请教在UTF-8编辑下的符号显示问题</a><a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a><a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来</a><a href="javascript:">javascript读取Json数据并分页显示,支持键盘和滚轮翻页</a><a href="javascript:">腾讯网奇怪的PNG文件,拜师以求解惑</a><a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件2009-7-18 </a></div><div></body><script>var box=document.getElementById("div1"),can=true;box.innerHTML+=box.innerHTML;box.onmouseover=function(){can=false};box.onmouseout=function(){can=true};new function (){var stop=box.scrollTop%18==0&&!can;if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++; setTimeout(arguments.callee,box.scrollTop%18?10:1500);};</script></html>打字机式字符输出脚本说明:第一步:把如下代码加入<!-- Mirrored from /sucai/js/ye2.htm by HTTrack Website Copier/3.x [XR&CO'2002], Tue, 02 Nov 2004 10:18:07 GMT --><head>区域中<SCRIPT language="JavaScript"><!--var layers = yers, style = document.all, both = layers || style, idme=908601;if (layers) { layerRef = 'yers'; styleRef = ''; } if (style) { layerRef = 'document.all'; styleRef = '.style'; }function writeOnText(obj, str) {if (layers) with (document[obj]) { document.open(); document.write(str); document.close(); }if (style) eval(obj+'.innerHTML= str');}//以下是输出的内容,自己修改即可。
网页过度特效代码大全
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)">这个是页面被载入和调出时的一些特效。
【免费下载】常用的网页特效代码
var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-200 }
} function www_helpor_net___Mousetrace(evnt) { if (www_helpor_net__ns4) {if (evnt.pageX) {www_helpor_net___ml=evnt.pageX; w else{ www_helpor_net___ml=(event.clientX + document.body. www_helpor_net___mt=(event.clientY + document.body. } if (www_helpor_net___tracescript)eval(www_helpor_ne } </script>
6.接触链接自动打开窗口
说明 鼠标放到链接上,就立刻弹出警告框 效果 试试
<a href="" onMouseOver="alert('你好!\n\n本站域名:ht
代码
7.数字时钟
说明 数字化的时钟
对全部高中资料试卷电气设备,在安装过程中以及安装结束后进行高中资料试卷调整试验;通电检查所有设备高中资料电试力卷保相护互装作置用调与试相技互术关,系电,力根通保据过护生管高产线中工敷资艺设料高技试中术卷资,配料不置试仅技卷可术要以是求解指,决机对吊组电顶在气层进设配行备置继进不电行规保空范护载高与中带资负料荷试下卷高问总中题体资,配料而置试且时卷可,调保需控障要试各在验类最;管大对路限设习度备题内进到来行位确调。保整在机使管组其路高在敷中正设资常过料工程试况中卷下,安与要全过加,度强并工看且作护尽下关可都于能可管地以路缩正高小常中故工资障作料高;试中对卷资于连料继接试电管卷保口破护处坏进理范行高围整中,核资或对料者定试对值卷某,弯些审扁异核度常与固高校定中对盒资图位料纸置试,.卷保编工护写况层复进防杂行腐设自跨备动接与处地装理线置,弯高尤曲中其半资要径料避标试免高卷错等调误,试高要方中求案资技,料术编试交写5、卷底重电保。要气护管设设装线备备置敷4高、调动设中电试作技资气高,术料课中并3中试、件资且包卷管中料拒含试路调试绝线验敷试卷动槽方设技作、案技术,管以术来架及避等系免多统不项启必方动要式方高,案中为;资解对料决整试高套卷中启突语动然文过停电程机气中。课高因件中此中资,管料电壁试力薄卷高、电中接气资口设料不备试严进卷等行保问调护题试装,工置合作调理并试利且技用进术管行,线过要敷关求设运电技行力术高保。中护线资装缆料置敷试做设卷到原技准则术确:指灵在导活分。。线对对盒于于处调差,试动当过保不程护同中装电高置压中高回资中路料资交试料叉卷试时技卷,术调应问试采题技用,术金作是属为指隔调发板试电进人机行员一隔,变开需压处要器理在组;事在同前发一掌生线握内槽图部内 纸故,资障强料时电、,回设需路备要须制进同造行时厂外切家部断出电习具源题高高电中中源资资,料料线试试缆卷卷敷试切设验除完报从毕告而,与采要相用进关高行技中检术资查资料和料试检,卷测并主处且要理了保。解护现装场置设。备高中资料试卷布置情况与有关高中资料试卷电气系统接线等情况,然后根据规范与规程规定,制定设备调试高中资料试卷方案。
网页制作特效代码大全
</SCRIPT>
仿软件浮动按钮
<html>
<style type="text/css">
<!--
.text { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 12pt; color: #ff0000 }
<html>
<meta http-equiv="refresh" content="3;url=../index.htm">
</html>
多个选择的搜索引擎
<form action="/cgi-bin/gosearch/search.cgi" name="searchform">
function bookmarkit(){window.external.addFavorite('/','水晶情缘')}//改为你自己的网址和站名
if (document.all)document.write('<a href="" onClick="bookmarkit()">将本站加入收藏夹</a>')
<tr><td width="125">
<b>软件系数调查:<br>
</b> <br>
<input type=checkbox name=list value="1">软件的界面<br>
一些常用的网页特效
阴影<tablestyle="filter:progid:DXImageTransform.microsoft.shadow(color=#666666,direction=135,strength =3)"><tr><td>这个表格有shadow 阴影。
</td></tr></table><br><br><tablestyle="background:#eeeeee;filter:progid:DXImageTransform.microsoft.dropshadow(color=#9999 99,offX=2,offY=5)"><tr><td>这个表格有drop shadow阴影。
</td></tr></table>图片自动切换<title>javascript图片轮换</title><style type="text/css">#album{position:relative;width:400px;height:300px;border:10px solid #EFEFDA;overflow:hidden;}#album dt {margin:0;padding:0;width:400px;height:300px;overflow:hidden;}#album img {border:2px solid #000;}#album dd {position:absolute;right:0px;bottom:10px;}#album a {display:block;float:left;margin-right:10px;width:15px;height:15px;line-height:15px;text-align:center;text-decoration:none;color:#808080;background:transparent url(/jscss/demoimg/200910/o_button.gif) no-repeat -15px 0; }#album a:hover ,#album a.hover{color:#F8F8F8;background-position:0 0;}</style><dl id="album"><dt><img id="index1" alt=余秋的黄昏" src="/jscss/demoimg/wall3.jpg" /><img id="index2" alt="美丽欧洲" src="/jscss/demoimg/wall4.jpg" /><img id="index3" alt="巨石阵的神秘" src="/jscss/demoimg/wall5.jpg" /></dt><dd><a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a></dd></dl><script type="text/javascript">function imageRotater(id){var cases = "",album = document.getElementById(id),images = album.getElementsByTagName("img"),links = album.getElementsByTagName("a"),dt = album.getElementsByTagName("dt")[0],length = images.length,aIndex = 1,aBefore = length;for(var i=0;i< length;i++){cases += images[i].id + ':"'+images[i].getAttribute("src")+'",'}images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片位置错误var tip = document.createElement("dd");tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";album.insertBefore(tip,dt.nextSibling);if(!+"\v1"){tip.style.color = "#369";tip.style.filter = "alpha(opacity=67)"}else{tip.style.cssText += "background: rgba(164, 173, 183, .65);"}cases = eval("({"+cases.replace(/,$/,"")+"})");for(var i=0;i<length;i++){links[i].onclick = function(e){e =e || window.event;var index = this.toString().split("#")[1];aIndex = index.charAt(index.length-1);//☆☆☆☆images[0].src = cases[index];tip.innerHTML = images[aIndex -1].getAttribute("alt");!+"\v1" ?(e.returnV alue = false) :(e.preventDefault());}}var prefix = images[0].id.substr(0,images[0].id.length -1);(function(){setTimeout(function(){if(aIndex > length){aIndex = 1;}images[0].src = cases[prefix+aIndex];tip.innerHTML = images[aIndex -1].getAttribute("alt");tip.style.bottom = "-40px";links[aBefore-1].className = "";links[aIndex-1].className = "hover";aBefore = aIndex;aIndex++;move(tip);setTimeout(arguments.callee,1500)},1500)})()var move = function(el){var begin = parseFloat(el.style.bottom),speed = 1;el.bottom = begin;(function(){setTimeout(function(){el.style.bottom = el.bottom + speed + "px";el.bottom += speed;speed *= 1.5;//下一次移动的距离if(el.bottom >= 0){el.style.bottom = "0px";}else{setTimeout(arguments.callee,23);}},25)})()}}window.onload = function(){try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};imageRotater("album");}</script>滑动,鼠标放上去停止<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>图片滚动</title></head><body><style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;}#demo img {border: 3px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: left;}--></style><div id="demo"><div id="indemo"><div id="demo1"><a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a> <a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a> <a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a> <a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a> <a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a> <a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a> </div><div id="demo2"></div></div></div><script><!--var speed=10;var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script></body></html>JS引用方法<SCRIPT language=javascriptsrc="中国法学期刊网_files/language.js"></SCRIPT>方法一:将你需要的CSS文件内容复制下,在你的网页的<head>和</head>之间加两个标签:<style></style>,然后在这两个标签中间粘贴就行,如果是JS,则新建<script>和</script>,在其中粘贴JS文件的内容.方法二:在你网页的<head>和</head>分别用标签引用两种文件,引用CSS文件:<link rel="stylesheet" href="在此输入你要引用的CSS文件路径和名称">引用JS文件:<script src="你要引用的JS文件路径和名称" type="text/javascript"></script>。
网页特效代码大全[1]1
网页特效代码大全(一)2008-06-28 21:42特别推荐带注释的表格菜单右键单击的菜单2可拖动的菜单1文件夹式的菜单很酷的导航菜单定制窗口全攻略多变的图像导航图片滚动公告栏自由移动和切换的图片鼠标控制的移动图像下雨了非常漂亮的图像效果跑马灯文字1 跟随鼠标滚动文字鼠标控制窗口滚动精制的鼠标时钟非常棒的打开小窗口特效非常棒的无边窗口特效状态栏的完整时间用状态栏记录用户信息状态栏的停留时间信息标题栏的时间显示显示中文日期与时间挂历的时间显示实时走动的时钟禁止用“另存为”保存页面随鼠标变色的文字简单的文字加密最简单的链接说明代码图片集旋转显示?图片向上翻滚?图片渐变效果?图片模糊变化?无用的右键单击跟随鼠标的文字加入收藏设为首页有立体感的文字三种不同的表格样式加密源代码脚本右键单击的菜单放大镜动感的图片另类的图像导航自动变色的链接文字滚动字幕很酷的广告牌鼠标控制的滚动字幕文本框的操作功能前进和后退按钮(图颜色变化的按钮图片特效晃动的图形动感的图片点击消失的图片另类的图像导航旋转的图片会弹跳的球可以拖动的图片可以拖动的多张图片礼花背景满天漂落的星随机变换的图像图形淡出淡隐围绕鼠标旋转的图片自动变换的图像及链接图片渐渐出现脚本自由移动和切换的图片点击放大图片多变的图像导航总在指定位置的图片可点击放大缩小的图片可以无限放大的图像非常漂亮的图像效果鼠标控制的移动图像下雪了下雨了鼠标点亮图片水韵效果不停闪烁的图片下拉框选择显示图片新窗口的下拉框选择器展开隐藏图片广告图片轮换抖动的图片水中倒影图片全景旋转的技巧图片自动切换放大镜定时闪烁的图片鼠标感应放大背景色选择器流动背景渐隐渐现的半透明图像半透明图片的显示鼠标移动图像<new>图片集旋转显示<new>图片边框的变幻<new>禁止图片下载的脚本图片滚动公告栏图片响应鼠标变换<图形显示特效<new>图片向上翻滚<new>图片左右飞舞<new>图片扫描效果<new>图片渐变效果<new>图片转换效果<new>带彩色边框的图片<页面外显示图片<ne图片模糊变化<new>图像浏览简单的图像变换特殊的图像显示图片虚幻显示自由移动的多幅图像图像控制的图像。
网页字体特效代码大全
1、走马灯效果代码[下面4种滚动方法大同小异,具体效果自己去尝试,只须修改相应的地方(紫色字体的地方),高级设置请修改其他数值,暂不介绍]文字滚动代码(从右向左滚动)<marquee width="157" height="21">要滚动的文字</marquee>文字滚动代码(从下往上滚动)<marquee bgcolor=#ffffff class=p4 direction=up height=60 scrollamount=1 scrolldelay=50 style="COLOR: #000000; class: " width=157 text-align: left? border="0" >要滚动的文字</marquee>图片滚动代码(从右向左滚动)<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src=" http://要滚动的图片地址1"><img border="0" src=" http://要滚动的图片地址2"></marquee>图片滚动代码(从下往上滚动)<marquee onMouse Over="this.stop()"onMouse Out="this.start()"align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src=" http://要滚动的图片地址1"><img border="0" src=" http://要滚动的图片地址2"></marquee>2、评价代码(我这里提供的是框架,具体内容可以自己修改)<form><div align="center"><center><p>本空间很好: <input TYPE="radio"NAME="radio"value="谢谢您的鼓励和支持!" onClick="alert(value)">本空间一般: <input TYPE="radio" NAME="radio" value="我会不断努力的!"onClick="alert(value)"> 本空间太差: <input TYPE="radio"NAME="radio"value="具体的意见请QQ联系我,谢谢!" onClick="alert(value)"></p></center></div></form>3、文字特效代码(使用html代码做文字特效的方法很多,暂只介绍几种,效果自己去测试) 标语代码<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>要设置的文字</B></FONT></CENTER>发光字体代码[快速查看颜色代码都请点击这里]</textarea><table style="FILTER: glow(color=发光背景颜色代码,direction=2)"><font color=发光字体颜色代码size=2>要设置的文字</font></table>小技巧:在设置状字体的时候,如果把字体前加上@,会产生文字平躺的效果.<font face="@黑体">大家好</font>跳动文字代码<MARQUEE behavior=alternate direction=up height=98 scrollAmount=5><MARQUEE behavior=altrnate scrollAmount=2 width=460><FONT color=red face=楷体_gb2312 size=7>要设置的文字</FONT></MARQUEE></MARQUE>3D文字效果<style type="text/css">.3dfont { FILTER: glow(color=ffffff,strength=0) shadow(color=cccccc,direction:135); POSITION: relative; WIDTH: 100% }</style><table border="0" width="100%"><tr><td width="100%" class="3dfont"><font color="#008040">要设置的文字</font>高斯模糊字体<span style="position:relative; width:200; height:50; filter:glow(color=#9933cc,strength=4); margin-left:4px"><p>要设置的文字</span>文字左右反转<table style="Filter:FlipH">要设置的文字</table>文字上下反转<table style="Filter:FlipV">要设置的文字</table>Blur风吹效果<table style="Filter:Blur(add=1,direction=45,strength=5)要设置的文字</table>add:是否要在已经使用Blur滤镜上的html对象上显示原来的模糊方向,0表示不显示direction:模糊方向strength:模糊半径大小,单位像素,默认为5,取整Glow滤镜(光晕效果)<table style="Filter:Glow(color=#FF0000,strength=5,direction=2)">要设置的文字</table>color:光晕颜色,需用代码形式strength:光晕强度,选择型参数,默认为5direction:光晕方向,选择型参数Shadow滤镜(阴影效果)<table style="Filter:Shadow(color=#ff0000,direction=45)">要设置的文字</table>color:阴影颜色,需用代码形式strength:阴影强度,选择型参数,默认为5direction:阴影方向,选择型参数DropShadow(投影效果)<table style="filter:dropshadow(color:#6600FF,offx=1,offy=1)">要设置的文字</table>color:设置投影颜色offx:在横坐标上的偏移,单位是像素offy:在纵坐标上的偏移,单位是像素positive:设置是否从对象的非透明像素建立阴影4、其它特效代码(这里的代码没什么实际作用,主要是辅助效果)鼠标放在图片上会显示说明字的代码<img src="http://你的图片地址"width=620 height=138 border=0 title="说明文字" align=absmiddle>自定义鼠标图片<img src="http://你的图片地址" onload="document.body.style.cursor=\’url(\\\’http://您的鼠标图片的地址,可以是.ani或.cur文件\\\’)\’">主页模块虚线代码<style type="text/css">.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}</style><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="tb"><center>要设置的文字</td></tr></table>禁止图片下载<A HREF="javascript:void(0)"onMouse over="alert(\’对不起,图片不能随便下载!\’)"><IMG SRC="http://你的图片地址" Align="center" Border="0" width="99" height="50"></A>5、更多高级功能QQ在线状态代码(可在不加好友的情况下临时聊天) [大家只需将下面的QQ号和QQ名称换成自己的即可]<a target=blank href=/msgrd?V=1&Uin=QQ号&Site=QQ名称&Menu=yes><img border="0"SRC=/pa?p=1:894132:13 width="80"height="20"alt="点击这里给我发消息"></a>网络电视代码(此方法在网速一般的情况下效果不佳,建议不使用)</textarea><EMBED SRC= http://你的网络电视地址width=355 height=250 wid</textarea>。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网页特效代码大全(一)
2008-06-28 21:42
特别推荐
带注释的表格菜单
右键单击的菜单2
可拖动的菜单1
文件夹式的菜单
很酷的导航菜单
定制窗口全攻略
多变的图像导航
图片滚动公告栏
自由移动和切换的图片鼠标控制的移动图像下雨了
非常漂亮的图像效果跑马灯文字1 跟随鼠标滚动文字
鼠标控制窗口滚动
精制的鼠标时钟
非常棒的打开小窗口特
效
非常棒的无边窗口特效
状态栏的完整时间
用状态栏记录用户信息
状态栏的停留时间信息
标题栏的时间显示
显示中文日期与时间
挂历的时间显示
实时走动的时钟
禁止用“另存为”保存
页面
随鼠标变色的文字
简单的文字加密
最简单的链接说明代码
图片集旋转显示?
图片向上翻滚?
图片渐变效果?
图片模糊变化?
无用的右键单击
跟随鼠标的文字
加入收藏
设为首页
有立体感的文字
三种
加密
右键
放大
动感
另类
自动
滚动
很酷
鼠标
文本
前进
颜色
图片特效
晃动的图形
动感的图片
点击消失的图片
另类的图像导航
旋转的图片
会弹跳的球
可以拖动的图片
可以拖动的多张图片礼花背景
满天漂落的星
随机变换的图像
图形淡出淡隐
围绕鼠标旋转的图片自动变换的图像及链接图片渐渐出现脚本
自由移动和切换的图片点击放大图片
多变的图像导航
总在指定位置的图片
可点击放大缩小的图片
可以无限放大的图像
非常漂亮的图像效果
鼠标控制的移动图像
下雪了
下雨了
鼠标点亮图片
水韵效果
不停闪烁的图片
下拉框选择显示图片
新窗口的下拉框选择器
展开隐藏图片
广告图片轮换
抖动的图片
水中倒影
图片全景旋转的技巧
图片自动切换
放大镜
定时闪烁的图片
鼠标感应放大
背景色选择器
流动背景
渐隐渐现的半透明图像
半透明图片的显示
鼠标移动图像<new>
图片集旋转显示<new>
图片边框的变幻<new>
禁止图片下载的脚本
图片滚动公告栏
图片
图形
图片
图片
图片
图片
图片
带彩
页面
图片
图像
简单
特殊
图片
自由
图像。