本文介绍了网页制作过程中常见的两个网页特效的实现方法以及代码.
1、网页内容默认为折叠状态，通过鼠标点击内容自动展开，鼠标再次点击，文本内容自动折叠起来的特效。
代码如下：
css：
<style>.a1 {height:18px; overflow:hidden;}.b1 {}</style>
js代码:
<script language="javascript">
function zd(obj)
{
if(obj.className == "a1"){
obj.className = "b1";
}
else
obj.className = "a1";
}
</script>
DIV布局
<div style="width: 500px">
<div class="a1" onclick="zd(this);">折叠的网页内容占位符XXXX————X—XXXX—————————X———X———XXXX————XXX———X———折叠的网页内容占位符</div></div>
<div style="width: 500px">
<div class="a1" onclick="zd(this);">在线工具测试折叠的网页内容占位符2————X——XXXX—————XXX—X——XXXX——X———XXXX———XX——
在线工具测试折叠的网页内容占位符2</div>
</div>
2、那么怎样实现网页点击图标自动切换页面的背景特效实现方法呢？
可以通过以下的代码实现：
<body id="qtoolnet" background="背景">
<div style="float:left;width:130px;height:130px;background-image:URL(背景小图标地址)" onclick="document.all.qtoolnet.style.backgroundImage='URL(新的网页背景地址)'"></div>
<div style="float:left;width:130px;height:130px;background-image:URL(背景小图标地址2)" onclick="document.all.qtoolnet.style.backgroundImage='URL(新的网页背景地址2)'"></div>
</body>
将以上代码放入网页中即可实现用户点击小图标自动切换相对应的网页背景图片效果.，图片地址可随意修改,也可以通过复制div代码添加更多的网页背景.
tool在线工具