试验CSS效果时，顺便试试这样的效果，居然可以实现类似的手风琴效果，只是不是具体控制，因而没有动画效果！纯属娱乐，毫无技术含量！
<html> <head> <title></title> <style type="text/css"> body{margin: 0;padding: 0;} table{margin:20px auto;width:730px; hieght:200px;border: #F00 solid 2px;padding: 3px;} table td{width: 50px;height: 200px;} .on{width: 280px;} </style> </head> <body> <table > <tr> <td class="on" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r1.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r2.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r3.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r4.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r5.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r6.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r1.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r4.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r6.jpg"></td> <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r5.jpg"></td> </tr> </table> <script type="text/javascript"> function addHandler(element, eventType, eventHandler){ element.addEventListener ? element.addEventListener(eventType, eventHandler, false) : element.attachEvent ? element.attachEvent(("on" + eventType), eventHandler) : (element["on" + eventType] = eventHandler); } function each(arr, callback, thisp){ //traverse array if(arr.forEach){ //check Array function arr.forEach(callback, thisp); }else{ for(var i=0, len=arr.length; i < len; ++i){ callback.call(thisp, arr[i], i, arr); } } } addHandler(window, "load", function(){ var getTag = function(tag){ return document.getElementsByTagName(tag); }; var images = getTag("td"); for(var i = 0, len = images.length; i < len; i++){ addHandler(images[i], "mouseover", function(event){ event = window.event || event; var target = event.target || event.srcElement; each(images, function(o, i){ o.className = ""; }); target.className = "on"; }); } }); </script> </body> </html>
复制代码后就可以直接看效果！太简单了就不说了哈