69.js--點擊事件等比例彈出層div

 

 

html:
<!--彈出層導航欄-->
<div class="public-nav-content">
<ul>
<li><a href=""><i></i><b>方案設計</b></a></li>
<li><a href=""><i></i><b>爲我報價</b></a></li>
<li><a href=""><i></i><b>我要驗房</b></a></li>
<li><a href=""><i></i><b>老房裝修</b></a></li>
<li><a href=""><i></i><b>精裝房改造</b></a></li>
</ul>
</div>
css:
/*彈出層導航欄*/

.public-nav-content{
width: 0;/
height:0;/
padding-top: 1rem;
background: url("../image/icon/icon-nav.png") no-repeat;
background-size: 100% 100%;
position: fixed;
right:0;
top:0;
z-index:9999998;
}
.public-nav-content img{
width:100%;/
height: 100%;/
}
.public-nav-content ul{
margin:0 0.29rem;
border-bottom:0.01rem solid #D9D9D9;
display: none;/
}
.public-nav-content ul li{
text-align: center;
display: inline-block;
float:left;
margin-top: 0.3rem;/
margin-right:0.15rem;/
}

js:
$(".public-nav-content").click(function(event) {    $(".public-nav-content").animate({        height:'0%',        width:'0%'    });    $(".public-nav-content ul").hide();    $(".icon-lists").hide();    $(".icon-list").css("display","inline-block");    event.stopPropagation();});$(".icon-list").click(function(){    $(this).hide();    $(".icon-lists").css("display","inline-block");    $(".public-nav-content").show();    $(".public-nav-content ul").show();    $(".public-nav-content").animate({        height:'100%',        width:'100%',    });    $('.public-nav-content ul').animate({        width: '98%',        height:'15%',    })    $(".public-nav-content ul li").animate({        width: '15%',    })});$(".icon-lists").click(function(){    $(this).hide();    $(".icon-list").css("display","inline-block");    $(".public-nav-content").animate({        height:'0%',        width:'0%'    });    $(".public-nav-content ul").hide();});
相關文章
相關標籤/搜索