如果有人想要學習Vue.js的寫法，可以參考以下文章!
大家看到上面這張圖的右下角就是回到頂端的浮動按鈕，
這個按鈕是用jQuery寫的~
就算完全沒有寫過程式的朋友也可以輕鬆學會唷!!
你要先到你的Blogger後台的「主題」裡面點選「編輯HTML」
然後在裡面找到<head>和</head>，
並且新增以下語法~
<!--Start:插入jQuery-->
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
<!--End:插入jQuery-->
由於這個特效會使用到jQuery，因此我們必須匯入jQuery語法
之後再加入下面這些語法~
<script type="text/javascript">
$(function() {
/* 按下GoTop按鈕時的事件 */
$('#gotop').click(function(){
$('html,body').animate({
scrollTop: 0 }, 'slow'); /* 返回到最頂上 */
return false;
});
/* 偵測卷軸滑動時，往下滑超過400px就讓GoTop按鈕出現 */
$(window).scroll(function()
{
if ( $(this).scrollTop()
> 400){
$('#gotop').fadeIn();
} else {
$('#gotop').fadeOut();
}
});
});
</script>
之後在程式裡面找到<body>和</body>
然後把
<div id='gotop'><center>^</center></div> 塞進去~
<div id='gotop'><center>^</center></div> 塞進去~
「^ 」就會是等下顯示在右下角的符號。
再次在<head>和</head>裡面加上下面這些CSS語法，
這些語法是幫助你設計你按鈕的文字顏色以及背景的!!
<style type='text/css'>
#gotop {
position:fixed;
z-index:90;
right:30px;
bottom:30px;
display:none;
width:60px;
font-size: 30px;
height:60px;
color:#000000;
background:#FFD2D2 ;
line-height:60px;
border-radius:50%;
transition:all 0.5s;
text-align: center;
box-shadow: 0 2px 5px 0
rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
#gotop :hover{
width:60px;
font-size: 30px;
height:60px;
border-radius:50%;
background:#FFB5B5 ;
}
</style>
----------重要意思解釋---------
width:60px;
font-size: 30px; //文字大小
height:60px;
color:#000000;
background:#FFD2D2 ; //背景顏色
#gotop :hover 裡面的 background:#FFB5B5 //是指游標移到按鈕上時的顏色~
沒有留言:
張貼留言
喜歡我的文章嗎? 喜歡的話可以留言回應我喔! ^^