javascript特效大全,JavaScript常用特效
其实javascript特效大全的问题并不复杂,但是又很多的朋友都不太了解JavaScript常用特效,因此呢,今天小编就来为大家分享javascript特效大全的一些知识,希望可以帮助到大家,下面我们一起来看看这个问题的分析吧!
javascript常用的特效有哪些
javascript
一种由Netscape的LiveScript发展而来的脚本语言,它提高与Java的兼容性。JavaScript采用HTML页作为其接口
一、Javascript在网页的用法
Javascript加入网页有两种方法:
1、直接加入HTML文档
这是最常用的方法,大部分含有Javascript的网页都采用这种方法,如:
<script language="Javascript">
<!--
document.writeln("这是Javascript!采用直接插入的方法!");
//-Javascript结束-->
</script>
在这个例子中,我们可看到一个新的标签:<script>……</script>,而<script language="Javascript”>用来告诉浏览器这是用Javascript编写的程序,需要调动相应的解释程序进行解释。
HTML的注释标签<!--和-->:用来去掉浏览器所不能识别的Javascript源代码的,这对不支持 Javascript语言的浏览器来说是很有用的。
//-Javascript结束:双斜杠表示 Javascript的注释部分,即从//开始到行尾的字符都被忽略。至于程序中所用到的document.write()函数则表示将括号中的文字输出到窗口中去,这在后面将会详细介绍。另外一点需要注意的是,<script>……</script>的位置并不是固定的,可以包含在< head>......</head>或<body>.....</body>中的任何地方。
2、引用方式如果已经存在一个Javascript源文件(以js为扩展名),则可以采用这种引用的方式,以提高程序代码的利用率。其基本格式如下:
<script src=url language="Javascript"></script>
其中的Url就是程序文件的地址。同样的,这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果,可以首先创建一个Javascript源代码文件“Script.js”,其内容如下:
document.writeln("这是Javascript!采用直接插入的方法!");
在网页中可以这样调用程序:<script src="Script.js" language="Javascript"></script>。
求个简单javascript代码 谢谢,网站菜单功能
不用说自己菜不菜的,能有这个学习的精神已经很值得鼓励了
呵呵,下面,我来给你介绍几个网站常见的菜单
第一个:仿网易的滑动门导航菜单
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>仿网易的滑动门技术,用DIV+CSS技术实现</title>
<style type="text/css">
<!--
#header{
background-color:#F8F4EF;
height: 200px;
width: 400px;
margin: 0px;
padding: 0px;
border: 1px solid#ECE1D5;
font-family:"宋体";
font-size: 12px;
}
#menu{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li{
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1{ background-color:#FFFFCC;}
.sec2{ background-color:#00CCFF;}
.block{ display: block;}
.unblock{ display: none;}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">最新新闻</li>
<li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
<li onMouseOver="secBoard(2)" class="sec1">最新日志</li>
<li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li>
</ul>
<!--内容显示区域-->
<ul id="main">
<li class="block">第一个内容</li>
<li class="unblock">第二个内容</li>
<li class="unblock">第三个内容</li>
<li class="unblock">第四个内容</li>
</ul>
<!--内容显示区域-->
</div>
</body>
</html>
这里基本上是使用Css与Div的结合,在整个布局中已层为单位,实行滑动菜单的是一个javascript脚本函数,调用就可以了,看不懂不要紧,日渐积累才是重要
第二个:经典实用的触发型导航(这是鼠标单击事件控制)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>
</head>
<body>
<STYLE type=text/css>.sec1{
BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; BORDER-LEFT:#ffffff 1px
solid; 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>指定行做为表体。
<BR>注释:TBODY要素是块要素,并且需要结束标
签。<BR>即使如果表格没有显式定义TBODY
要素,该要素也提供给所有表。<BR><BR>
参考:《动态HTML参考和开发应用大全》(人民邮电出
版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译)
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--关于cells集合-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表行或者整个
表中所有单元格的集合。<BR>应用于TR、TABLE。
<BR><BR>参考:《动态HTML参考和开发应
用大全》(人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译)
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--关于tBodies集合-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
<BR>应用于TABLE。<BR><BR>参考:
《动态HTML参考和开发应用大全》(人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译)
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--关于display属性-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>设置或者检索对象
是否被提供。<BR>可能的值为block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>该特性可读写,块要素默认
值为block,内联要素默认值为inline;层叠样式表
(CSS)属性不可继承。<BR><BR>参考:《
动态HTML参考和开发应用大全》(人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司译)
<BR><BR><A
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target=_blank>点击此处
</A>可参阅微软<A rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target=_blank>MSDN在线</A>上的解释。
</TD></TR></TBODY></TABLE>
;</TD></TR></TBODY></TABLE&g
t;</body>
</html>
这里跟上面不同的区别在与这是鼠标移动和滑动的事件区别!
第三个:仿拍拍的切换效果菜单(里面的图片是我放上去的,所以会看不到图片的,呵呵继续)
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">
<html xmlns="" lang="zh-CN">
<head>
<meta http-equiv="Content-Language" content="zh-cn"/>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<meta name="robots" content="all"/>
<title>网页特效|网页特效代码(JsHtml.cn)---仿拍拍paipai.com首页产品图片随机轮显切换效果</title><style>
body{font-size:12px}
img{border:0px}
#sale{right:206px;top:0;width:260px;background:#fff}
#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("images/saleTitle.gif") no-repeat}
#saleList{margin-top:5px}
#saleList.saleTwo{height:108px;background:url("images/salelineH.gif") bottom repeat-x;}
#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}
#saleList a.saleItem{background:url("images/salelineV.gif") right repeat-y;}
#saleList a img{margin:5px 0}
#saleList a:hover{background-color:#EBFFC5}
</style>
<script type="text/javascript">
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd(){
rnd.seed=(rnd.seed*9301+49297)% 233280;
return rnd.seed/(233280.0);
}
function rand(number){
return Math.ceil(rnd()*number)-1;
}
function nextSale(order){
if(order=="up") saleNum--;
else saleNum++;
if(saleNum>2) saleNum=0
else if(saleNum<0) saleNum=2;
//alert(saleNum);
for(i=0;i<3;i++)
document.getElementById("saleList"+i).style.display="none";
document.getElementById("saleList"+saleNum).style.display="";
}
</script>
</head>
<body>
<div id="sale" class="absolute overflow">
<div id="saleTitle" class="absolute">
<a rel="external nofollow" href="javascript:nextSale('up')" title="点击到上一屏">
<img src="images/saleFore.gif" hspace="4" onmouseover="this.src='images/saleForeOver.gif'" onmouseout="this.src='images/saleFore.gif'"/></a><a rel="external nofollow" href="javascript:nextSale('down')" title="点击到下一屏"><img src="images/saleNext.gif" onmouseover="this.src='images/saleNextOver.gif'" onmouseout="this.src='images/saleNext.gif'"/></a></div>
<div class="overflow" style="height:330px" id="saleList">
<script type="text/javascript">var saleNum=rand(3);</script>
<div id="saleList0" style="display:none">
<div class="saleTwo">
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="圣诞浪漫饰品超级大促" src="/jsimages/UploadFiles_3321/200804/20080423085515804.jpg" width="65" height="65"/></div>
<div>
圣诞浪漫饰品<br/>
超级大促</div>
</a>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65"/></div>
<div>
摄像头集结号<br/>
给你新的感觉</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65"/></div>
<div>
好感度提升<br/>
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="复古牛仔外套特惠119元起" src="/jsimages/UploadFiles_3321/200804/20080423085516293.jpg" width="65" height="65"/></div>
<div>
复古牛仔外套<br/>
特惠119元起</div>
</a>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="圣诞拍拍特供运动服3折" src="/jsimages/UploadFiles_3321/200804/20080423085516802.jpg" width="65" height="65"/></div>
<div>
圣诞拍拍特供<br/>
运动服3折</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65"/></div>
<div>
摄像头集结号<br/>
给你新的感觉</div>
</a></div>
<div>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="圣诞拍拍特供电脑周边4折" src="/jsimages/UploadFiles_3321/200804/20080423085516530.jpg" width="65" height="65"/></div>
<div>
圣诞拍拍特供<br/>
电脑周边4折</div>
</a>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="party扮靓甜美腮红" src="/jsimages/UploadFiles_3321/200804/20080423085516658.jpg" width="65" width="65" height="65"/></div>
<div>
party扮靓<br/>
甜美腮红</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65"/></div>
<div>
好感度提升<br/>
韩版娃娃装</div>
</a></div>
</div>
<div id="saleList1" style="display:none">
<div class="saleTwo">
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="新奇好玩便宜尽在网游频道" src="/jsimages/UploadFiles_3321/200804/20080423085516612.jpg" width="65" height="65"/></div>
<div>
新奇好玩便宜<br/>
尽在网游频道</div>
</a>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="展现高贵气质骑士系马靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202.jpg" width="65" height="65"/></div>
<div>
展现高贵气质<br/>
骑士系马靴</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65"/></div>
<div>
摄像头集结号<br/>
给你新的感觉</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="永不过时条纹毛衣" src="/jsimages/UploadFiles_3321/200804/20080423085516984.jpg" width="65" height="65"/></div>
<div>
永不过时<br/>
条纹毛衣</div>
</a>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="圣诞拍拍特供运动鞋2折" src="/jsimages/UploadFiles_3321/200804/20080423085516651.jpg" width="65" height="65"/></div>
<div>
圣诞拍拍特供<br/>
运动鞋2折</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65"/></div>
<div>
好感度提升<br/>
韩版娃娃装</div>
</a></div>
<div>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="精简唯美索爱K630" src="/jsimages/UploadFiles_3321/200804/20080423085516302.jpg" width="65" height="65"/></div>
<div>
精简唯美<br/>
索爱K630</div>
</a>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="原装瑞士军刀精选" src="/jsimages/UploadFiles_3321/200804/20080423085516549.jpg" width="65" width="65" height="65"/></div>
<div>
原装瑞士军刀<br/>
精选</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65"/></div>
<div>
超薄机身<br/>
索爱W880</div>
</a></div>
</div>
<div id="saleList2" style="display:none">
<div class="saleTwo">
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="各就各味秋冬饮食计划" src="/jsimages/UploadFiles_3321/200804/20080423085516704.jpg&type=3" width="65" height="65"/></div>
<div>
各就各味<br/>
秋冬饮食计划</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65"/></div>
<div>
好感度提升<br/>
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="圣诞拍拍特供随身视听5折" src="/jsimages/UploadFiles_3321/200804/20080423085516375.jpg" width="65" height="65"/></div>
<div>
圣诞拍拍特供<br/>
随身视听5折</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65"/></div>
<div>
超薄机身<br/>
索爱W880</div>
</a></div>
<div>
<a class="saleItem" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="我爱我家家居大抢购" src="/jsimages/UploadFiles_3321/200804/20080423085516954.jpg" width="65" height="65"/></div>
<div>
我爱我家<br/>
家居大抢购</div>
</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">
<div>
<img alt="超值彩妆套装变身派对女王" src="/jsimages/UploadFiles_3321/200804/20080423085516919.jpg" width="65" width="65" height="65"/></div>
<div>
超值彩妆套装<br/>
变身派对女王</div>
</a></div>
</div>
</div>
</div>
<script type="text/javascript">document.getElementById("saleList"+saleNum).style.display="";</script>
<p></p>
<p>更多网页特效代码尽在<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">网页特效代码</a></p>
</body>
</html>
这个仿拍拍基本上就是2层放图片,但用起来的效果还是可以的,如果不喜欢我还有下面呢,慢慢学,总会看懂的(最重要的还是Css哦)
这个主要就是让层实现隐藏我觉得这个在层使用方面还是好的
从总体上看,在实现层与层之间的交互,在其代码我觉得你有必要去认真看下!
以上是我介绍额度菜单,虽然不是很强大,但是却很使用,而且在J2EE中
菜单基本上是一个假象,都是用层与Css之间的特效做出来的!
学会了层的具体应用,我相信你也可以有自己特色的菜单的
那我祝你好运咯!!加油!!
200分求javascrapt代码
Javascript特效代码大全(420个)
Javascript特效代码
├ Cookie脚本
├随访问次数变提示
├集成Cookies
├使窗口仅弹出一次
├签名提示程序
├记录上次登录时间
├自由控制打开窗口
├记录页面修改时间
├检测IE去过站点
├离开时显示信息
├弹出窗口自动关闭
├离开页面弹出窗口
├进入时显示信息
├离开启动收藏夹
├链接确认按钮
├点击加入收藏夹
├记录页面更新时间
├页面载入等待
├打开硬盘驱动器
├设置默认首页
├输入框测试警告
├链接弹出警告框
├关闭窗口链接
├显示器分辨率检测
├按分辨率导航
├定制打开的窗口
├控制窗口打开日期
├打开窗口居中
├输入框控制
├查看输入框内容
├显示所有链接
├限时载入页面
├输入框神秘消失
├检测访问来源
├回退的页面数
├危险的链接
├倒计时载入页面
├自由打开窗口
├检测IE所装插件
├检测点链接速度
├检测健康程度?
├页面中打开窗口
├特殊的Bookmark
├窗口打开关闭程序
├随机显示一些数字
├页面自动打开
├进入弹出收藏夹
├自动显示是否更新
├浏览器详细报告
├
页面背景类
├背景向下移动
├背景不停变换色彩
├使页面产生百叶窗
├颜色代码英文集
├自已选择背景颜色
├背景颜色安全测试
├颜色选择器
├背景图片居中
├页面转换特效
├礼花背景
├链接驱动背景色
├手动调节背景色
├鼠标使链接变色
├跟随鼠标旋转背景
├背景调色板
├ RGB颜色转换
├按钮驱动背景
├颜色选择器
├精彩的变色文字
├颜色选择器
├闪烁的霓虹灯
├星星从背景中飞出
├背景向下移动(二)
├动态选择背景色
├下雨
├按钮驱动背景变化
├按钮使背景闪烁
├背景随机显示
├背景快速闪烁
├自己选择背景图片
├
文本特效类
├随机信息显示
├随机文本链接
├所有链接不停变色
├鼠标经过文字变色
├随日期变换文本
├文字颜色渐变脚本
├文本自动输出
├文字特效
├文字不停变色
├字符连续消隐
├公告栏
├文字动态变化
├字符飞舞
├文字特殊显示
├文字从旁边出现
├文本从右向左输出
├消息显示器
├随机跳出信息窗口
├随机产生乱码
├输入框各种效果
├文字从左到右出现
├信息逐条出现
├选择显示文字方式
├文字来回反弹
├文字逐个出现
├电子管显示
├文字循环出现
├可调节速度的撞击
├逐字出现的信息条
├自由控制文字输入
├一段彩色的文字
├可调节的输出形式
├文字同时输出
├调节文字移动形式
├文字飘动输出
├各种形式文字输出
├文字逐个闪烁
├文字上下跳动
├文字变色逐个出现
├点击改变文字
├文字段任意移动
├文字连续闪烁
├点击出现链接
├状态栏条
├链接在右面打开
├文字胡乱跳动
├文字段到处飞舞
├按钮驱动文字渐变
├文字向左移动
├文字弯曲变形
├双重输入文字
├综合字符集
├文字从小变大
├导航菜单类
├树形菜单(一)
├树形菜单(二)
├树形菜单(三)
├页面搜索类
├站内搜索脚本(一)
├站内搜索脚本(二)
├站内搜索脚本(三)
├站内搜索脚本(四)
├站内搜索脚本(五)
├站内搜索脚本(六)
├内部搜索脚本
├时间日期类
├任意位置显示时钟
├倒计时代码生成器
├八种风格时间显示
├显示登陆时间
├日历生成器
├退出显示访问时间
├一款特酷的时钟
├全中文日期显示
├纯JavaScript时钟
├距离某天时间
├显示特殊节日脚本
├时钟加在背景上
├ Form中的时钟
├带开关的Form时钟
├距离某日时间
├记录几天后的日期
├ Form栏特全时钟
├全球时间表
├随时间变化提示
├特酷的倒影时钟
├特酷的日期显示
├ 2000年日历
├时间日期转换
├时间跳动器
├自己创建日历
├生日提醒器
├计算任一天星期几
├离开某一天日期
├按钮上的时间
├ Form中时间显示
├检测星期几并导航
├最近的星期天
├全日制时钟
├用图片显示日期
├详细计算你的年龄
├时间按钮提醒
├计算出生时间
├页面完成时间
├
页面导航类
├显示站点信息导航
├任意显示导航信息
├动态导航脚本
├下拉式导航菜单
├静止导航菜单
├静止图片脚本
├文本静止不动
├信息框显示链接
├友情链接导航框
├目录式导航菜单
├重要信息说明脚本
├滚动链接导航
├图片代替按钮脚本
├打开窗口等待
├静态导航菜单
├层叠式导航菜单
├隐现导航脚本
├页面内部导航
├图片代替按钮脚本
├打开窗口等待
├滚动的超级链接
├先后点击链接
├按钮选择导航
├不停变化的导航
├随机的导航
├链接窗口说明
├同时打开多个链接
├打开链接显示信息
├又一动态导航脚本
├ Form框中导航
├屏幕翻滚导航
├带说明的导航
├任意多友情链接
├链接自动说明脚本
├开始选择导航
├链接处出现图标
├导航菜单选择
├
按钮特效类
├跑马灯式链接说明
├窗口打开关闭
├浮动的链接说明
├链接处变换色彩
├变换链接色和底色
├按顺序点击链接
├查看源代码按钮
├前进后退按钮
├按钮定制打开窗口
├按钮打开全屏窗口
├自由打开各种窗口
├按钮回到默认首页
├各种用途的按钮
├频道方式打开窗口
├按钮特殊效果
├浏览器全屏显示
├死机程序
├跳出说明窗口
├关不掉的跳出框
├循环的警告框
├检测页面来源
├屏幕抖动脚本
├页面被冻结
├
代码生成类
├动态按钮代码生成
├浏览器检测生成器
├ BrowserCheck脚本
├彩色文字生成器
├分割Frame的代码
├主页制作器
├
综合类
├加密页面源代码
├访问时间限制
├给页面加“热键”
├浏览器毁灭者
├文本中首字母大写
├查看某网址源代码
├文本中首字母大写
├综合的搜索引擎
├搜索引擎登记
├下载记时器脚本
├随机播放背景音乐
├随日期播放音乐
├ E-mail表单递交
├ Jsp容错脚本
├计算器(一)
├计算器(二)
├计算器(三)
├网页调用另外网页
├ FTP页面登录
├根据浏览器用CSS
├输入框的新属性
├数字排序
├发信(一)
├发信(二)
├发信(三)
├发信(四)
├发信(五)
├发信(六)
├ E-mail递交
├元素周期表
├显示人口数量
├计算平面两点距离
├页面自动刷新
├又一个容错脚本表
├打开多个搜索引擎
├可选择的页面信息
├直接页面显示器
├ MIDI音乐选择
├页面特效类
├字符从空中掉下来
├打字机式输出文字
├滚动显示的LOGO
├文本自动滚屏
├控制别人输入字数
├文本上下弹跳
├特酷消隐字体
├文本框栏目介绍
├旋转变换文字
├特酷的文本输出
├页面自动滚屏效果
├炽热的文字特效
├鼠标响应文字变色
├隐藏显示字符脚本
├鼠标响应图片变化
├星星满天闪烁
├打开页面颜色渐变
├页面打开特效
├英文名字变日文
├页面上下滚动
├页面缩小特效
├页面左右分开
├特殊的HTML字符
├图片满天飞舞
├页面掉下去
├页面向右滚屏
├综合页面特效
├图形图象类
├禁止图片下载
├图片隐现效果
├随机显示图片
├图片变形扭曲
├雪景
├图片渐渐出现
├相片选择器
├图形循环渐显
├图形左右晃动
├图形选择脚本
├图片翻滚导航
├图片定期消失
├自由控制图片下载
├自由设定图片大小
├图片响应鼠标变换
├图片自由运动
├图片大小变换
├图片随意移动
├自动显示图片属性
├图片循环显现
├图片变化效果
├随机显示banner
├鼠标驱动图片变化
├图片不停闪烁
├
鼠标事件类
├图片跟随鼠标
├鼠标响应新页面
├禁用鼠标左右键
├鼠标控制窗口开关
├鼠标点击效果
├禁用右键自动导航
├鼠标激活警告框
├鼠标跟踪器
├右键自动链接页面
├跟随鼠标的星星
├右键打开收藏夹
├字符围绕鼠标
├各种形状的鼠标
├跟随鼠标的字符
├非图片鼠标跟踪器
├显示链接特征
├改变链接属性
├显示鼠标坐标
├随鼠标的彩色字符
├状态栏特效
├状态栏跑马灯脚本
├文字从右弹出
├文字从左依次弹出
├文字从右到左移动
├文字快速依次弹出
├文字组合弹出
├文字不停闪烁
├状态栏显示链接
├ title显示日期
├文字来回出现
├状态栏固定信息
├状态栏特殊显示
├虚拟格式化硬盘
├状态栏显示输入
├ title显示时间
├病毒入侵演示
├文字从前后出现
├文字慢慢出现
├状态栏特殊效果
├文字从中间出现
├文字分解出现
├输入字符在状态栏
├文字多处出现
├ Title特效
├调节文字显示速度
├状态栏标准时钟
├密
码类
├控制他人进入页面
├用来实现会员制度
├密码保护相应页面
├自己编制密码表
├密码保护页面(一)
├游
戏类
├一款流行游戏
├双人小游戏
├动脑小游戏
├模拟跳舞游戏
├测试点击速度
├模拟太空飞行
├一个输赢游戏
├测试打字速度
├测试心算能力
├选择路线游戏
├射击小游戏
├字符在FORM中坠落
├堆积游戏
├ 21点游戏
├猜数的大小
├找相同的图片
├在线测试类
├在线考试脚本(一)
├在线考试脚本(二)
├在线考试脚本(三)
├在线考试脚本(四)
├在线考试脚本(五)
├在线考试脚本(六)
├测试警告
├
技巧类
├两个脚本同时调用
├加快图片显示
├页面自动刷新
├模拟跳舞游戏
├光标选择输入框
├更方便的单选框
├输入框无法输入
├ HTML加入jsp
├自动跳出Frame
├禁止页面加入缓存
├制作分析统计器
├密码输入框的问题
├屏蔽HTML(说明)
├输入框特殊效果
文章到此结束,如果本次分享的javascript特效大全和JavaScript常用特效的问题解决了您的问题,那么我们由衷的感到高兴!