码迷,mamicode.com
首页 > 其他好文 > 详细

博客园侧边栏收缩

时间:2019-09-24 12:17:55      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:nbsp   window   func   lock   nim   line   侧边栏   var   center   

#fry_append {
    right: 1%;
    width: 46px;
    top: 5%;
    opacity: 0.37; 
    position: fixed;
    z-index: 98;
    background-color: #fff;
    font-size: 12px;
    margin: 10px 0 0;
    padding: 5px;
    border: 1px solid #55895b;
    border-radius: 5px;
    float: right;

}
#fry_append div:first-of-type {
    margin-top: 5px;
}

#fry_append div {
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    color: #CC9966;
}

 

<!-- 三、页面展开动画-->
<div id="fry_append">
 
<div id="fry_sidebar">侧边栏</div>

</div>
<!-- 三、页面展开动画-->
<script type="text/javascript">
function my_unfold(){
    width_main=$(#main).width();
    height_main=$(#main).height();
    time=1000;
    function unfoldLeft(width,height,time) {
        $(#main).animate({
            width: 0%,
            height: 0%,
            opacity: 0
        }, 0,linear);
        $(#main).animate({
            width: ++width_main,
            height: ++height_main,
            opacity: 1
        }, time,linear);
    }
    unfoldLeft(width_main,height_main,time);
}
</script>
<!--END 七、外部js-->
<!--END 三、页面展开动画-->
<!-- 二、回到顶部和展开侧边栏 -->
<script type="text/javascript">
$(#main).append(<div id="fry_append"><hr/><div id="fry_sidebar">侧边栏</div></div>);
$(#fry_sidebar).click(function(){
    $(#mainContent .forFlow).css({margin-right:0px});
    if($(#sideBar).css(display)==none){
        var width=$(window).width()*0.93;
        var width1=$(window).width()*0.97-280;
        var width2=($(window).width()-280)/2;
        if(width*0.35<230){
                $(#mainContent).css({display:none});
                $(#sideBar).css({display:block,width:280,margin-right:width2+px});
        }else{
                $(#sideBar).css({display:block,width:250px,margin:none,float:right});
                $(#mainContent).css({display:block,width:width1+px});
        }
    }
    else{
        $(#sideBar).css({display:none});
        $(#mainContent).css({display:block,width:100%});
    }
});

</script>

 

博客园侧边栏收缩

标签:nbsp   window   func   lock   nim   line   侧边栏   var   center   

原文地址:https://www.cnblogs.com/cainiao-chuanqi/p/11577360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!