首页 > 代码库 > jQuery镇张缩小动画
jQuery镇张缩小动画
可用于标题的制作如：
<style>
*{
margin: 0;
padding: 0;
}
#zhuda{
margin: 50px auto ;
width: 500px;
background-color: #1B1B1B;
border: 2px #1B1B1B ;
}
#zhuda ul li {
list-style: none;
}
#zhuda ul li div {
display: none;
height: 500px;
background-color:#0075b0;
}
p{
margin-top: 2px;
width: 500px;
height:50px;
background-color:#f9f9f9;
border:2px #ac2925;
}
</style>
<script src=http://www.mamicode.com/"jequery2.js"></script>
</head>
<body style="background-color:#333333">
<div id="zhuda" >
<ul id="ul">
<li>
<p class="p1"> </p>
<div id="zhuda_div1" class="heiwa"></div>
</li>
<li>
<p class="p2"> </p>
<div id="zhuda_div2" class="heiwa"></div>
</li>
<li>
<p class="p3"> </p>
<div id="zhuda_di3" class="heiwa"></div>
</li>
</ul>
</div>
<script>
$(‘.p1‘).click(function(){
$("#zhuda_di3").slideUp();
$("#zhuda_div2").slideUp();
$("#zhuda_div1").slideToggle();
});
$(‘.p2‘).click(function(){
$("#zhuda_di3").slideUp();
$("#zhuda_div1").slideUp();
$("#zhuda_div2").slideToggle();
});
$(‘.p3‘).click(function(){
$("#zhuda_div1").slideUp();
$("#zhuda_div2").slideUp();
$("#zhuda_di3").slideToggle();
});
</script>
参数解释：
slideUp() //表示收回目标
slideDown() //表示伸展目标
slideToggle(); //会记录你点的次数点击第一次伸展目标 点击第二次收回目标
jQuery镇张缩小动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。