文章内容详情

jquery简单的实现手风琴效果


实现代码如下： 


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴效果</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
list-style-type: none;
}
div{
position: relative;
margin: 0 auto;
top: 88px;
width: 980px;
height: 200px;
overflow: hidden;
}
ul li{
float: left;
position: relative;
width: 100px;
z-index: 1;
}
</style>
<body bgcolor="#000">
<div id="filter">
<ul>
<li style="width:580px"><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul>
<div>
<script src="js/jq.js"></script>
<script>
$(function(){
$('#filter').find('li').on('mouseover',function(){
$(this).stop(true,true).animate({"width":"580px"},300).css('z-index','9').siblings().stop(true,true).animate({"width":"100px"},300);
});
});
</script>
</body>
</html>



      阿喀交