主頁 > 前端設計 > 利用jQuery制作一個普通網頁需要注意多少細節之電梯導航

利用jQuery制作一個普通網頁需要注意多少細節之電梯導航

2021-08-11 07:40:40 前端設計

目錄

一丶在相應部分顯示或者隱藏電梯導航

二丶點擊電梯導航頁面可以滾動到相應內容區域

三丶頁面滾動到某個內容區域，左側電梯導航隨之變為選中狀態

節流閥（互斥鎖）

HTML部分代碼

jQuery代碼

我們在瀏覽網站時，最常見到的網頁型別就是像某寶一樣的網頁，看似簡陋普通的網頁，在撰寫程式時，需要我們注意的細節卻很多，比如下面這個選截頁面，我們大致分為ABCDE五個部分

這篇文章主要講一下關于DE兩個部分的代碼，即電梯導航，

什么是電梯導航呢？電梯導航就是像上述圖片中最右端懸浮著的一個框，里面是分類，并且點擊某一個分類后，頁面會自動跳轉到對應內容部分，

意思是，我在D里點一個選項，頁面就會自動跳轉到E部分對應我點擊選項的內容，就像我點擊“猜你喜歡”，那么主頁面就會跳轉到這部分內容，

那么現在我們把這個要求大致分為三個小任務

  1. 在相應部分顯示或者隱藏電梯導航
  2. 點擊電梯導航頁面可以滾動到相應內容區域
  3. 頁面滾動到某個內容區域，左側電梯導航隨之變為選中狀態

