【IT专家】网页特效集锦

格式：docx
大小：92.42 KB
文档页数：32

下载文档原格式

/ 32

网站特效_精品文档

网站特效随着互联网技术的快速发展和网站设计的不断创新，越来越多的网站开始采用特效来提升用户体验和视觉效果。

网站特效是指通过使用HTML、CSS、JavaScript等技术，为网站添加动态效果、交互效果和视觉效果，以增强用户对网站的吸引力和互动性。

一、动态效果动态效果是指网页中的元素具有动画效果或运动效果。

最常见的动态效果包括渐变过渡、淡入淡出、旋转、缩放等。

这些效果可以通过CSS3的transition和transform属性来实现，使网页看起来更加生动和有趣。

例如，当鼠标悬停在一个按钮上时，可以通过渐变过渡效果让按钮的颜色由浅变深，给用户一种交互的视觉反馈。

二、交互效果交互效果是指网页中的元素具有与用户的交互行为。

通过点击、滑动、拖拽等操作，网站可以展示出不同的效果和结果。

交互效果可以通过JavaScript来实现，通过监听用户的事件，如点击事件或鼠标移动事件，来触发相应的响应动作。

例如，在一个图片展示网站中，用户可以通过点击某个图片进行放大或缩小操作，以便更好地观看细节。

三、视觉效果视觉效果是指以视觉上的美感为目的，通过改变元素的外观和样式来实现。

最常见的视觉效果包括阴影效果、模糊效果、过渡效果等。

这些效果可以通过CSS的box-shadow、filter等属性来实现，使网站的界面更加丰富多样。

例如，在一个购物网站中，当用户将鼠标移到商品图片上时，可以通过添加阴影效果来突出该商品，使用户更加关注。

四、性能优化在使用网站特效的同时，也要注意对网站性能的影响。

过多或过重的特效会导致网页加载速度变慢，甚至出现卡顿现象，影响用户体验。

因此，在设计网站特效时，需要注意以下几点：1. 合理选择特效：根据网站的定位和用户群体，选择适合的特效。

不同的特效对网页性能的影响不同，需要具体情况具体分析。

2. 控制特效数量：避免在一个页面上过多地使用特效，以免影响页面的性能。

特效的使用应该是为了提升用户体验，而不是为了增加特效的数量。

网页常用11种特效

