博客园侧边栏收缩

Posted 2022-11-28 cainiao-chuanqi

#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>