javascript+css3简单的手风琴效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>javascript+css3简单的手风琴效果</title>
<style>
#imageMenu{500px;height:200px;overflow:hidden;}
#imageMenu ul *{transition:all linear 0.2s;}
#imageMenu ul{800px;height:200px;padding: 0; margin: 0; list-style: none}
#imageMenu li{float:left;}
#imageMenu ul li a{ 73px;height:110px;overflow:hidden;}
#imageMenu ul .big a {200px;}
#imageMenu li a{98px;height:200px;display:block;text-indent:9999px;border-right:2px solid #fff;cursor:pointer;overflow:hidden;}
#imageMenu .landscapes a{background:url(http://img.funshion.com/pictures/media/list/109/251/109251_200_110.jpg?1405409131) no-repeat;}
#imageMenu .people a{background:url(http://img.funshion.com/pictures/media/list/109/562/109562_200_110.jpg?1386039195) no-repeat;}
#imageMenu .nature a{background:url(http://img.funshion.com/pictures/media/list/101/158/101158_200_110.jpg?1405677722) no-repeat;}
#imageMenu .urban a{background:url(http://img.funshion.com/pictures/media/list/103/960/103960_200_110.jpg?1395209765) no-repeat;}
#imageMenu .abstract a{background:url(http://img.funshion.com/pictures/media/list/106/935/106935_200_280.jpg?1405186860) no-repeat;}
</style>
</head>
<body>
<div id="imageMenu">
    <ul>
        <li class="landscapes">
            <a href="#link1">Landscapes</a>
        </li>
        <li class="people big">
            <a href="#link1">People</a>
        </li>
        <li class="nature">
            <a href="#link1">Nature</a>
        </li>
        <li class="urban">
            <a href="#link1">Urban</a>
        </li>
        <li class="abstract">
            <a href="#link1">Abstract</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
function bind(ele, evType, callback){
    if(typeof ele.addEventListener === 'function'){
        ele.addEventListener(evType, callback, false);
    }else if(typeof ele.attechEvent === 'function'){
        ele.attechEvent('on'+evType, callback);
    }
}

function mouseOverHander(ev, lists){
    // var imageMenu = document.getElementById('imageMenu');
    // var lists = imageMenu.getElementsByTagName('li');
    lists = lists || [];
    var target = ev.target || ev.srcElement;

    for(var i = 0; i < lists.length; i++){
        //简单的正则表达式有' big'(这里匹配空格和big)这个class 替换成''
        lists[i].className = lists[i].className.replace(/ ?big/g, '');
    }

    //如果当前的元素不是li找他的父节点，当冒泡到body时候退出
    while(target.tagName.toLowerCase() != 'li' && target.tagName.toLowerCase() != 'body'){
        target = target.parentNode;
    }

    target.className += ' big';
}

window.onload = function(){
    var imageMenu = document.getElementById('imageMenu');
    var lists = imageMenu.getElementsByTagName('li');

    for(var i = 0, l = lists.length; i < l; i++){
        bind(lists[i], 'mouseover', function(e){
            mouseOverHander(e, lists);
        });
    }
}
</script>
</body>
</html>