javascript部分特效及代码

1.使用javascript进行按钮的切换特效（这里是以图片按钮进行，图片放在images文件夹中，页面在同级目录中。）

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> 切换效果 </title>
 5   <script type="text/javascript">
 6    function changeleft(){
 7    var left1=document.getElementById("left1");
 8    var left2=document.getElementById("left2");
 9    var right1=document.getElementById("right1");
10    var right2=document.getElementById("right2");
11    var end1=document.getElementById("end1");
12    var end2=document.getElementById("end2");
13     
14     left1.style.display="block";
15     left2.style.display="none";
16     right1.style.display="block";
17     right2.style.display="none";
18     end1.style.display="block";
19     end2.style.display="none";
20    }
21    function changeright(){
22    var left1=document.getElementById("left1");
23    var left2=document.getElementById("left2");
24    var right1=document.getElementById("right1");
25    var right2=document.getElementById("right2");
26    var end1=document.getElementById("end1");
27    var end2=document.getElementById("end2");   
28     left1.style.display="none";
29     left2.style.display="block";
30     right2.style.display="block";
31     right1.style.display="none";
32     end1.style.display="none";
33     end2.style.display="block";
34    }
35   </script>
36  </head>
37 
38  <body>
39   <table cellpadding="0" cellspacing="0">
40   <tr>
41     <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>
42     <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>
43   </tr>
44   <tr>
45     <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>
46   </tr>
47   </table>
48  </body>
49 </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>

posted @ 2014-05-18 23:34 淡无心阅读(640) 评论(0) 编辑收藏举报

淡无心

javascript部分特效及代码

公告