Authored by 陈峰

解决商品详情页单图的全屏浏览模式,和优化返回顶部按钮动画效果

... ... @@ -25,8 +25,13 @@
</div>
{{^}}
<div class="banner-top-single">
<a href={{url}}>
{{#if url}}
<a href="{{url}}">
<img class="img" src="{{image2 img w=450 h=600 q=60}}">
</a>
{{^}}
<img class="img" src="{{image2 img w=450 h=600 q=60}}">
</a>
{{/if}}
</div>
{{/if}}
... ...
... ... @@ -37,6 +37,9 @@ setTimeout(() => {
$('.banner-top').toggleClass('hover');
swiper.onResize();
})
$('.banner-top-single').click(function() {
$('.banner-top-single').toggleClass('hover');
})
}, 500);
... ... @@ -288,14 +291,12 @@ setTimeout(() => {
//加载详情页的返回顶部按钮并注册事件
$(document).scroll(function() {
if($(document).scrollTop() >= $(document).height() - $(window).height() - 20) {
if (!$('.float-top').hasClass('animation')) {
if($(document).scrollTop() >= $(document).height() - $(window).height() - 120) {
var top = $('.back-to-top').offset().top - $('.float-top').offset().top + ($('.back-to-top').height()-$('.float-top').height())/2;
var left = $('.back-to-top').offset().left - $('.float-top').offset().left;
$('.float-top').addClass('animation').css({
'transform': 'translate('+left+'px, '+top+'px) scale(0, 0)',
});
}
} else if ($('.product-detail').length && $(document).scrollTop() >= $('.product-detail').offset().top) {
if (!$('.float-top').hasClass('hover') || $('.float-top').hasClass('animation')) {
$('.float-top').addClass('hover').removeClass('animation').removeAttr('style');
... ...
... ... @@ -216,6 +216,29 @@ $basicBtnC: #eb0313;
margin-bottom: 30px;
width: 448px;
}
&.hover {
position: fixed;
width: 100%;
background-color: black;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
border: 0px;
z-index: 999;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
img {
margin-top: initial;
margin-bottom: initial;
width: 100%;
}
}
}
.banner-top {
... ...