代码都来自w3cfuns
第一个,#号后为注释代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery+Css3实现手风琴</title>
<style>
body{padding:0;margin:0;font:normal 14px/24px "\5FAE\8F6F\96C5\9ED1";color:#333;} # 设置body得样式
ul,li{padding:0;margin:0} # ul li的外边距和内边距为0,防止浏览器加载默认样式
img{border:none;vertical-align:top;} # 设置img得样式为没有边框,向上对齐
li{list-style:none;} # 设置li得属性
.box{width:600px;height:360px;margin:20px auto;position:relative;overflow:hidden;} # box的高度360px,宽度600px, 外边距上下20px,居中,相对定位,隐藏掉溢出
.box ul li{width:400px;height:360px;display:block;position:absolute;top:0;transition:left .5s ease-out;} # box里得ul和li的属性,关键是transition这个css3得属性带来得宽度得渐变效果
.box ul li:nth-child(1){left:0;background:#AAA;} # 给li的父元素得子元素设置左边距离和背景
.box ul li:nth-child(2){left:100px;background:#BBB;}
.box ul li:nth-child(3){left:200px;background:#CCC;}
.box ul li:nth-child(4){left:300px;background:#DDD;}
.box ul li:nth-child(5){left:400px;background:#EEE;}
.box ul li:nth-child(6){left:500px;background:#F3F3F3;}
</style>
</head>
<body>
<div class="box" id="box">
<ul>
<li c="0" d="0"></li>
<li c="50px" d="350px"></li> # 这里得c和d是用来当鼠标移入区域,li left的值
<li c="100px" d="400px"></li> # 因为要实现渐变效果,区域收缩或者扩大时,宽度时由left控制的
<li c="150px" d="450px"></li> # c是往前收缩宽度,d是往后收缩得宽度
<li c="200px" d="500px"></li>
<li c="250px" d="550px"></li>
</ul>
</div>
</body>
</html>
<script src='http://static.w3cfuns.com/js/jQuery/library/jquery-1.7.2.min.js?v=20121228'></script>
<script>
var adMarquee;
$(function(){
Marquee()
$("#box").mouseout(function(){
$("#box ul li").each(function(){
$(this).attr("style","")
})
})
})
function Marquee(){
$("#box li").mouseover(function(){ # 当鼠标移入li区域时,li区域后面得li都根据d值往后收缩
$(this).nextAll("li").each(function() {
$(this).css("left",$(this).attr("d"))
});
$(this).prevAll("li").each(function() { # li区域前面的li都根据c值往前收缩
$(this).css("left",$(this).attr("c"))
});
$(this).css("left",$(this).attr("c")) # 当前li区域也根据C值往钱收缩。
})
}
</script>
第二个
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title> new document </title>
<style>
.accordion{width:300px;height:360px;font-size:14px;line-height:2.2em;margin:30px auto;padding:10px;list-style-type:none;border:1px solid #CCC;cursor:default;}
.accordion h3{margin:0 0 10px;font-size:16px;text-indent:2em;background-color:#F2F2F2;}
.accordion li div{height:0;padding:0 20px;overflow:hidden;-moz-transition:height 0.5s ease;-webkit-transition:height 0.5s ease;transition:height 0.5s ease;} # 使用transition属性在改变时有动画效果
.accordion:hover li:first-child div{height:0;} # 当鼠标移入accordion时让第一个li的高度变成0
.accordion li:first-child div,
.accordion li:first-child:hover div,
.accordion li:hover div{ # 默认第一个li或者鼠标移入了一个li时把里面得div高度设置为200px
height:200px;
}
</style>
</head>
<body>
<ul class="accordion">
<li>
<h3>寄李儋元锡</h3>
<div>
去年花里逢君别,今日花开已一年。 <br />
世事茫茫难自料,春愁黯黯独成眠。 <br />
身多疾病思田里,邑有流亡愧俸钱。 <br />
闻道欲来相问讯,西楼望月几回圆。 <br />
</div>
</li>
<li>
<h3>虞美人</h3>
<div>
春花秋月何时了,往事知多少。小楼昨夜又东风,故国不堪回首月明中。<br />
雕栏玉砌应犹在,只是朱颜改。问君能有几多愁,恰似一江春水向东流。
</div>
</li>
<li>
<h3>小重山</h3>
<div>
昨夜寒蛩不住鸣。惊回千里梦,已三更。起来独自绕阶行。人悄悄,帘外月胧明。<br />
白首为功名。旧山松竹老,阻归程。欲将心事付瑶琴。知音少,弦断有谁听?
</div>
</li>
<li>
<h3>江城子</h3>
<div>
十年生死两茫茫,不思量,自难忘。千里孤坟,无处话凄凉。纵使相逢应不识,尘满面,鬓如霜。<br />
夜来幽梦忽还乡,小轩窗,正梳妆。相顾无言,惟有泪千行。料得年年肠断处,明月夜,短松冈。
</div>
</li>
</ul>
</body>
</html>
这个代码实现全部基于CSS,算是很简介的了,原理时利用鼠标悬停,默认全部得高度都是0,除了第一个。当有鼠标去悬停时,全部得高度变为0,然后鼠标在那个li上悬停,就把那个高度改成200px。
第三个
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title> new document </title>
<style>
.accordion{width:300px;height:360px;font-size:14px;line-height:2.2em;margin:30px auto;padding:10px;list-style-type:none;border:1px solid #CCC;cursor:default;}
.accordion h3{margin:0 0 10px;font-size:16px;text-indent:2em;background-color:#F2F2F2;}
.accordion li div{height:0;padding:0 20px;overflow:hidden;-moz-transition:height 0.5s ease;-webkit-transition:height 0.5s ease;transition:height 0.5s ease;}
.accordion .now div{
height:200px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<ul class="accordion">
<li class="now">
<h3>寄李儋元锡</h3>
<div>
去年花里逢君别,今日花开已一年。 <br />
世事茫茫难自料,春愁黯黯独成眠。 <br />
身多疾病思田里,邑有流亡愧俸钱。 <br />
闻道欲来相问讯,西楼望月几回圆。 <br />
</div>
</li>
<li>
<h3>虞美人</h3>
<div>
春花秋月何时了,往事知多少。小楼昨夜又东风,故国不堪回首月明中。<br />
雕栏玉砌应犹在,只是朱颜改。问君能有几多愁,恰似一江春水向东流。
</div>
</li>
<li>
<h3>小重山</h3>
<div>
昨夜寒蛩不住鸣。惊回千里梦,已三更。起来独自绕阶行。人悄悄,帘外月胧明。<br />
白首为功名。旧山松竹老,阻归程。欲将心事付瑶琴。知音少,弦断有谁听?
</div>
</li>
<li>
<h3>江城子</h3>
<div>
十年生死两茫茫,不思量,自难忘。千里孤坟,无处话凄凉。纵使相逢应不识,尘满面,鬓如霜。<br />
夜来幽梦忽还乡,小轩窗,正梳妆。相顾无言,惟有泪千行。料得年年肠断处,明月夜,短松冈。
</div>
</li>
</ul>
<script type="text/javascript">
$('.accordion').on('mouseenter', 'li', function(event) {
$(this).addClass('now').siblings('.now').removeClass('now')
});
</script>
</body>
</html>
这个代码就是把第二个得悬停触发改成了jquery来写。当鼠标悬停时,给鼠标悬停得li加上now属性,然后把其他带有now属性的元素的得now属性都去掉。