其实大体的原理是就是，让他们的宽度和长度一样，鼠标移动上之后，鼠标所在的图片拉长，并且将下面的图片遮住，依次这样轮番具体的逻辑就是先找到这些图片信息，然后给个事件鼠标移上或是移除就改变图片的长度（1）先建个div放这些图片123456789（2）给这些div编写样式1234567891011121314151617181920212223（3）js代码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677这样，手风琴特效就好了，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 { 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代码还是有不明白的地方，自己可以在屡一下