＜/head＞
11．表格的半透明显示效果
在＜head＞＜/head＞之间加上如下代码：
＜style＞
.alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度
＜/style＞
在＜body＞＜/body＞之间加上如下代码：
image [1] = ''tu1.gif''
image [2] = ''tu2.gif''
image [3] = ''tu3.gif''
image [4] = ''tu4.gif''
number = Math.floor(Math.random() * image.length);
function move(x) {
if(self.moveBy){
self.moveBy (0,-800);
for(i = x; i ＞ 0; i--)
{
self.moveBy(0,3);
}
for(j = 200; j ＞ 0; j--){ //如果你认为窗口抖动厉害，就200换成个位数
if (document.all)
document.body.onmousedown=new Function("if (event.button==2||event.button==3)
window.external.addFavorite(''您的网址'',''您的网站名称)")
if (( time ＞=14) && (time ＜ 18))

网页特效设计

ｍｅｎｕ０１ａ．ｆｇ．重要的是要指定好源图像和翻滚图像。
网ｗｗｃ。ｅｏ，ＣＩ］ｅ０２／９址：ｗ．ｓｐｒｍｃＰＳ（ｐｒ２０．ｐｈｐ．ｎｃ￣］１５０
维普资讯
Ｃｖｒｔｒ家园建造全攻略ｏｅｏｙ网上Ｓ
下面，我们要制做一个简单的翻
滚图，当网页打开时，图片如下图。
一
—
Ｌ
ｃ— ｄ
０＿
・・
ｒ
Ｉ￣— Ｉ — ＂ｋ
—
…
Ｇｏ…
…
Ｌ
“
● Ｒａｂ～
ｉ］：
’ ・
▲鼠标移动到按钮上后，图片被设好的图原片替换。
Ｉａｇｍｅｓ
，
然后在弹出的窗１分别指３中
定源图像（ｎＯ１ｂｇｆ，翻滚图像ｍｅｕ．ｉ）ａ（ｎＯｂｇｆ，最后点按 ”Ｏ。ｍｅｕ１．ｉ）Ｋ”
标点击翻滚图时跳转到哪个链接页面，
可以是绝对地址，也可以是相对地址。
墨囝■墨墨墨曩—●●—■——■—————■■
・＿
。＿ …
简单的，它的效果却非常明显，但因此常常可以在各大网站见到这种效果。
所谓翻滚图，就是当鼠标移到一幅图像上时，该图像变成另外一幅图像，鼠标离开图像时，片又还原成当图

【网页特效代码-页面特效】网页中弹出小窗口,页面背景逐渐变为半透明

【网页特效代码-页面特效】网页中弹出小窗口,页面背景逐渐变为半透明.txt我是天使，回不去天堂是因为体重的原因。

别人装处，我只好装经验丰富。

泡妞就像挂QQ，每天哄她2个小时，很快就可以太阳了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>网页中弹出小窗口,页面背景逐渐变为半透明-Ｑ291911320</title><style>html,body{font-size:12px;margin:0px;height:100%;}.mesWindow{border:#666 1px solid;background:#fff;}.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12p x;}.mesWindowContent{margin:4px;font-size:12px;}.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decorat ion:underline;background:#fff}</style><script>var isIe=(document.all)?true:false;//设置select的可见状态function setSelectState(state){var objl=document.getElementsByTagName('select');for(var i=0;i<objl.length;i++){objl[i].style.visibility=state;}}function mousePosition(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}//弹出方法function showMessageBox(wTitle,content,pos,wWidth){closeWindow();var bWidth=parseInt(document.documentElement.scrollWidth);var bHeight=parseInt(document.documentElement.scrollHeight);if(isIe){setSelectState('hidden');}var back=document.createElement("div");back.id="back";varstyleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px; height:"+bHeight+"px;";styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";back.style.cssText=styleStr;document.body.appendChild(back);showBackground(back,50);var mesW=document.createElement("div");mesW.id="mesWindow";mesW.className="mesWindow";mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>"; styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px ;position:absolute;width:"+wWidth+"px;";mesW.style.cssText=styleStr;document.body.appendChild(mesW);}//让背景渐渐变暗function showBackground(obj,endInt){if(isIe){obj.filters.alpha.opacity+=1;if(obj.filters.alpha.opacity<endInt){setTimeout(function(){showBackground(obj,endInt)},5);}}else{var al=parseFloat(obj.style.opacity);al+=0.01;obj.style.opacity=al;if(al<(endInt/100)){setTimeout(function(){showBackground(obj,endInt)},5);}}}//关闭窗口function closeWindow(){if(document.getElementById('back')!=null){document.getElementById('back').parentNode.removeChild(document.getElementById(' back'));}if(document.getElementById('mesWindow')!=null){document.getElementById('mesWindow').parentNode.removeChild(document.getElementB yId('mesWindow'));}if(isIe){setSelectState('');}}//测试弹出function testMessageBox(ev){var objPos = mousePosition(ev);messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>"; showMessageBox('窗口标题',messContent,objPos,350);}</script></head><body><div style="padding:20px"><div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div><div style="text-align:left;padding-left:20px;padding-top:10px";><select ID="Select1" NAME="Select1"><option>下拉</option></select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框</div><div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div><div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div></div></body></html>。

网页特效集锦

网页特效集锦典型特效1、收藏本站说明：点击即可把你的网站添加到浏览器的收藏菜单下代码：<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.www.ycrc.co ','盐城人才网')" title="收藏盐城人才网">收藏本站</span>2、设为首页说明：点击即可把你的网站设置为浏览器的起始页代码：<span onclick="varstrHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('htt p://');"style="CURSOR: hand">设为首页</span>3、去掉超链接的下划线说明：有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与< /head>之间，下划线就无影无踪啦！注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！代码：<style TYPE="text/css"></style>4、自动刷新网页说明：在HTML的与之间加入下面这段代码，则在5分钟之后正在浏览的页面将会自动变为target.html这一页。

网页特效集合整理发布word版本

以下特效由爱微网-网页特效代码下载网整理提供一、菜单导航特效1、tab选项卡类的二级导航菜单特效/js_menu/301.html2、商品竖着二级下拉菜单导航js网页特效/js_menu/270.html3、爱微网仿支付宝二级导航菜单JS特效/js_menu/162.html4、一款很漂亮纯css打造的菜单导航/js_menu/144.html5、仿Chinaz首页JS二级菜单导航/js_menu/142.html6、JS特效-二级下拉菜单/js_menu/88.html7、漂亮简洁的纯CSS无JS脚本的下拉二三级导航菜单/js_menu/11.html8、CSS和JS实现自定义网页右键菜单功能很实用/js_menu/57.html9、纯CSS多级半透明菜单最多可支持5级CSS菜单/js_menu/56.html10、一款简洁大方的二级下拉导航菜单JS特效/js_menu/55.html11、JS导航菜单点击展开收缩的下拉菜单特效代码/js_menu/54.html12、点击导航样式还在的具有高亮效果的js导航菜单特效/js_menu/30.html13、用CSS背景定位实现一张图片完成的菜单导航条特效/js_menu/12.html14、CSS+JS脚本的标准树状导航菜单很时候做后台导航菜单/js_menu/13.html15、一款简单的拖影效果的JS菜单导航特效爱微网分享/js_menu/8.html二、TAB选项卡特效1、又一款竖着的tab选项卡js特效/js_tab/308.html2、简单实用tab选项卡js特效有图有真相/js_tab/302.html3、仿蓝色理想TAB选项卡横向下拉菜单特效/js_tab/204.html4、仿百度风云榜tab选项卡切换多次调用js特效/js_tab/194.html5、简洁实用JavaScript Tab滑动门选项卡特效/js_tab/189.html6、手风琴tab选项卡内容横向展示网页特效代码/js_tab/182.html7、标准js tab选项卡切换特效效果/js_tab/170.html8、JS纵向竖着tab选项卡特效/js_tab/167.html9、一款灰色庄重tab选项卡适合企业建站用/js_tab/157.html10、仿雅虎首页的tab选项卡多重切换效果/js_tab/156.html11、今日72小时一周排行榜tab选项卡-js选项卡/js_tab/155.html12、简单未美化实用js tab选项卡JS特效/js_tab/154.html13、爱微网分享二款鼠标点击和移动tab选项卡特效/js_tab/153.html14、简洁易用js选项卡tab选项卡js代码很少/js_tab/151.html15、js实现Tab选项卡自动切换-js选项卡/js_tab/146.html16、Jquery的代码简洁的滑动门(tab选项卡)可以自己修改值得珍藏！/js_tab/26.html17、分享两款我比较喜欢的网页TAB选项卡js特效简单易用/js_tab/10.html三、文本特效1、javascript文字滚动消息广告代码/js_text/269.html2、javascript实现文本幻灯片效果特效/js_text/234.html3、Javascript实现内容划词标记划词搜索功能/js_text/233.html4、javascript实现前端文章内容分页特效/js_text/232.html5、JS正则表达式：只允许写入数字的输入框自动匹配数字/js_text/85.html6、一款兼容性好的文字上下无缝滚动文本特效/js_text/83.html7、单行滚动多行滚动带按钮控制滚动JQUERY 图片文字滚动特效8、JS/JAVASCRIPT实现链接文字翻滚特效/JS_TEXT/59.HTML9、定制的Title文字说明效果/js_text/58.html10、js文本和图片无缝滚动特效代码下载/js_text/29.html11、适合做小说站用根据需要自由更换文字背景颜色JS特效代码/js_text/15.html四、图片幻灯片特效1、仿百度有啊通栏js幻灯片切换特效美不胜收/js_pic/191.html2、js面向对象技术仿淘宝首页js幻灯片特效/js_pic/190.html3、jQuery制作CSS左右自动切换的焦点图JS特效/js_pic/187.htmlalt=jQuery制作CSS左右自动切换的焦点图JS特效v:shapes="_x0000_i1069">4、纯js+css打造的带标题描述幻灯片特效有利SEO –爱微网首页幻灯片样式/js_pic/185.html5、仿QQ右下角视频抖动渐隐效果-js特效/js_pic/184.html6、JS特效-图片向下无缝滚动代码/js_pic/126.html 7、JS特效-图片向右无缝滚动代码/js_pic/129.html 8、JS特效-图片向上无缝滚动代码/js_pic/127.html 9、JS特效-图片向左无缝滚动代码/js_pic/128.html 10、JS特效--图片翻书效果翻页特效/js_pic/130.html11、图片无间隙左右滚动JS特效/js_pic/121.html五、弹出层弹窗特效1、js鼠标点击展开收起特效(带缓动效果) /js_window/304.html2、一个感应鼠标自动伸展的表格js特效/js_window/203.html3、javascript实现两个Select互换数据js特效/js_window/200.html4、css代码实现表格外边阴影/js_window/199.html5、javascript控制css样式鼠标移入/移出改变图片透明度/js_window/196.html6、js弹出层网页居中效果特效/js_window/195.html7、js特效-div层可以拖动也可以关闭/js_window/113.html8、JS CSS弹出窗口网页居中显示关闭特效/js_window/110.html六、表单特效仿优酷首页搜索框样式-js表单特效/js_form/180.html2、js实现input具有下拉框提示功能特效/js_form/178.html3、css搜索框美化表单特效/js_form/118.html4、JS CSS表单美化样式显示效果/js_form/114.html5、js特效-选择option下拉框自动绑定图片/js_form/95.html6、网页特效--纯CSS打造的按钮特效/js_form/106.html7、js实现点击按钮展开关闭切换-js特效/js_form/98.html8、javascript编写的js日历代码简洁适合新手研究/js_form/53.html9、Jquery动态自动添加上传域实现表单单文件或多文件上传功能/js_form/28.html10、Jquery+Ajax翻页效果代码实现百度分页效果/js_form/27.html七、常用广告代码特效1、js书角广告js撕页广告js翻页广告-网页特效代码/js_ad/271.html2、仿网易163顶部大幅js下拉收缩广告js特效/js_ad/268.html3、js漂浮广告代码效果不错的js广告代码/js_ad/267.html4、【div+css】对联广告带关闭广告代码/js_ad/266.html5、腾讯qq右侧浮动在线客服广告代码/js_ad/214.html6、QQ和淘宝在线客服JS特效左侧悬浮随滚动条移动/js_ad/186.html7、右侧跟随页面滚动很漂亮的qq在线客服/js_ad/131.html 8、广告代码-页面右下角弹出提示窗口效果/js_ad/111.html9、可关闭的右下角浮动广告兼容各大浏览器-js特效/js_ad/80.html10、QQ/淘宝在线客服可随滚动条可展开和收起的js特效/js_ad/9.html11、js常用网页漂浮广告代码就像乒乓球一样很有动感/js_ad/14.html12、网站顶部横栏广告提示带关闭功能js特效/js_ad/303.html八、其他网页特效1、javascript如何判断input密码强弱效果/js_texiao/307.html2、js模拟滚动条javascript实现具有滚动条效果/js_texiao/305.html3、javascript实现节日倒计时js日期特效/js_texiao/246.html4、利用JS+div css画直线,折线,曲线,圆形等各种图案特效/js_texiao/230.html5、JS网站返回到顶部缓冲特效/js_texiao/168.html 6、select的option下拉小三角样式修改/js_texiao/171.html7、日期特效-团购倒计时特效代码/js_texiao/150.html 8、纯CSS3打造的横向评分柱状动画效果-js特效/js_texiao/148.html9、电子商城商品属性选择器尺寸颜色价格/js_texiao/147.html10、JS特效--复选框全选、全不选和反选js功能/js_texiao/109.html11、网页特效--漂亮的链接title提示效果代码/js_texiao/107.html。

网页各种特效——链接特效

打字效果的带链接的新闻标题<html><head><title>网页特效|/Js|--- 打字效果的带链接的新闻标题</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">body{font-size:14px;font-weight:bold;}</style></head><body>最新内容：<a id="HotNews" href="" target="_blank"></a><SCRIPT LANGUAGE="JavaScript"></SCRIPT></body></html>鼠标经过时链接文字的特殊显示<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效观止||---鼠标经过时链接文字的特殊显示</title><style>A {FILTER:progid:dximagetransform.microsoft.gradientwipe(duration=1);BEHA VIOR: url(images/xs.htc); CURSOR: hand; HEIGHT: 1px; TEXT-DECORATION: none}A:link {COLOR: #3d3525}A:visited {COLOR: #3d3525}A:hover {COLOR: #ede8e0}A:active {COLOR: #3d3525}</style></head><body bgcolor="#000000"><p><a target="_blank" href="#">网页特效观止-最新最全的网页特效</a></p><p><font color="#FFFFFF">代码中的style中间的代码加到网页里即可</font></p></body></html>能移动的超级连接特效(比较酷)<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>网页特效|/Js|---能移动的超级连接特效(比较酷)</title></head><body><style>.fly {color:336c6c;font-family:arial;font-size:24px;position:absolute; visibility:hidden;z-index:2;}.logo {font-family: times;font-size:48px;color:blue; position:absolute;top:0px;left:70px;visibility:visible;z-index:1;}.desc {text-align: center;font-family:楷体_GB2312;font-size:18px;color: #336c6c;position:absolute;top:220px; left: 140px;width:400px;visibility:hidden;z-index:0;}BODY {background:#c0c0c0;}A {color:lime;}A:HOVER {color : yellow;}</style><script LANGUAGE="JavaScript">ns4 = (yers)? true:falseie4 = (document.all)? true:falsefunction showObject(obj) {if (ns4) obj.visibility = "show"else if (ie4) obj.visibility = "visible"}function hideObject(obj) {if (ns4) obj.visibility = "hide"else if (ie4) obj.visibility = "hidden"}function slideLogo(from, to) {if (from < to) {company.top = (from += 10);setTimeout('slideLogo(' + from + ',' + to + ')', 20);}else initObjects();}function rotateObjects() {for (var i = 0; i < pos.length; i++) {pos[i] += inc; objects[i].visibility = 'visible';objects[i].left = (r * Math.cos(pos[i])) + xoff}rotateTimer = setTimeout("rotateObjects()", 50);}function initObjects() {objects = new Array(fly1, fly2, fly3, fly4);pos = new Array();pos[0] = 0;for (var i = 1; i < objects.length; i++) {pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length)); }rotateObjects();}/* Variables for rotating objects */var objects;var pos;var r = 160; // radiusvar xoff = 280; // x offsetvar yoff = 170; // y offsetvar pi = Math.PI; // get pivar inc = pi / 180; // degrees per rotation cyclevar objects; // objects to be rotatedvar pos; // position for objects</script><body BGCOLOR="#c0c0c0" link="green" TEXT="black"><div ID="fly1" CLASS="fly"><a HREF="#" onMouseOver="showObject(desc1)"onMouseOut="hideObject(desc1)"><p>Item 1</a><br></p></div><div ID="fly2" CLASS="fly"><a HREF="#" onMouseOver="showObject(desc2)"onMouseOut="hideObject(desc2)"><p>Item 2</a><br></p></div><div ID="fly3" CLASS="fly"><a HREF="#"onMouseOver="showObject(desc3)"onMouseOut="hideObject(desc3)"><p>Item 3</a><br></p></div><div ID="fly4" CLASS="fly"><a HREF="#" onMouseOver="showObject(desc4)"onMouseOut="hideObject(desc4)"><p>Item 4</a><br></p></div><div ID="company" CLASS="logo"><p><small>WELCOME TO DREAM WORKROOM</small></p></div><div ID="desc1" CLASS="desc"><p>Item 1的内容</p></div><div ID="desc2" CLASS="desc"><p>Item 2的内容</p></div><div ID="desc3" CLASS="desc"><p>Item 3的内容</p></div><div ID="desc4" CLASS="desc"><p>Item 4的内容</p></div><script LANGUAGE="JavaScript">/* Simple version detection */var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >=4);/* They can be used in placeof hidden and visible because on occasion Navigatorhas problems with the two */var HIDDEN = (isNS) ? 'hide' : 'hidden';var VISIBLE = (isNS) ? 'show' : 'visible';/* Create shortcut variables for different absolutely positioned elements */var fly1 = (isNS) ? document.fly1 : document.all.fly1.style;var fly2 = (isNS) ? document.fly2 : document.all.fly2.style;var fly3 = (isNS) ? document.fly3 : document.all.fly3.style;var fly4 = (isNS) ? document.fly4 : document.all.fly4.style;var company = (isNS) ? pany : pany.style;var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;/* Begin the sliding of the company logo */slideLogo(0, 140);</script></body></html>。

网页特效：图片随机显示技巧

网页特效：图片随机显示技巧图片随机显示是一个应用非常广泛的技巧。

比如随机banner的显示，当你进入一个网站时它的banner总是不同的，或者总有内容不同的提示（tips)，大家在网上浏览时会经常发现这样的例子。

使用这种技术，不但能在一定的空间里放入更多的内容，还可以给人一种经常更新的假象喔。

怎么样心动了吧？其实只要你有一点点html和javascript 的基础，一切都是这么简单。

follow me,让我们来看看她随机的奥密。

让我们从一个简单的例子开始吧。

平常我们在页面中加入图片都是用<img src="图片">来完成。

如果我们要随机显示3张不同的图片就要对这句代码进行小小的修改，首先加入<script>标记：以下是引用片段：<script language=javascript></script>然后在这段标记内把<img src="图片">用document.write("")的型式放进去，就成了document.write("<img src=图片>")现在我们来完成最关建的一段：以下是引用片段：id=Math.round(Math.random()*2)+1这样取得随机数为1,2,3将你要显示的图片改名为1.gif,2.gif,3.gif，ok！最后的代码是：以下是引用片段：<script language=javascript>id=Math.round(Math.random()*2)+1document.write("<img src="+id+".gif>")</script>试一下，是不是不错？那如果我的每一张图片都对应了一个超链接该怎么办呢？我们还是来假设一下有3张图片，1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3。

JavaScript网页特效经典300例

JavaScript网页特效经典300例
第1篇 JavaScript基础篇
第1章网页特效
第2章DOM操作
第3章控制表单控件
第4章窗口的控制和框架的互操作
第5章鼠标特效
第6章按钮特效
第7章链接特效
第8章文本输入框和下拉菜单特效
第9章层的应用
第10章表格的控制
第1章网页特效
在万维网刚被发明的初期，网页只是一个静态的、可以呈现文字的页面而已。

但是，随着互联网的发展，人们对网页的美观和动态性要求越来越高，因此，网页就需要变得更有互动性，能更好地满足人们的视觉需要。

所以，现在大多数的网站都采用了各式各样的网页特效来提高网页的可读性和用户体验感。

本章介绍了用JavaScript实现的多种网页特效，读者可以从中学到网页特效的一些技巧。

实例001 自动刷新页面
【实例描述】
有一些具有实效特点的网页，譬如股票价格、外汇牌价等，有这样的用户需求：定时地自动刷新网页，把最新数据展示给用户。

那么这样的效果如何实现呢？JavaScript里有一个reload()函数可以实现这样的效果。

【实现代码】
<script< p="">
type="text/javascript">
//刷新网页的函数
fresh(){
function
window.location.reload();
//调用location的reload函数
}
setTimeout('fresh()',10000); //设置timeout，10秒钟刷新一次</script<>。

一些常用的网页特效

一些常用的网页特效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"></script>9. 防止被人frame<SCRIPT LANGUAGE=JAVASCRIPT></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"></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"></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"></SCRIPT>35.ENTER键可以让光标移到下一个输入框<inputonkeydown="if(event.keyCode==13)event.keyCode=9"&gt ;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&gt ;")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)">这个是页面被载入和调出时的一些特效。

网页特殊效果集合

跟随鼠标的萤火虫<script language="JavaScript">if (document.all){colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')amount=colours.length;YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0; document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');for (i=0; i < amount; i++)document.write('<div id="iestars" style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:CourierNew;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>'); document.write('</div></div>');ini=1;gstep=1;function iMouse(){my=event.y;mx=event.x;}document.onmousemove=iMousefunction dim(){ini-=gstep;dt=setTimeout('dim()',10);if (ini < 2){clearTimeout(dt);glow();}}function glow(){ini+=gstep;gt=setTimeout('glow()',10);if (ini > 14){clearTimeout(gt);dim();}}function stars(){ie.style.top=document.body.scrollTop;for (i=0; i < amount; i++){var layer=iestars[i].style;layer.filter='glow(color='+colours[i]+', strength='+ini+')';layer.top=Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.c os((currStep+i*25)/10);layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/1 0)*Math.cos((currStep+i*25)/10);}currStep+=step;}function delay(){Ydelay = YgetDelay+=(my-YgetDelay)*1/20;Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;stars();setTimeout('delay()',10);}delay();glow();}</script>跟随鼠标的旋转文字<SCRIPT LANGUAGE="JavaScript">if (document.all) {yourLogo = "跟随鼠标的旋转文字";logoFont = "宋体";logoColor = "red";yourLogo = yourLogo.split('');L = yourLogo.length;TrigSplit = 360 / L;Sz = new Array()logoWidth = 100;logoHeight = -30;ypos = 0;xpos = 0;step = 0.03;currStep = 0;document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i = 0; i < L; i++) {document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');}document.write('</div></div>');function Mouse() {ypos = event.y;xpos = event.x - 5;}document.onmousemove=Mouse;function animateLogo() {outer.style.pixelTop = document.body.scrollTop;for (i = 0; i < L; i++) {ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);Sz[i] = ie[i].style.pixelTop - ypos;if (Sz[i] < 5) Sz[i] = 5;ie[i].style.fontSize = Sz[i] / 1.7;}currStep -= step;setTimeout('animateLogo()', 20);}window.onload = animateLogo;}</script>网页特效雪花漫天飞舞里面的/picture/snow.gif可以改成你自己想显示的任何图片当然不能是巨无霸的那么大呵呵<SCRIPT LANGUAGE="JavaScript1.2"></script>。

网页图片特效技巧小总结

网页图片特效技巧小总结这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句、css滤镜代码，加上简单的javascript语句实现的，简单有趣，可以作为帮助一些朋友javascript入门的小例子。

图片循环渐显渐隐效果描述：图片循环渐显渐隐……实现方法：1、把如下代码加入＜body＞区域中：<img src="../../image1.gif" name="u" border=0alt="Image" style="filter:alpha(opacity=0)"><script language="JavaScript">var b = 1;var c = true;function fade()if(document.all);if(c == true)b++;if(b==100)b--;c = falseif(b==10)b++;c = true;if(c == false)b--;u.filters.alpha.opacity=0 + b;setTimeout("fade()",50);</script>2、把＜body＞改为：<body bgcolor="#ffffff" onLoad="fade()">注：图片的文件名及路径可以自行修改。

禁止图片下载效果描述：设置某一图片禁止下载，鼠标移动到图片上面时将会给出提示，此方法治标不治本，只能骗骗菜鸟。

实现方法：<A HREF="javascript:void(0)" onMouseover="alert("对不起,此图片不能下载!")"><IMG SRC="../../2.gif" Align="center" Border="0" width="99" height="50"></A>注：图片的文件名及路径可以自行修改。

常见的网页动态效果

常见的网页动态效果常见的网页动态效果导语：令人愉悦的动效几乎已经成为如今网页设计的标准配置了，融入动效的交互细节让现代网页同以往的设计在根本上区别开来。

动效不仅可以表现状态，引导用户的关注点，帮助用于预测交互的结果，甚至影响用户的行为。

下面是一些常见的动态效果，欢迎参考！在逐步的探索和发展过程中，动效在网页和APP中的运用方法与技巧已经逐步成熟，形成了一套相对系统的模式。

今天的文章我们通过一系列实例，来展示一下动效是如何改善整个用户体验的。

加载动效动效最常用的一个地方就是进度条。

加载进度条的加载动效会改变用户对于时间的感知，通过转移注意力的方式让用户等待感降低。

如果你无法将等待的时长缩短，那么尽量令这个过程有趣。

简单的加载动效其实比复杂的更好。

额外的东西，比如声音效果就没有存在的必要了。

用户在有趣的动效上投注了越多的注意力，就越容易忽略等待的过程。

即使加载时间很短，有趣的动效依然能让这点时间变得好玩。

进度动效动效还可以用来展示交互或者操作的进度。

下面的这个加载进度条就是这类动效的代表：这个是Aviasales 的进度条。

同样的，你还可以考虑使用进度条来展示多个不同的步骤：界面框架界面框架会将界面加载之后的大概样式给展示出来，界面框架会让用户产生内容一瞬间就加载好了的错觉。

这种动效可以应用在绝大多数的网页和APP当中，它会明显强化用户的参与感。

视觉反馈将界面反馈视觉化地呈现给用户是非常实用的.良好的交互设计需要视觉反馈来支撑，传达交互完成后的结果，让交互可用、可见、可预期。

网站界面中哪些元素可交互如果是不可知的、交互的结果也不可预期，混乱就不可避免了。

周密的交互设计可以帮助用户理解，将这种混乱降到最低。

悬停动效桌面端交互主要还是借助触控板和鼠标，光标悬停特效很大程度是为这种情况而存在的，同时，它也是最常见的动效之一。

当用户不知道某个控件怎用的时候，会很直觉地将光标移动到上面去，这个时候，悬停特效能够很好的吸引他们的目光。

网页特效代码大全[1]1

网页特效代码大全（一）2008-06-28 21:42特别推荐带注释的表格菜单右键单击的菜单2可拖动的菜单1文件夹式的菜单很酷的导航菜单定制窗口全攻略多变的图像导航图片滚动公告栏自由移动和切换的图片鼠标控制的移动图像下雨了非常漂亮的图像效果跑马灯文字1 跟随鼠标滚动文字鼠标控制窗口滚动精制的鼠标时钟非常棒的打开小窗口特效非常棒的无边窗口特效状态栏的完整时间用状态栏记录用户信息状态栏的停留时间信息标题栏的时间显示显示中文日期与时间挂历的时间显示实时走动的时钟禁止用“另存为”保存页面随鼠标变色的文字简单的文字加密最简单的链接说明代码图片集旋转显示?图片向上翻滚?图片渐变效果?图片模糊变化?无用的右键单击跟随鼠标的文字加入收藏设为首页有立体感的文字三种不同的表格样式加密源代码脚本右键单击的菜单放大镜动感的图片另类的图像导航自动变色的链接文字滚动字幕很酷的广告牌鼠标控制的滚动字幕文本框的操作功能前进和后退按钮（图颜色变化的按钮图片特效晃动的图形动感的图片点击消失的图片另类的图像导航旋转的图片会弹跳的球可以拖动的图片可以拖动的多张图片礼花背景满天漂落的星随机变换的图像图形淡出淡隐围绕鼠标旋转的图片自动变换的图像及链接图片渐渐出现脚本自由移动和切换的图片点击放大图片多变的图像导航总在指定位置的图片可点击放大缩小的图片可以无限放大的图像非常漂亮的图像效果鼠标控制的移动图像下雪了下雨了鼠标点亮图片水韵效果不停闪烁的图片下拉框选择显示图片新窗口的下拉框选择器展开隐藏图片广告图片轮换抖动的图片水中倒影图片全景旋转的技巧图片自动切换放大镜定时闪烁的图片鼠标感应放大背景色选择器流动背景渐隐渐现的半透明图像半透明图片的显示鼠标移动图像<new>图片集旋转显示<new>图片边框的变幻<new>禁止图片下载的脚本图片滚动公告栏图片响应鼠标变换<图形显示特效<new>图片向上翻滚<new>图片左右飞舞<new>图片扫描效果<new>图片渐变效果<new>图片转换效果<new>带彩色边框的图片<页面外显示图片<ne图片模糊变化<new>图像浏览简单的图像变换特殊的图像显示图片虚幻显示自由移动的多幅图像图像控制的图像。

网页特效

/learn/index.html
在網頁中加入Javascript特效
加入不同的特效可能有少許的分別，但大家一般都要懂得找出 HTML 原碼中的 <head>…</head> 及 <body>…</body>位置。
例如：在 menu.htm 中加入按鈕小時鐘 (Button時間)…
Javascript 網頁特效
Javascript 是什麼？
Javascript 是一種可嵌入HTML碼的電腦程序語言，作用是為網頁畫面加入動態特效。例如：落葉、電腦日曆、跟著滑鼠的文字串等。
落葉
電腦日曆
跟著滑鼠的文字串
下載 Javascript 程序
編寫 Javascript 程序需要學習艱深的電腦語言，但互聯上有很多例子供人下載使用，例如：
1) 開啟 menu.htm。 2) 轉為 HTML 檢視模式。
ห้องสมุดไป่ตู้
在網頁中加入Javascript特效
3) 將複製了的 HTML 碼貼上於適當位置中。
4) 預覽效果(F12)。
在網頁中加入Javascript特效
按照指示全選及複製這段相關 HTML碼，至適當位置：
將這段原碼複製至我們的 menu.htm 內適當的位置中（適當的位置可參考特覽預覽中的原始碼）。在這例子中，只要將原碼複製至 menu.htm中 <body>…</body>之間的任何位置即可。
在網頁中加入Javascript特效

