标签：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>手风琴效果</title> <style type="text/css"> *{margin:0;padding:0;} body{background:#000;color:#fff;}/*color:#fff;字体颜色白色*/ #wrap{width:1182px;height:280px;background:#f00;margin:80px auto;border:6px solid #fff;overflow:hidden;} #wrap ul{width:3182px;} #wrap ul li{width:196px;height:280px;list-style:none;float:left;border-left:1px solid #fff;box-shadow:0px 0px 20px 5px rgba(0,0,0,0.4);transition:all 0.5s;position:relative;} #wrap ul li:nth-child(2){background:#90f;} #wrap ul li:nth-child(3){background:#6cf;} #wrap ul li:nth-child(4){background:#6c3;} #wrap ul li:nth-child(5){background:#f90;} #wrap ul li:nth-child(6){background:#cff;} #wrap ul:hover li{width:40px;} #wrap ul li:hover{width:980px;} .course{top:45px;left:20px;width:980px;position:absolute;} .course dl{float:left;width:210px;height:190px;border:1px solid #fff;margin:0 10px;box-shadow:0 0 20px #ccc;text-align:center;} .course dl dt{padding:5px;height:150px;} .course dl dd{font-weight:bold;background:rgba(0,0,0,0.5);line-height:30px;} #wrap ul li p{width:196px;height:280px;font-weight:bold;line-height:280px;position:absolute;text-align:center;transition:all 0.5s;background:rgba(0,0,0,0.5);} #wrap .title1{top:0px;left:0px;} #wrap .title2{bottom:0px;left:0px;} #wrap ul li:hover p{width:980px;height:40px;line-height:40px;} </style> </head> <body> <div id="wrap" > <ul id="ullist"> <li> <div class="course"> <dl> <dt><img src="img/c1.jpg"/></dt> <dd>网页制作</dd> </dl> <dl> <dt><img src="img/c2.jpg"/></dt> <dd>JAVA开发</dd> </dl> <dl> <dt><img src="img/c3.jpg"/></dt> <dd>IOS安卓</dd> </dl> <dl> <dt><img src="img/c4.jpg"/></dt> <dd>C++开发</dd> </dl> </div> <p class="title1">IT培训</p> <p class="title2">IT培训</p> </li> <li> <div class="course"> <dl> <dt><img src="img/z1.jpg"/></dt> <dd>Seo排名</dd> </dl> <dl> <dt><img src="img/z2.jpg"/></dt> <dd>微信营销</dd> </dl> <dl> <dt><img src="img/z3.png"/></dt> <dd>平面设计</dd> </dl> <dl> <dt><img src="img/z4.jpg"/></dt> <dd>淘宝美工</dd> </dl> </div> <p class="title1">技能培训</p> <p class="title2">技能培训</p> </li> <li> <div class="course"> <dl> <dt><img src="img/x1.png"/></dt> <dd>畜牧业</dd> </dl> <dl> <dt><img src="img/x2.png"/></dt> <dd>亲子教育</dd> </dl> <dl> <dt><img src="img/x3.png"/></dt> <dd>种植业</dd> </dl> <dl> <dt><img src="img/x4.jpg"/></dt> <dd>弹吉他</dd> </dl> </div> <p class="title1">兴趣培训</p> <p class="title2">兴趣培训</p> </li> <li> <div class="course"> <dl> <dt><img src="img/y1.jpg"/></dt> <dd>韩语</dd> </dl> <dl> <dt><img src="img/y2.jpg"/></dt> <dd>日语</dd> </dl> <dl> <dt><img src="img/y3.jpg"/></dt> <dd>泰语</dd> </dl> <dl> <dt><img src="img/y4.jpg"/></dt> <dd>粤语</dd> </dl> </div> <p class="title1">语言培训</p> <p class="title2">语言培训</p> </li> <li> <div class="course"> <dl> <dt><img src="img/q1.jpg"/></dt> <dd>天才宝宝</dd> </dl> <dl> <dt><img src="img/q2.jpg"/></dt> <dd>天才宝宝</dd> </dl> <dl> <dt><img src="img/q3.jpg"/></dt> <dd>天才宝宝</dd> </dl> <dl> <dt><img src="img/q4.jpg"/></dt> <dd>C++天才宝宝</dd> </dl> </div> <p class="title1">天才宝宝</p> <p class="title2">天才宝宝</p> </li> <li> <div class="course"> <dl> <dt><img src="img/b1.jpg"/></dt> <dd>初中英语</dd> </dl> <dl> <dt><img src="img/b2.jpg"/></dt> <dd>初中语文</dd> </dl> <dl> <dt><img src="img/b3.jpg"/></dt> <dd>英语补课</dd> </dl> <dl> <dt><img src="img/b4.jpg"/></dt> <dd>英语口语</dd> </dl> </div> <p class="title1">小班提升</p> <p class="title2">小班提升</p> </li> </ul> </div> <audio src="music/1.mp3" id="audio" ></audio> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" > $(function(){ var audioDom = document.getElementById("audio");//不能用$(#"audio")取得对象，该对象在jquery中没有play()方法 $("#ullist").find("li").hover(function(){ var index = $(this).index() + 1;//jquery index()方法返回指定元素相对于其他指定元素的 index 位置。 audioDom.src="music/"+index+".mp3"; audioDom.play(); }); }); </script> </body> </html>
代码来源于潭州教育免费视频教程
标签：
原文地址：http://www.cnblogs.com/tianyang01/p/5615238.html
