首页 > 代码库 > javascript+css3简单的手风琴效果
javascript+css3简单的手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript+css3简单的手风琴效果</title>
<style>
#imageMenu{width:500px;height:200px;overflow:hidden;}
#imageMenu ul *{transition:all linear 0.2s;}
#imageMenu ul{width:800px;height:200px;padding: 0; margin: 0; list-style: none}
#imageMenu li{float:left;}
#imageMenu ul li a{width: 73px;height:110px;overflow:hidden;}
#imageMenu ul .big a {width:200px;}
#imageMenu li a{width: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="http://www.mamicode.com/#link1">Landscapes</a>
</li>
<li class="people big">
<a href="http://www.mamicode.com/#link1">People</a>
</li>
<li class="nature">
<a href="http://www.mamicode.com/#link1">Nature</a>
</li>
<li class="urban">
<a href="http://www.mamicode.com/#link1">Urban</a>
</li>
<li class="abstract">
<a href="http://www.mamicode.com/#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>
javascript+css3简单的手风琴效果