网页制作特效源码集锦

单行文字滚动新闻效果<!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>打字机式字符输出脚本说明:第一步:把如下代码加入<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');}//以下是输出的内容，自己修改即可。

网页特效

说明：点击即可把你的网站添加到浏览器的收藏菜单下效果：收藏本站代码：<span style="CURSOR: hand" onClick="window.external.addFavorite('','网页特效集锦')" title="网页特效集锦">收藏本站</span>说明：在鼠标后面跟着一串飘动的字符位置：在</head>之前代码：<style type="text/css">.spanstyle {COLOR: #00cccc; FONT-FAMIL Y: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</style><script>var x,yvar step=18var flag=0var message="★网页特效世界欢迎你的光临!"message=message.split("")var xpos=new Array()for (i=0;i<=message.length-1;i++) {xpos[i]=-50}var ypos=new Array()for (i=0;i<=message.length-1;i++) {ypos[i]=-200}function handlerMM(e){x = (yers) ? e.pageX : document.body.scrollLeft+event.clientXy = (yers) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function www_helpor_net() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("span"+(i)+".style")thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i]}}else if (flag==1 && yers) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i)thisspan.left=xpos[i]thisspan.top=ypos[i]}}var timer=setTimeout("www_helpor_net()",30)}for (i=0;i<=message.length-1;i++) {document.write("<span id='span"+i+"' class='spanstyle'>") document.write(message[i])document.write("</span>")}if (yers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;www_helpor_net();// --></script>说明浏览器的状态栏里出现一个字接一个字往左跑的欢迎语！效果看看状态栏：）位置：在</head>之前代码：<script language="JavaScript"></script>说明: 文本自动向上循环滚动，鼠标放到上面还会暂时停下来。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网页特效集锦
2008/02/11 0 典型特效1、收藏本站说明：点击即可把你的网站添加到浏览器
的收藏菜单下代码：span ‘ycrc’,’盐城人才网’)title= 收藏盐城人才网收藏本站
/span 2、设为首页说明：点击即可把你的网站设置为浏览器的起始页代码：span quot;var
strHref=window.location.href;this.style.behavior=‘url(#default#homepage)’;this.setHome Page(‘ycrc’);>3、去掉超链接的下划线说明：有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码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 4、自动刷新网页说明：在HTML 的与之间加入下面这段代码，则在5 分钟之后正在浏览的页
面将会自动变为target.html 这一页。

代码中300 为刷新的延迟时间，以秒为单位。

targer.html 为你想转向的目标页,若为本页则为自动刷新本页。

代码：meta http- equiv= refresh content= 300; url=target.html 5、刷新本页说明：点击即可刷新本页。

代码： a href= javascript:location.reload() target= _self 刷新/a 6、返回到上一页说明：点击即可返回到上一页面。

代码： a href= javascript:history.back(-1) 返回上一
页/a 7、跳出小窗口说明：在打开有下面这段代码的页面时将会跳出一个468x60 大
小的小窗口。

window.html 为跳出的小窗口里所要显示的网页。

toolbar、sta tus、menubar、scrollbars、设置小窗口的工具栏、状态栏、菜单栏及滚动条的有无，resizable 设置是否可让浏览者改变小窗口大小，width 、height 设置小窗口的宽度以
及高度。

(不过这样的小窗口一般是不受欢迎的哦！) 代码：script language= JavaScript window.open( window.html , www_ycrc_com_cn , toolbar=no, status=no,menubar=no,
scrollbars=no,resizable=no,width=468,height=60,left=200,top=50
/script 8、自动关闭窗口说明：在网页源代码中加入下面的代码，则该窗口将在20
秒钟之后自动关闭！这与跳出式小窗口配合使用是再好不过啦！代码中i=20 表示。

【IT专家】网页特效集锦

合集下载

网站特效_精品文档

网页常用11种特效

网页特效设计

【网页特效代码-页面特效】网页中弹出小窗口,页面背景逐渐变为半透明

网页特效集锦

网页特效集合整理发布word版本

网页各种特效——链接特效

网页特效：图片随机显示技巧

JavaScript网页特效经典300例

一些常用的网页特效

网页特殊效果集合

网页图片特效技巧小总结

常见的网页动态效果

网页特效代码大全[1]1

网页特效

网页制作特效源码集锦

网页特效

文档推荐

最新文档