論源碼的重要性
視屏中有很東西我們做不出來又不知道那里錯(cuò)了，能不能把源碼也提供一下哦
Chuihunzhe
2017-07-19
3 回答
舉報(bào)
0/150
提交
取消
2017-07-26
/*返回頂部的html結(jié)構(gòu)*/
<div class="mask"></div><div id="sidebar"> ? ?
<ul> ? ? ? ?
<li><a href="">item1</a></li> ? ? ? ?
<li><a href="">item2</a></li> ? ? ? ?
<li><a href="">item3</a></li> ? ? ? ?
<li><a href="">item4</a></li> ? ? ? ?
<li><a href="">item5</a></li> ? ?
</ul>
</div><button class="back-to-top">返回頂部</button>
2017-07-26
/css代碼/
#sidebar{ ? ?
position: fixed; ??
?top:0; ? ?
right: -300px; ? ?
bottom: 0; ??
?width: 300px; ?
?background: #333; ? ?
color: #fff; ??
?padding: 20px 0; ??
?transition: right 0.5s;
}
#sidebar ul{ ? ?
list-style: none; ? ?
padding: 0; ? ?
margin: 0;
}
#sidebar ul a{ ??
?color: #fff; ? ?
display: inline-block; ??
?padding: 10px 30px ; ??
?width: 100%;
}
#sidebar ul a:hover{ ? ?background: #444;}
.mask{ ? ?
position: fixed; ??
?top:0; ? ?right: 0; ? ?
bottom: 0; ??
?left:0; ??
?background: rgba(0,0,0,0.2); ??
?display: none;
}
.back-to-top{ ??
?position: fixed; ??
?bottom: 30px; ? ?
right: 30px; ? ?
border: 1px solid #888; ??
?border-radius: 5px;
}
2017-07-26
/*js代碼*/
;$(function () { ? ?'use strict'; ? ?var sidebar=$('#sidebar'), ? ? ??
?sidebar_trigger=$('#sidebar-trigger'), ? ? ? ?
mask = $('.mask'), ? ? ? ?
back_to_top = $('.back-to-top'); ??
?function show_sidebar() {
? ? ? ?mask.fadeIn(); ? ? ? ?
sidebar.css({'right':'0'}); ? ?
} ? ?
function hide_sidebar() {
? ? ? ?mask.fadeOut(); ? ? ? ?
sidebar.css({'right':-sidebar.width()}); ??
?} ?
?function back() { ? ? ? ?
$('html,body').animate({ ? ? ? ? ? ?'scrollTop':'0' ? ? ? ?},800); ? ?}
sidebar_trigger.on('click',show_sidebar); ??
?mask.on('click',hide_sidebar); ? ?
back_to_top.on('click',back); ??
?$(window).on('scroll',function () { ? ? ??
if($(window).scrollTop() > 0){
? ? ? ? ? back_to_top.css({ ? ? ? ? ? ? ? 'display':'block' ? ? ? ? ? }); ? ? ??
}
else{
? ? ? ? ? back_to_top.fadeOut(); ? ? ??
}
? ?}); ? ?
$(window).trigger('scroll');});