在此之前我們先來簡單認識一下待會兒會用到的代碼：

  • var a = $(" ").offset().top; （offset是獲取當前部分相對的偏移尺寸，加上top即相對頂部的偏移）
  • $(document).scrollTop() （scrollTop表示內容部分被頁面卷去的頭部，即上面超出頁面的部分）
  • $("body, html").stop().animate({ scrollTop: }, function() { }); （animate scrollTop 給頁面影片滾動效果）
  • $(" ").each(function(i, ele) { （each遍歷匹配每一個元素，回傳 false 可用于及早停止回圈）

現在我們來做第一個任務：

一丶在相應部分顯示或者隱藏電梯導航

（如果卷去的頭部尺寸 大于等于 當前部分相對頁面頂部的偏移尺寸，就讓電梯導航欄出現 否則電梯導航欄消失）

注意，這里在宣告函式前呼叫了函式，如果不呼叫，那么重繪頁面后電梯導航欄就不會出現，

    // 1.顯示隱藏電梯導航
    var toolTop = $(".recommend").offset().top;//offset是獲取當前部分相對的偏移位置
    toggleTool();//呼叫toggleTool()

    function toggleTool() {
		//scrollTop表示內容部分被頁面卷去的頭部，即上面超出頁面的部分
		//如果卷去的頭部尺寸 大于等于 當前部分相對頁面頂部的偏移尺寸，
		//就讓電梯導航欄出現  否則電梯導航欄消失
         if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
//scroll表示滾動
    $(window).scroll(function() {
        toggleTool();

第二個任務：

二丶點擊電梯導航頁面可以滾動到相應內容區域

即當我們在電梯導航欄點擊一個目標后，去到相應的板塊，因此在這里我們借用.offset().top來獲得相應的位置

并且在這里最后一行我們多做了一步，是為了讓點擊后的電梯導航欄目標添加上被選中的效果

 $(".fixedtool li").click(function() {
        flag = false;
        //console.log($(this).index());
        // 當我們每次點擊小li 就需要計算出頁面要去往的位置 
        // 選出對應索引號的內容區的盒子 計算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 頁面影片滾動效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 點擊之后，讓當前的小li 添加current 類名 ，姐妹移除current類名
        $(this).addClass("current").siblings().removeClass();
    })

第三個任務：

三丶頁面滾動到某個內容區域，左側電梯導航隨之變為選中狀態

即，我們沒有通過電梯導航欄跳轉，而是自行向下滑動頁面，那么就需要讓電梯導航欄也隨之改變到相應的類別

        if (flag) {
            $(".floor .w").each(function(i, ele) {
				
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }

在這里為了頁面的通順和流暢，我們再引入 節流閥 這個概念，因為當我們點擊電梯導航欄時，就會觸發 $(window).scroll(function()這個函式，導致每點擊一次就從頭回圈一次，

節流閥（互斥鎖）

那么我們應該怎樣使用呢？很簡單，只要在前面加上

var flag = true;

即可，

那么現在我們來對照著看一下這部分的節選HTML函代碼和jQuery代碼

HTML部分代碼

<div class="floor">
        <div class="jiadian w">
            <div class="box-hd">
                <h3>家用電器</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</a>|</li>
                        <li><a href="#">大家電</a>|</li>
                        <li><a href="#">生活電器</a>|</li>
                        <li><a href="#">廚房電器</a>|</li>
                        <li><a href="#">個護健康</a>|</li>
                        <li><a href="#">應季電器</a>|</li>
                        <li><a href="#">空氣/凈水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣凈化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul> -->
            </div>
        </div>
        <div class="shouji w">
            <div class="box-hd">
                <h3>手機通訊</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</a>|</li>
                        <li><a href="#">大家電</a>|</li>
                        <li><a href="#">生活電器</a>|</li>
                        <li><a href="#">廚房電器</a>|</li>
                        <li><a href="#">個護健康</a>|</li>
                        <li><a href="#">應季電器</a>|</li>
                        <li><a href="#">空氣/凈水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣凈化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul> -->
            </div>
        </div>
        <div class="diannao w">
            <div class="box-hd">
                <h3>電腦辦公</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</a>|</li>
                        <li><a href="#">大家電</a>|</li>
                        <li><a href="#">生活電器</a>|</li>
                        <li><a href="#">廚房電器</a>|</li>
                        <li><a href="#">個護健康</a>|</li>
                        <li><a href="#">應季電器</a>|</li>
                        <li><a href="#">空氣/凈水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣凈化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul> -->
            </div>
        </div>
        <div class="jiaju w">
            <div class="box-hd">
                <h3>精品家具</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</a>|</li>
                        <li><a href="#">大家電</a>|</li>
                        <li><a href="#">生活電器</a>|</li>
                        <li><a href="#">廚房電器</a>|</li>
                        <li><a href="#">個護健康</a>|</li>
                        <li><a href="#">應季電器</a>|</li>
                        <li><a href="#">空氣/凈水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣凈化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 樓層區 end -->
	<!-- 固定電梯導航 -->
	<div class="fixedtool">
	    <ul>
	        <li class="current">家用電器</li>
	        <li>手機通訊</li>
	        <li>電腦辦公</li>
	        <li>精品家具</li>
	
	    </ul>
	</div>

jQuery代碼

$(function() {
    // 當我們點擊了小li 此時不需要執行 頁面滾動事件里面的 li 的背景選擇 添加 current
    // 節流閥  互斥鎖 
    var flag = true;
	
	
    // 1.顯示隱藏電梯導航
    var toolTop = $(".recommend").offset().top;//offset是獲取當前部分相對的偏移位置
    //toggleTool();//呼叫toggleTool()

    function toggleTool() {
		//scrollTop表示內容部分被頁面卷去的頭部，即上面超出頁面的部分
		//如果卷去的頭部尺寸 大于等于 當前部分相對頁面頂部的偏移尺寸，
		//就讓電梯導航欄出現  否則電梯導航欄消失
         if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
		//scroll表示滾動
    $(window).scroll(function() {
        toggleTool();
		
		// 2. 點擊電梯導航頁面可以滾動到相應內容區域
		$(".fixedtool li").click(function() {
		    flag = false;
		    //console.log($(this).index());
		    // 當我們每次點擊小li 就需要計算出頁面要去往的位置 
		    // 選出對應索引號的內容區的盒子 計算它的.offset().top
		    var current = $(".floor .w").eq($(this).index()).offset().top;
		    // 頁面影片滾動效果
		    $("body, html").stop().animate({
		        scrollTop: current
		    }, function() {
		        flag = true;
		    });
		    // 點擊之后，讓當前的小li 添加current 類名 ，姐妹移除current類名
		    $(this).addClass("current").siblings().removeClass();
		})
		
		
        // 3. 頁面滾動到某個內容區域，左側電梯導航小li相應添加和洗掉current類名


        if (flag) {
            $(".floor .w").each(function(i, ele) {
				
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    //console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }



    });

})

看一下效果

在這里我們最后再插入一個小功能（其實是剛才忘記寫了）回到頂部！

其實這個功能非常的簡單，只需要幾行代碼就可以搞定

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Wellfancy</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: lightgreen;
            margin: 400px auto;
        }
    </style>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>


<body>
    <div class="back">回傳頂部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 回傳頂部
            $(".back").click(function() {
                $("body, html").stop().animate({
                    scrollTop: 0
                });
            })
        })
    </script>
</body>

</html>

這樣就可以做出一個帶有影片效果的回傳頂部啦！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292971.html

標籤：其他

上一篇：JavaScript基礎語法（一）

下一篇：Node.js 模塊加載及包的管理

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