【IT专家】网页特效集锦
网页特效集锦
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 表示。
网站特效_精品文档
网站特效随着互联网技术的快速发展和网站设计的不断创新，越来越多的网站开始采用特效来提升用户体验和视觉效果。
网站特效是指通过使用HTML、CSS、JavaScript等技术，为网站添加动态效果、交互效果和视觉效果，以增强用户对网站的吸引力和互动性。
一、动态效果动态效果是指网页中的元素具有动画效果或运动效果。
最常见的动态效果包括渐变过渡、淡入淡出、旋转、缩放等。
这些效果可以通过CSS3的transition和transform属性来实现，使网页看起来更加生动和有趣。
例如，当鼠标悬停在一个按钮上时，可以通过渐变过渡效果让按钮的颜色由浅变深，给用户一种交互的视觉反馈。
二、交互效果交互效果是指网页中的元素具有与用户的交互行为。
通过点击、滑动、拖拽等操作，网站可以展示出不同的效果和结果。
交互效果可以通过JavaScript来实现，通过监听用户的事件，如点击事件或鼠标移动事件，来触发相应的响应动作。
例如，在一个图片展示网站中，用户可以通过点击某个图片进行放大或缩小操作，以便更好地观看细节。
三、视觉效果视觉效果是指以视觉上的美感为目的，通过改变元素的外观和样式来实现。
最常见的视觉效果包括阴影效果、模糊效果、过渡效果等。
这些效果可以通过CSS的box-shadow、filter等属性来实现，使网站的界面更加丰富多样。
例如，在一个购物网站中，当用户将鼠标移到商品图片上时，可以通过添加阴影效果来突出该商品，使用户更加关注。
四、性能优化在使用网站特效的同时，也要注意对网站性能的影响。
过多或过重的特效会导致网页加载速度变慢，甚至出现卡顿现象，影响用户体验。
因此，在设计网站特效时，需要注意以下几点：1. 合理选择特效：根据网站的定位和用户群体，选择适合的特效。
不同的特效对网页性能的影响不同，需要具体情况具体分析。
2. 控制特效数量：避免在一个页面上过多地使用特效，以免影响页面的性能。
特效的使用应该是为了提升用户体验，而不是为了增加特效的数量。
网页常用11种特效
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"><!--A:link{text-decoration:none}A:visited{text-decoration:none}A:hover {color: #ff00ff;text-decoration:underline}--></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"><!--var NewsTime = 2000; //每条新闻的停留时间var TextTime = 50; //新闻标题文字出现等待时间，越小越快var newsi = 0;var txti = 0;var txttimer;var newstimer;var newstitle = new Array(); //新闻标题var newshref = new Array(); //新闻链接newstitle[0] = "关于本站的相关说明";newshref[0] = "/Js/ShowNews.asp?ID=1";newstitle[1] = "本站控制面板的使用方法介绍"; newshref[1] = "/Js/ShowNews.asp?ID=2";newstitle[2] = "添加了部分教程文章充实内容"; newshref[2] = "/Js/ShowNews.asp?ID=3";newstitle[3] = "完成留言板的修改";newshref[3] = "/Js/ShowNews.asp?ID=4";newstitle[4] = "上千个精致特效持续添加中"; newshref[4] = "/Js/ShowNews.asp?ID=5";function shownew(){//code by haiwa @2005-10-21 var endstr = "_"hwnewstr = newstitle[newsi];newslink = newshref[newsi];if(txti==(hwnewstr.length-1)){endstr="";}if(txti>=hwnewstr.length){clearInterval(txttimer);clearInterval(newstimer);newsi++;if(newsi>=newstitle.length){newsi = 0}newstimer = setInterval("shownew()",NewsTime);txti = 0;return;}clearInterval(txttimer);document.getElementById("HotNews").href=newslink;document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;txti++;txttimer = setInterval("shownew()",TextTime);}shownew();//--></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"><!--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)">这个是页面被载入和调出时的一些特效。