网页特效代码

发布时间:2025-05-20 13:45:18 发布人:远客网络

网页特效代码

一、网页特效代码

在HTML文件中添加网页特效代码，一般有三种情况。

第一，只加在HTML文件头部，即HTML文件中<head>……</head>之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。

第二，只加在HTML文件体部。即HTML文件中<body>……</body>之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。如在你题目中提到的就属于这一类。

除上述情况外，多数代码需要先在头部（<head>……</head>之间）在上一些属性性质的代码，但是特效的主代码需要添加在体部（body>……</body>之间），否则，特效不能正常显示，有时还会出现错误，影响整个页面的正常显示。

先要用HTML编辑软件，如常见的文本编辑器“记事本”，打开需要编辑的文件，根据特效代码的要求，在文件中找到相应位置，复制，粘贴特效代码，保存即可。修改完毕后，即可在浏览器中看到相应的效果。

在添加的时候一定要注意，一定要按照特效源码的要求添加，此外，还要保证源码的完整性，一个标点符号都不能少，也不能多。

另外要说的是，根据我的经验，直接从网上复制来的代码，不一定都能直接粘贴了用，一部分必须通过一个软件来中转。比如，先把网上的代码复制后，粘贴到“记事本”中，然后再复制、粘贴到相应的文件位置上。

最后，介绍你几个经典网页特效站。

1、网页特效集锦：

2、javascript网页特效：

3、万旭网页特效：

4、网页特效梦工厂：

5、网页制作大宝库网页特效大全：

二、JavaScript精彩网页特效实例精粹目录

1、本文详细介绍了JavaScript在网页特效设计中的多种实例与应用，旨在为开发者提供丰富的灵感与实践案例。以下为各章节内容概述：

2、实例33：鼠标光标悬停加入收藏夹

3、实例36：鼠标光标三色光跟随效果

4、实例53：页面内容转成WORD文档按钮

5、本文涵盖了JavaScript在网页特效设计中的广泛应用场景，从文字、图片、鼠标键盘交互到按钮、日期时间、计数转换等多个方面，为开发者提供了丰富的案例与实践灵感。通过学习这些实例，开发者可以提升网页的互动性和用户体验，创造出更多吸引人、功能丰富的网页应用。

6、本书是一本介绍运用JavaScript语言进行动态网页特效编程的实例大全。书中200多个实例以效果展示-程序实现-难点分析-知识拓展等层层推进的写法，使讲解更精彩、理解更深入、应用更容易。通过本书的学习，读者也可以制作出更多更酷的特效网页，从而展现出自己的网站特色。

三、求个简单javascript代码谢谢,网站菜单功能

不用说自己菜不菜的，能有这个学习的精神已经很值得鼓励了

呵呵，下面，我来给你介绍几个网站常见的菜单

第一个：仿网易的滑动门导航菜单

<title>仿网易的滑动门技术，用DIV+CSS技术实现</title>

.sec1{ background-color:#FFFFCC;}

.sec2{ background-color:#00CCFF;}

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";

<li class="block">第一个内容</li>

<li class="unblock">第二个内容</li>

<li class="unblock">第三个内容</li>

<li class="unblock">第四个内容</li>

这里基本上是使用Css与Div的结合，在整个布局中已层为单位，实行滑动菜单的是一个javascript脚本函数，调用就可以了，看不懂不要紧，日渐积累才是重要

第二个：经典实用的触发型导航（这是鼠标单击事件控制）

<title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>

<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:

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

BORDER-RIGHT: gray 1px solid; BORDER-

LEFT:#ffffff 1px solid; COLOR:#000000; BORDER-

BOTTOM: gray 1px solid; BACKGROUND-COLOR:#d4d0c8

for(i=0;i<secTable.cells.length;i++)

secTable.cells[n].className="sec2";

for(i=0;i<mainTable.tBodies.length;i++)

<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>

<BR>注释：TBODY要素是块要素，并且需要结束标

签。<BR>即使如果表格没有显式定义TBODY

要素，该要素也提供给所有表。<BR><BR>

参考：《动态HTML参考和开发应用大全》（人民邮电出

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>

align=middle><BR><BR>

cellPadding=0 width=490 border=0>

表中所有单元格的集合。<BR>应用于TR、TABLE。

<BR><BR>参考：《动态HTML参考和开发应

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>

align=middle><BR><BR>

cellPadding=0 width=490 border=0>

对象的集合。对象在该集合中按照HTML源顺序排列。

<BR>应用于TABLE。<BR><BR>参考：

《动态HTML参考和开发应用大全》（人民邮电出版社

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>

align=middle><BR><BR>

cellPadding=0 width=490 border=0>

是否被提供。<BR>可能的值为block、none、

inline、list-item、table-header-group、table-

footer-group。<BR>该特性可读写，块要素默认

值为block，内联要素默认值为inline；层叠样式表

（CSS）属性不可继承。<BR><BR>参考：《

动态HTML参考和开发应用大全》（人民邮电出版社

北京华中兴业科技发展有限公司译）

href="" target=_blank>点击此处

</A>可参阅微软<A href="" target=_blank>MSDN在线</A>上的解释。

</TD></TR></TBODY></TABLE>

;</TD></TR></TBODY></TABLE&g

这里跟上面不同的区别在与这是鼠标移动和滑动的事件区别！

第三个：仿拍拍的切换效果菜单（里面的图片是我放上去的，所以会看不到图片的，呵呵继续）

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">

<title>网页特效|网页特效代码(JsHtml.cn)---仿拍拍paipai.com首页产品图片随机轮显切换效果</title><style>

#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.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:hover{background-color:#EBFFC5}

rnd.seed=(rnd.seed*9301+49297)% 233280;

return Math.ceil(rnd()*number)-1;

else if(saleNum<0) saleNum=2;

document.getElementById("saleList"+i).style.display="none";

document.getElementById("saleList"+saleNum).style.display="";