1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>Examples</title>
7 <meta name="description" content="">
8 <meta name="keywords" content="">
9 <link href="" rel="stylesheet">
10 <style type="text/css">
11
12 #qwer{
13 width: 900px;
14 margin: 0 auto;
15 margin-top: 250px;
16 }
17 #qwer li{
18 float:left;
19 width:150px;
20 height:150px;
21 border:1px solid black;
22 }
23 li img{
24 float:left;
25 opacity:0.2;
26 cursor: pointer;
27 width: 140px;
28 height: 140px;
29 margin: 5px 5px 5px 5px;
30 }
31 li.current img{
32 opacity:1;
33 }
34
35 </style>
36 </head>
37 <body>
38 <ul id="qwer">
39 <li><img src="1.JPG"/></li>
40 <li><img src="1.JPG"/></li>
41 <li><img src="1.JPG"/></li>
42 <li><img src="1.JPG"/></li>
43 <li><img src="1.JPG"/></li>
44 </ul>
45 <script type="text/javascript">
46 window.onload=function(){
47 var qwe=document.getElementsByTagName("li");
48 for (var i=0;i<qwe.length;i++){
49 qwe[i].onmouseover=function(){
50 this.className="current";
51 }
52 qwe[i].onmouseout=function(){
53 this.className="";
54 }
55 }
56
57 }
58 </script>
59 </body>
60 </html>
时间： 2025-01-14 00:08:50