Difference between revisions of "Team:SEU/Footer"

Line 6: Line 6:
 
</div>
 
</div>
 
</foot>
 
</foot>
 +
.t-right-bar {
 +
    position: fixed;
 +
    right: 0;
 +
    bottom: 10%;
 +
    width: 48px;
 +
    height: 48px;
 +
    z-index: 1000;
 +
    cursor: pointer;
 +
}
 +
 +
.t-right-bar > div {
 +
    float: left;
 +
    height: 36px;
 +
    margin-bottom: 1px;
 +
    border-radius: 20px 0 0 20px;
 +
    color: #fff;
 +
    padding-left: 100%;
 +
    clear: both;
 +
    white-space: nowrap;
 +
    font-size: 13px;
 +
    line-height: 36px;
 +
    font-style: normal;
 +
    background-color: #aaa;
 +
    background-repeat: no-repeat;
 +
    background-position: 12px center;
 +
    transition: transform .2s cubic-bezier(.215, .61, .355, 1), padding .2s cubic-bezier(.215, .61, .355, 1), margin .2s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.215, .61, .355, 1)
 +
}
 +
 +
.t-right-bar > div.active, .t-right-bar > div:hover {
 +
    transform: translateX(-100%);
 +
    padding-left: 45px;
 +
    padding-right: 10px;
 +
    margin-left: 48px;
 +
    background-color: #23a0e1;
 +
    text-decoration: none;
 +
    color: #fff
 +
}
 +
 +
.t-right-bar .t-bar-support {
 +
    background-image: url(../img/icon/support_1.svg);  //按钮图标
 +
    background-position: 14px center;
 +
}
 +
 +
.t-right-bar .t-bar-rocket {
 +
    background-image: url(../img/icon/rocket_1.svg);  //按钮图标
 +
    background-position: 19px center;
 +
}
 +
 +
.t-bar-support a{
 +
    color: white;
 +
}
 +
 +
.t-bar-support a:hover{
 +
    color: #fff
 +
}
 +
 +
  $(".t-right-bar").hide();
 +
    $(function () {
 +
        $(window).scroll(function () {
 +
            if ($(window).scrollTop() > 100) {
 +
                $(".t-right-bar").fadeIn(500);
 +
            }
 +
            else {
 +
                $(".t-right-bar").fadeOut(500);
 +
            }
 +
        });
 +
 +
        $("#back-to-top").click(function () {
 +
            $('body,html').animate({scrollTop: 0}, 100);
 +
            return false;
 +
        });
 +
    });

Revision as of 11:24, 29 August 2019

{{#tag:html| <foot>

<a href="index.php?a=support&c=html">Next Page</a>
Return to Top

</foot> .t-right-bar { 

   position: fixed;
   right: 0;
   bottom: 10%;
   width: 48px;
   height: 48px;
   z-index: 1000;
   cursor: pointer;

}

.t-right-bar > div { 

   float: left;
   height: 36px;
   margin-bottom: 1px;
   border-radius: 20px 0 0 20px;
   color: #fff;
   padding-left: 100%;
   clear: both;
   white-space: nowrap;
   font-size: 13px;
   line-height: 36px;
   font-style: normal;
   background-color: #aaa;
   background-repeat: no-repeat;
   background-position: 12px center;
   transition: transform .2s cubic-bezier(.215, .61, .355, 1), padding .2s cubic-bezier(.215, .61, .355, 1), margin .2s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.215, .61, .355, 1)

} 

.t-right-bar > div.active, .t-right-bar > div:hover {
   transform: translateX(-100%);
   padding-left: 45px;
   padding-right: 10px;
   margin-left: 48px;
   background-color: #23a0e1;
   text-decoration: none;
   color: #fff

}

.t-right-bar .t-bar-support { 

   background-image: url(../img/icon/support_1.svg);   //按钮图标
   background-position: 14px center;

}

.t-right-bar .t-bar-rocket { 

   background-image: url(../img/icon/rocket_1.svg);  //按钮图标
   background-position: 19px center;

}

.t-bar-support a{ 

   color: white;

}

.t-bar-support a:hover{ 

   color: #fff

} 

  $(".t-right-bar").hide();
   $(function () {
       $(window).scroll(function () {
           if ($(window).scrollTop() > 100) {
               $(".t-right-bar").fadeIn(500);
           }
           else {
               $(".t-right-bar").fadeOut(500);
           }
       });

       $("#back-to-top").click(function () {
           $('body,html').animate({scrollTop: 0}, 100);
           return false;
       });
   });