Js 手风琴效果 

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         * {
 8             margin: 0px;
 9             padding: 0px;
10         }
11     </style>
12 </head>
13 <body>
14     <div style="width: 750px; height: 400px; position: relative; margin: 50px auto; overflow: hidden;">
15         <div id="dd1" style="background-image: url(img/1.jpg); background-size: contain; width: 600px; height: 100%; position:absolute; float: left; left: 0%;transition:1s;" onmouseover="bian(1)"></div>
16         <div id="dd2" style="background-image: url(img/2.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 30px;transition:1s;" onmouseover="bian(2)"></div>
17         <div id="dd3" style="background-image: url(img/3.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 60px;transition:1s;" onmouseover="bian(3)"></div>
18         <div id="dd4" style="background-image: url(img/4.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 90px;transition:1s;" onmouseover="bian(4)"></div>
19         <div id="dd5" style="background-image: url(img/5.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 120px;transition:1s;" onmouseover="bian(5)"></div>
20         <div id="dd6" style="background-image: url(img/6.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 150px;transition:1s;" onmouseover="bian(6)"></div>
21     </div>
22 
23 </body>
24 </html>
25 <script type="text/javascript">
26     dd1 = document.getElementById("dd1");
27     dd2 = document.getElementById("dd2");
28     dd3 = document.getElementById("dd3");
29     dd4 = document.getElementById("dd4");
30     dd5 = document.getElementById("dd5");
31     dd6 = document.getElementById("dd6");
32     function bian(n) {
33         if (n == 1)
34         {
35             dd1.style.left = "0px";
36             dd2.style.left = "600px";
37             dd3.style.left = "630px";
38             dd4.style.left = "660px";
39             dd5.style.left = "690px";
40             dd6.style.left = "720px";
41         }
42         if (n == 2) {
43             dd1.style.left = "0px";
44             dd2.style.left = "30px";
45             dd3.style.left = "630px";
46             dd4.style.left = "660px";
47             dd5.style.left = "690px";
48             dd6.style.left = "720px";
49         }
50         if (n == 3) {
51             dd1.style.left = "0px";
52             dd2.style.left = "30px";
53             dd3.style.left = "60px";
54             dd4.style.left = "660px";
55             dd5.style.left = "690px";
56             dd6.style.left = "720px";
57         }
58         if (n == 4) {
59             dd1.style.left = "0px";
60             dd2.style.left = "30px";
61             dd3.style.left = "60px";
62             dd4.style.left = "90px";
63             dd5.style.left = "690px";
64             dd6.style.left = "720px";
65         }
66         if (n == 5) {
67             dd1.style.left = "0px";
68             dd2.style.left = "30px";
69             dd3.style.left = "60px";
70             dd4.style.left = "90px";
71             dd5.style.left = "120px";
72             dd6.style.left = "720px";
73         }
74         if (n == 6) {
75             dd1.style.left = "0px";
76             dd2.style.left = "30px";
77             dd3.style.left = "60px";
78             dd4.style.left = "90px";
79             dd5.style.left = "120px";
80             dd6.style.left = "150px";
81         }
82     }
83 </script>

 

posted @ 2017-01-12 10:43  浆糊033  阅读(135)  评论(0)    收藏  举报