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>
</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; }); });