作者:热情风吟_181 | 来源:互联网 | 2023-08-07 12:41
模仿JD返回頂部功用,增加在肯定高度內隱蔽功用。返回頂部的前端完成。涵蓋的內容重要:前端款式(html排版),展現結果(CSS3動畫),以及展現結果劇本的編寫(javascript
模仿JD返回頂部功用,增加在肯定高度內隱蔽功用。
返回頂部的前端完成。涵蓋的內容重要: 前端款式(html排版),展現結果(CSS3 動畫),以及展現結果劇本的編寫(Javascript編寫)
HTML
background-repeat: no-repeat;
}
.jd-toolbar-tab .tab-text {
width: 62px;
height: 35px;
line-height: 35px;
color: rgb(255, 255, 255);
text-align: center;
font-family: "微軟雅黑";
position: absolute;
z-index: 1;
left: 35px;
top: 0px;
background-color: rgb(122, 110, 110);
border-radius: 3px 0px 0px 3px;
/*移出動畫結果*/
transition: left 0.3s ease-in-out 0.1s;
}
.jd-toolbar-tab-hover {
background-color: #c81623;
}
.jd-toolbar-tab-hover .tab-ico {
background-color: #c81623;
}
.jd-toolbar-tab-hover .tab-text {
left: -60px;
background: #c81623;
}
.jd-toolbar-tab-hover .tab-texts {
left: -108px;
background: #c81623;
}
/* 依據本身的背景圖,修正背景位置。*/
.jd-tab-vip .tab-ico {
background-position: -2px -45px;
}
.jd-tab-follow .tab-ico {
background-position: -3px -86px;
}
.jd-tab-top .tab-ico {
background-position: -4px -170px;
}
.jd-tab-vip img {
margin-top: 1px;
}
JS
返回頂部增加顯現隱蔽功用,可依據需求變動顯現隱蔽結果。
$(function(){
//右邊牢固欄
var $jdToolbar = $(".jd-global-toolbar .jd-toolbar-tab");
$jdToolbar.hover(function(){
//鼠標移入增加class
$(this).addClass("jd-toolbar-tab-hover");
},function(){
//鼠標移除假如含有class,則移除
if($(this).hasClass("jd-toolbar-tab-hover")){
$(this).removeClass("jd-toolbar-tab-hover");
}
});
//返回頂部在肯定高度內隱蔽
$(window).scroll(function(){
var docHe= $(window).scrollTop();
var hideH = 600;
if (docHe $("#returnTop").slideUp(1000);
}else{
$("#returnTop").slideDown(1000);
}
})
//右邊牢固欄,返回頂部
$("#returnTop").click(function () {
var speed=200;//滑動的速率
//增加返回頂部的動畫結果
$('body,html').animate({ scrollTop: 0 }, speed);
return false;
});
})
若有題目,迎接人人交換斧正。QQ:1357912285