最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习。
明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始。
菜鸟起飞的机会都没有,那就尴尬了.
纯属练习:
效果如图:
html:
<ul class="wrap"><li class="checked"><span>选项1</span><div>1</div></li><li><span>选项2</span><div>2</div></li><li><span>选项3</span><div>3</div></li><li><span>选项4</span><div>4</div></li><li><span>选项5</span><div>5</div></li></ul>
css:
ul,li,div,span{margin: 0;padding: 0;}li{list-style: none;}span{display: block;border-bottom:1px solid black;background-color: orange;}.wrap{width: 400px;height: 500px;border: 1px solid black;}.wrap li{width: 400px;height: 40px;overflow: hidden;}ul li.checked{height: 340px;}.wrap li span{height: 39px;line-height: 39px;text-indent: 20px;}.wrap li div{height: 300px;line-height: 300px;text-align: center;font-size: 50px;}
jquery:
$(function(){$("ul li span").mouseover(function(){$(this).parent().animate({height:340},500);$(this).parent().siblings().animate({height:40},500);})})