其实大体的原理是就是，让他们的宽度和长度一样，鼠标移动上之后，鼠标所在的图片拉长，并且将下面的图片遮住，依次这样轮番 具体的逻辑就是先找到这些图片信息，然后给个事件鼠标移上或是移除就改变图片的长度 （1）先建个div放这些图片 1 2 3 4 5 6 7 8 9 <div id="box"> <!--外面的框架--> <ul> <li><img src="l1.jpg" /></li> <!--图片--> <li><img src="l2.jpg" /></li> <li><img src="l3.jpg" /></li> <li><img src="l4.jpg"/></li> <li><img src="l5.jpg"/></li> </ul> </div> （2）给这些div编写样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <style type="text/css"> *{ margin:0px auto; padding:0px; } ul { list-style: none; /*去掉前面的点*/ } div { width: 1150px; /*div的长宽高，还有超出隐藏*/ height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; <br> } div ul { width: 1300px; } </style> （3）js代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 <script type="text/javascript"> //找人 var box = document.getElementById("box"); var ul = box.children[0]; var lis = ul.children; //循环遍历 lis 绑定背景图 for (var i = 0; i < lis.length; i++) { //给每一个li注册鼠标经过事件 鼠标经过后要排他 lis[i].onmouseover = function () { //干掉所有人 让所有人的宽度 渐渐地 变为100 for (var j = 0; j < lis.length; j++) { animate(lis[j], {"width": 100}); } //留下我自己 让我的宽度 渐渐地 变为800 animate(this, {"width": 800}); }; } //鼠标离开box 所有的li宽度 渐渐地 变为240 box.onmouseout = function () { for (var i = 0; i < lis.length; i++) { animate(lis[i], {"width": 240}); } }; //jQuery中有animate动画函数，下面是实现的原理，虽然没有jQ的强大，但是基本的效果实现还是没有问题的 function animate(obj, json) { clearInterval(obj.timer); obj.timer = setInterval(function () { //先假设 这一次执行完 所有的属性都到达目标了 var flag = true; for (var k in json) { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; //位置 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; console.log("代码还在运行"); if (leader != target) { flag = false;//告诉标记 当前这个属性还没到达 } } //如果此时仍然为true 就说明真的都到达了 if (flag) { clearInterval(obj.timer); } }, 15); } //全部属性都到达目标值才能清空 function getStyle(obj, attr) { if (window.getComputedStyle) { //获得全部的style样式 console.log(window.getComputedStyle(obj, null)); return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } } </script> 这样，手风琴特效就好了，js代码还是有不明白的地方，自己可以在屡一下
其实大体的原理是就是，让他们的宽度和长度一样，鼠标移动上之后，鼠标所在的图片拉长，并且将下面的图片遮住，依次这样轮番
具体的逻辑就是先找到这些图片信息，然后给个事件鼠标移上或是移除就改变图片的长度
（1）先建个div放这些图片
|
1
2
3
4
5
6
7
8
9
|
<div id="box"> <!--外面的框架--> <ul> <li><img src="l1.jpg" /></li> <!--图片--> <li><img src="l2.jpg" /></li> <li><img src="l3.jpg" /></li> <li><img src="l4.jpg"/></li> <li><img src="l5.jpg"/></li> </ul></div> |
（2）给这些div编写样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<style type="text/css"> *{ margin:0px auto; padding:0px; } ul { list-style: none; /*去掉前面的点*/ } div { 1150px; /*div的长宽高，还有超出隐藏*/ height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { 240px; height: 400px; float: left; <br> } div ul { 1300px; }</style> |
（3）js代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<script type="text/javascript"> //找人 var box = document.getElementById("box"); var ul = box.children[0]; var lis = ul.children; //循环遍历 lis 绑定背景图 for (var i = 0; i < lis.length; i++) { //给每一个li注册鼠标经过事件 鼠标经过后要排他 lis[i].onmouseover = function () { //干掉所有人 让所有人的宽度 渐渐地 变为100 for (var j = 0; j < lis.length; j++) { animate(lis[j], {"width": 100}); } //留下我自己 让我的宽度 渐渐地 变为800 animate(this, {"width": 800}); }; } //鼠标离开box 所有的li宽度 渐渐地 变为240 box.onmouseout = function () { for (var i = 0; i < lis.length; i++) { animate(lis[i], {"width": 240}); } }; //jQuery中有animate动画函数，下面是实现的原理，虽然没有jQ的强大，但是基本的效果实现还是没有问题的 function animate(obj, json) { clearInterval(obj.timer); obj.timer = setInterval(function () { //先假设 这一次执行完 所有的属性都到达目标了 var flag = true; for (var k in json) { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; //位置 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; console.log("代码还在运行"); if (leader != target) { flag = false;//告诉标记 当前这个属性还没到达 } } //如果此时仍然为true 就说明真的都到达了 if (flag) { clearInterval(obj.timer); } }, 15); } //全部属性都到达目标值才能清空 function getStyle(obj, attr) { if (window.getComputedStyle) { //获得全部的style样式 console.log(window.getComputedStyle(obj, null)); return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } }</script> |
这样，手风琴特效就好了，js代码还是有不明白的地方，自己可以在屡一下