Day22——網頁互動實作

2024 iThome 鐵人賽

佛心分享-IT 人自學之術

JavaScript自學分享系列第 22 篇

16th鐵人賽

姐姐恩

2024-10-13 21:08:19

59 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

網頁互動實作

一、畫面卷軸控制

產生卷軸的CSS設計條件:

方框尺寸固定。
overflow要適當的設定。(auto:由瀏覽器判斷是否新增卷軸、scroll:無論如何新增卷軸)

程式碼練習&註解筆記:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>CSS/JavaScript 控制卷軸</title>
        <script>
            var box;
            window.onload=function(){
                box=document.getElementById("box");
                //HTNL Element中的 ScrollLeft (控制橫向卷軸)和 ScrollTop (控制直向卷軸)屬性。
                //box.scrollTop=30; //控制卷軸位置
                window.setInterval(scroll,50);
            };
            function scroll(){
                box.scrollTop++; //使卷軸自動捲動，可以搭配overflow:hidden，可使方框內資料自動捲動。
            }
        </script>
        <style type="text/css">
            .box{
                border: 1px solid #000000; /*邊線*/
                width:200px;
                height:820px;  /*使框框高度不會自動延展*/
                overflow: scroll; /*當資料量超過框框的尺寸時，藏起來，且有卷軸*/
            }
        </style>
    </head>
    <body>
        <div id="box" class="box">
            <div>This  is line 1.</div>
            <div>This  is line 2.</div>
            <div>This  is line 3.</div>
            <div>This  is line 4.</div>
            <div>This  is line 5.</div>
            <div>This  is line 6.</div>
            <div>This  is line 7.</div>
            <div>This  is line 8.</div>
        </div>
    </body>
</html>

二、Javascript 聚焦放大動畫特效

程式碼練習&註解筆記:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>CSS/JavaScript 控制卷軸</title>
        <script>
            function show(){
              var box = document.getElementById("box");
              //取得當前標籤設定
              var styles = window.getComputedStyle(box);
              var size = styles.getPropertyValue("width"); //return 寬度 "50px"
              size = parseInt(size);
              //產生一個放大的動畫特效
              var animeId = window.setInterval(function(){
                //設定停止條件
                if(size>=200){
                  //停止動畫
                  window.clearInterval(animeId);
                  return;
                }
                //先調整數值
                size++;　//可用於調整動畫速度
                //把數值放進box的CSS設定中，產生實際效果
                box.style.width = size+"px";
                box.style.height = size+"px";
              }, 10); //排程:每0.02秒執行一次我們提供的函式。(可用於調整動畫速度)
              alert(size);
            }
        </script>
        <style type="text/css">
            .box{
                width:50px;
                height:50px;
                background-color: red;
                position: fixed;
                top: 0px;
                right: 0px;
            }
            
        </style>
    </head>
    <body>
        <div id="box" class="box" onclick="show();">
            
        </div>
    </body>
</html>

學習資源:
網頁前端工程專題：超有用，網頁元件/畫面捲軸控制 (Scrollbar) By 彭彭
 網頁前端工程進階：Javascript 聚焦放大動畫特效教學 By 彭彭