{Day26} 小公主訂單網頁嘗試集＿第二十六集＿實作伍天

2022 iThome 鐵人賽

DAY 26

Modern Web

訂單網頁嘗試集系列第 26 篇

14th鐵人賽網頁教學網頁設計

icetong

2022-10-11 20:55:38

593 瀏覽

分享至

喔某！竟然邁入網頁30天的最後階段！
剩下五天！！！
歡呼吧！各位！！
雖然剛經過今年最後一個連假，不過還有四天又有週末囉！！！

今日新功能：
增加在頁尾回到頂端的按鈕！

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>
  
<div class="title">
<h1>歡迎光臨小公主網頁嘗試集！</h1>
<h2>訂單網頁嘗試集＿實作</h2>
<link rel="stylesheet" href="homepage.css">

</div>

<body>
  <Marquee direction=right behavior="altemate" >小公主海底世界盛大開幕！！</Marquee>
 
    <ul class="drop-down-menu">
        <li><a href="https://ithelp.ithome.com.tw/users/20151423">關於小公主</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/articles/10291522">30天鐵人賽目標計畫</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/users/20151423/ironman/5260">30天鐵人賽網頁連結</a>
        </li>
        <li><a href="./day25.html">小公主販售ㄉ海底世界</a>
        </li>
    </ul>
<h3>welcome to little_princess_web</h3>
<h3>這裡是小公主，小公主的訂購網頁似乎真的產不出來</h3>
<h3>但目前還是有建立起這個酷東西</h3>
<br>
<img src="./photo/IMG_4003拷貝.jpg" alt="me">

<!-- 回到頂端按鈕 start -->
<script>
    //<![CDATA[
    (function () {
    $("body").append("<img id='goTopButton' style='display: none; z-index: 5; cursor: pointer;' title='回到頂端'/>");
    var img = "http://1.bp.blogspot.com/-zMfrIkyhlVs/Uh7FePoKU8I/AAAAAAAAHnA/WA0H_vbWAWc/s1600/go-top.png",
    locatioin = 5/9, // 按鈕出現在螢幕的高度
    right = 1, // 距離右邊 px 值
    opacity = 1, // 透明度
    speed = 500, // 捲動速度
    $button = $("#goTopButton"),
    $body = $(document),
    $win = $(window);
    $button.attr("src", img);
    $button.on({
    mouseover: function() {$button.css("opacity", 1);},
    mouseout: function() {$button.css("opacity", opacity);},
    click: function() {$("html, body").animate({scrollTop: 0}, speed);}
    });
    window.goTopMove = function () {
    var scrollH = $body.scrollTop(),
    winH = $win.height(),
    css = {"top": winH * locatioin + "px", "position": "fixed", "right": right, "opacity": opacity};
    if(scrollH > 15) {
    $button.css(css);
    $button.fadeIn("slow");
    } else {
    $button.fadeOut("slow");
    }
    };
    $win.on({
    scroll: function() {goTopMove();},
    resize: function() {goTopMove();}
    });
    } )();
    //]]>
    </script>
    <!-- 回到頂端按鈕 end, Design by WFU BLOG -->

</body>
</html>