javascript部分特效及代码
2014-05-18 23:34
295 查看
1.使用javascript进行按钮的切换特效（这里是以图片按钮进行，图片放在images文件夹中，页面在同级目录中。）
left1.jpg left2.jpg right1.jpg right1.jpg end1.jpg end2.jpg
树形菜单制作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 树形结构 </title>
<style type="text/css">
body{
font-size:13px;
line-height:20px;
}
a{
font-size: 16px;
color: #000000;
text-decoration: none;
}
a:hover{
font-size:18px;
color: #ff0000;
}
.img{
vertical-align: middle;
border="1";
}
.hidden{
list-style:none;
display:none;
}
</style>
<script type="text/javascript">
function show(d1){
if(document.getElementById(d1).style.display=='block'){
document.getElementById(d1).style.display='none';
}else{
document.getElementById(d1).style.display='block';
}
}
</script>
</head>
<body>
<ul>
<li><input type="image" src="images/fold.gif">树形结构</li>
</ul>
<ul><a href="javascript:onclick=show('art')"><input type="image" src="images/fclose.gif" >文学作品</a>
</ul>
<ul id="art" class="hidden">
<li><input type="image" src="images/doc.gif">小说</li>
<li><input type="image" src="images/doc.gif">诗歌</li>
<li><input type="image" src="images/doc.gif">散文</li>
<li><input type="image" src="images/doc.gif">现代文</li>
</ul>
<ul>
<a href="javascript:onclick=show('min')"><input type="image" src="images/fclose.gif" >四大名著</a>
</ul>
<ul id="min" class="hidden">
<li><input type="image" src="images/doc.gif">三国演义</li>
<li><input type="image" src="images/doc.gif">西游记</li>
<li><input type="image" src="images/doc.gif">水浒传</li>
<li><input type="image" src="images/doc.gif">红楼梦</li>
</ul>
<ul>
<a href="javascript:onclick=show('shu')"><input type="image" src="images/fclose.gif" >教学书籍</a>
</ul>
<ul id="shu" class="hidden">
<li><input type="image" src="images/doc.gif">小学教材</li>
<li><input type="image" src="images/doc.gif">中学教材</li>
<li><input type="image" src="images/doc.gif">高中教材</li>
<li><input type="image" src="images/doc.gif">大学教材</li>
</ul>
<ul>
<a href="javascript:onclick=show('ba')"><input type="image" src="images/fclose.gif" >娱乐八卦</a>
</ul>
<ul id="ba" class="hidden">
<li><input type="image" src="images/doc.gif">小学教材</li>
<li><input type="image" src="images/doc.gif">中学教材</li>
<li><input type="image" src="images/doc.gif">高中教材</li>
<li><input type="image" src="images/doc.gif">大学教材</li>
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 切换效果 </title>
<script type="text/javascript">
function changeleft(){
var left1=document.getElementById("left1");
var left2=document.getElementById("left2");
var right1=document.getElementById("right1");
var right2=document.getElementById("right2");
var end1=document.getElementById("end1");
var end2=document.getElementById("end2");
left1.style.display="block";
left2.style.display="none";
right1.style.display="block";
right2.style.display="none";
end1.style.display="block";
end2.style.display="none";
}
function changeright(){
var left1=document.getElementById("left1");
var left2=document.getElementById("left2");
var right1=document.getElementById("right1");
var right2=document.getElementById("right2");
var end1=document.getElementById("end1");
var end2=document.getElementById("end2");
left1.style.display="none";
left2.style.display="block";
right2.style.display="block";
right1.style.display="none";
end1.style.display="none";
end2.style.display="block";
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td onmouseover="changeleft()"><input type="image" src="images/left1.jpg" id="left1"><input type="image" src="images/left2.jpg" style="display:none;" id="left2"></td>
<td onmouseover="changeright()"><input type="image" src="images/right1.jpg" id="right1"><input type="image" src="images/right2.jpg" style="display:none;" id="right2"></td>
</tr>
<tr>
<td colspan="2"><input type="image" src="images/end1.jpg" id="end1"><input type="image" src="images/end2.jpg" style="display:none;" id="end2" ></td>
</tr>
</table>
</body>
</html>left1.jpg left2.jpg right1.jpg right1.jpg end1.jpg end2.jpg
树形菜单制作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 树形结构 </title>
<style type="text/css">
body{
font-size:13px;
line-height:20px;
}
a{
font-size: 16px;
color: #000000;
text-decoration: none;
}
a:hover{
font-size:18px;
color: #ff0000;
}
.img{
vertical-align: middle;
border="1";
}
.hidden{
list-style:none;
display:none;
}
</style>
<script type="text/javascript">
function show(d1){
if(document.getElementById(d1).style.display=='block'){
document.getElementById(d1).style.display='none';
}else{
document.getElementById(d1).style.display='block';
}
}
</script>
</head>
<body>
<ul>
<li><input type="image" src="images/fold.gif">树形结构</li>
</ul>
<ul><a href="javascript:onclick=show('art')"><input type="image" src="images/fclose.gif" >文学作品</a>
</ul>
<ul id="art" class="hidden">
<li><input type="image" src="images/doc.gif">小说</li>
<li><input type="image" src="images/doc.gif">诗歌</li>
<li><input type="image" src="images/doc.gif">散文</li>
<li><input type="image" src="images/doc.gif">现代文</li>
</ul>
<ul>
<a href="javascript:onclick=show('min')"><input type="image" src="images/fclose.gif" >四大名著</a>
</ul>
<ul id="min" class="hidden">
<li><input type="image" src="images/doc.gif">三国演义</li>
<li><input type="image" src="images/doc.gif">西游记</li>
<li><input type="image" src="images/doc.gif">水浒传</li>
<li><input type="image" src="images/doc.gif">红楼梦</li>
</ul>
<ul>
<a href="javascript:onclick=show('shu')"><input type="image" src="images/fclose.gif" >教学书籍</a>
</ul>
<ul id="shu" class="hidden">
<li><input type="image" src="images/doc.gif">小学教材</li>
<li><input type="image" src="images/doc.gif">中学教材</li>
<li><input type="image" src="images/doc.gif">高中教材</li>
<li><input type="image" src="images/doc.gif">大学教材</li>
</ul>
<ul>
<a href="javascript:onclick=show('ba')"><input type="image" src="images/fclose.gif" >娱乐八卦</a>
</ul>
<ul id="ba" class="hidden">
<li><input type="image" src="images/doc.gif">小学教材</li>
<li><input type="image" src="images/doc.gif">中学教材</li>
<li><input type="image" src="images/doc.gif">高中教材</li>
<li><input type="image" src="images/doc.gif">大学教材</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascritp特效－实用且必用的javascript代码
- javascript特效代码
- 常用javascript网页制作特效代码
- 【荐】一个漂亮的JavaScript图片特效代码
- 分享50个使你成为高级javascript开发者的jQuery的代码开发技巧 - 第二部分
- JavaScript 特效代码集
- javascript特效代码
- javascript 可控式透明特效实现代码
- Javascript代码实现图片玻璃特效
- JavaScript实现的一个图片溶解特效代码
- javascript打印-打印页面设置-打印预览代码,特定内容的部分打印技术
- 网页设计常用的Javascript特效代码
- JavaScript 滚动特效代码
- javascript: 加亮指定的文章内容关键字网页特效代码
- Javascript 特效代码
- Javascript 特效代码
- [特效代码][转贴]Javascript中最常用的55个经典技巧
- 简化 Ajax 和 Java 开发，第 1 部分: 用 JSP 标记文件动态生成 JavaScript 代码
- javascript特效：javascript+div三级导航下拉菜单代码|javascript教程|海乐网
- JavaScript实现漫天飞花及文字滚动特效的代码