การทำซ้ำล้อบางอย่างที่เลือกอาจไม่ใช่เรื่องเลวร้าย บล็อกของแอรอนได้เพิ่มเมนูที่ถูกระงับซึ่งดูเหมือนจะสูงมาก แม้ว่าเคล็ดลับแบบนี้ไม่ใช่ครั้งแรกที่ฉันได้เห็นมัน แต่ฉันไม่เคยเขียนด้วยตัวเอง วันนี้ฉันจะเขียนเกี่ยวกับฟังก์ชั่นนี้อย่างเลือก ต่อไปนี้เป็นกระบวนการพัฒนาของล้อนี้ซึ่งสามารถถือได้ว่าเป็นกระบวนการวิเคราะห์และการดำเนินการของเอกสารข้อกำหนด
ที่อยู่ตัวอย่าง: http://sandbox.runjs.cn/show/to8wdmuy
ดาวน์โหลดซอร์สโค้ด: https://github.com/bjtqti/floatmenu
ขั้นตอนแรกคือการสร้างโครงสร้างส่วน DOM:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> AppCarrier </title>
<link rel = "stylesheet" href = "menu.css">
</head>
<body>
<div id = "เนื้อหา">
<h1 id = "test1"> test1 </h1>
<p> อดีตอาจเจ็บ แต่คุณสามารถเรียกใช้จากมันหรือเรียนรู้จากมัน </p>
<p> อดีตเจ็บปวด แต่คุณอาจหลบหนีหรือเติบโตจากมัน </p>
<p> คนหนึ่งพบกับชะตากรรมของเขาบนถนนที่เขาใช้เพื่อหลีกเลี่ยง </p>
<p> บ่อยครั้งที่จะหลบหนีโชคชะตา แต่พบโดยไม่คาดคิด </p>
<p> กฎมีความหมายว่าจะถูกทำลาย </p>
<p> กฎควรเสีย </p>
<p> ปีอาจทำให้ผิวมีริ้วรอย แต่เพื่อเลิกความกระตือรือร้นริ้วรอยวิญญาณ </p>
<p> เวลาผ่านไปทำให้ใบหน้าแก่ แต่ความหลงใหลไม่ได้ทำให้หัวใจเหี่ยวเฉาอีกต่อไป </p>
<h1 id = "test2"> test2 </h1>
<p> โดยการฝึกฝนความรู้ที่คุณได้เรียนรู้อย่างต่อเนื่องคุณสามารถเชี่ยวชาญได้อย่างแท้จริง </p>
<p> ใช้ชีวิตทุกวันอย่างเต็มที่ </p>
<p> สนุกทุกวัน </p>
<p> จับตาดูดวงดาวและเท้าของคุณบนพื้นดิน </p>
<p> มีความทะเยอทะยานอันสูงส่งและทำให้เท้าของคุณอยู่บนพื้น </p>
<p> พร้อมเสมอสำหรับการผจญภัยที่ไม่คาดคิด </p>
<p> เตรียมพร้อมที่จะเริ่มการผจญภัยที่ไม่คาดคิดได้ตลอดเวลา </p>
<p> ชีวิตเต็มไปด้วยความผิดหวัง คุณไม่สามารถอยู่กับสิ่งต่าง ๆ ได้ คุณต้องเดินต่อไป </p>
<p> ชีวิตมักจะไม่มีความสุขอย่าดื่มด่ำกับอดีตและก้าวไปข้างหน้าอย่างกล้าหาญ </p>
<p> ฉันเป็นวิญญาณอิสระ ฉันไม่สามารถถูกขังอยู่ในกรงได้ </p>
<p> จิตวิญญาณของฉันฟรีและไม่ควรผูกพัน </p>
<p> บางครั้งหัวใจเห็นสิ่งที่มองไม่เห็นด้วยตา </p>
<p> ผู้ที่มองไม่เห็นสามารถรู้สึกได้ </p>
<p> สิ่งที่เรียบง่ายเป็นสิ่งที่พิเศษที่สุดและมีเพียงคนฉลาดเท่านั้นที่สามารถมองเห็นได้ </p>
<p> สิ่งที่ธรรมดาที่สุดก็เป็นสิ่งที่พิเศษที่สุดและมีเพียงคนฉลาดเท่านั้นที่เข้าใจ </p>
<h1 id = "test3"> test3 </h1>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
<p> กี่ xxxxxx </p>
</div>
<div id = "menubar">
<p> ซ่อน </p>
<ul>
<li> <a href = "#test1"> test1 </a> </li>
<li> <a href = "#test2"> test2 </a> </li>
<li> <a href = "#test3"> test3 </a> </li>
<li> <a href = "#test4"> test4 </a> </li>
</ul>
</div>
</body>
<script src = "menu.js"> </script>
</html>
ขั้นตอนที่สองคือการเตรียมไฟล์ CSS:
การคัดลอกรหัสมีดังนี้:
ul {
ประเภทรายการประเภท: ไม่มี;
-
A {
การตกแต่งข้อความ: ไม่มี;
-
/*พื้นที่เนื้อหาบทความ*/
#เนื้อหา {
ความกว้าง: 400px;
มาร์จิ้น: 0 อัตโนมัติ;
ขนาดตัวอักษร: 2EM;
-
/*เมนูลอยตัว*/
.เมนู {
ตำแหน่ง: แก้ไข;
ด้านบน: 20%;
ขวา: 0;
ความกว้าง: 200px;
เส้นขอบ: 1px ของแข็งสีเทา;
แนวชายแดน: 5px;
-
.MENU LI {
ความสูง: 2em;
ความสูงของสาย: 2EM;
-
.สีแดง {
สี: สีแดง;
-
.ซ่อน {
แสดง: ไม่มี;
-
/*ซ่อนเมนูลอยตัว*/
.Slidein {
แปลง: Translate3d (202px, 0, 0);
ช่วงการเปลี่ยนภาพ: .5S;
-
/*แสดงเมนูลอย*/
.Slideout {
แปลง: Translate3d (0, 0, 0);
ช่วงการเปลี่ยนภาพ: .5S;
-
. คงที่ {
สี:#007aff;
TEXT-ALIGN: CENTER;
-
/*แสดงลูกบอลลอย*/
.toshow {
แสดง: บล็อก;
ความกว้าง: 4.8EM;
ความสูง: 2em;
ความสูงของสาย: 2EM;
แนวชายแดน: .5EM;
เส้นขอบ: 1px ของแข็งสีเทา;
แปลง: แปล 3D (-5EM, 0, 0);
ช่วงเวลาการเปลี่ยนแปลง: 1s;
-
ขั้นตอนที่สามเริ่มเขียนรหัส JS:
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น (doc) {
// รวบรวมตำแหน่งลิงก์สำหรับแต่ละบท
var pos = []
// คอลเลกชันของรายการในเมนู
links = doc.getElementsByTagname ('a')
// รวบรวมชื่อของบท
titles = doc.getElementsByTagname ('H1')
// เมนูแขวน
เมนู = doc.getElementById ('menubar')
// การเลือกปัจจุบัน
currentItem = null;
// เพิ่มสไตล์สีแดง
var addClass = function (องค์ประกอบ) {
CurplantItem && curplantItem.RemoveAttribute ('คลาส');
element.setAttribute ('คลาส', 'สีแดง');
currentItem = องค์ประกอบ;
-
// หน้าเว็บมีการเปิดตัวสูง:
getScrolltop = function () {
return math.ceil (document.body.scrolltop) +1;
-
// คำนวณตำแหน่งเลื่อน
startCroll = function () {
var scrolltop = getScrolltop ()
len = titles.length,
i = 0;
// บทความ 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
AddClass (ลิงก์ [0]);
กลับ;
-
// อันสุดท้าย
if (scrolltop> = pos [len-1]) {
AddClass (ลิงก์ [LEN-1]);
กลับ;
-
//กลาง
สำหรับ (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
AddClass (ลิงก์ [i]);
หยุดพัก;
-
-
-
// คลิกที่ลิงค์ในรายการเพื่อเปลี่ยนสี
menu.onclick = function (e) {
var target = e.target || E.Srelement;
if (target.nodename.toLowerCase () === 'a') {
// รายการแสดงสถานะรายการ
AddClass (เป้าหมาย);
กลับ;
-
if (target.nodename.toLowerCase () === 'P') {
if (target.className == 'Static') {
// ซ่อนเมนู
this.className = 'เมนูสไลด์อิน';
settimeout (function () {
Target.className = 'Static Toshow';
target.innerhtml = 'show';
}, 1,000);
}อื่น{
// แสดงเมนู
Target.className = 'Static';
target.innerhtml = 'ซ่อน';
this.className = 'เมนูสไลด์เอาท์';
-
-
-
// คำนวณตำแหน่งเริ่มต้นของแต่ละบท
var ln = titles.length;
ในขณะที่ (-ln> -1) {
//titles [len.len.offsetparent.offSettop = 0;
pos.unshift (ชื่อ [ln] .offsettop);
-
startCroll ();
// เลื่อน
window.onscroll = function () {
StartsCroll ()
-
})(เอกสาร);
วิเคราะห์:
1. ใช้การกระโดดอัตโนมัติไปยังส่วนที่ระบุ
ขั้นตอนนี้สามารถทำได้โดยใช้ฟังก์ชันสมอของแท็ก <a> เนื่องจาก HTML5 ไม่รองรับแอตทริบิวต์ชื่อในอนาคต (HTML5 ไม่รองรับระบุชื่อของสมอ) พิจารณาใช้ ID เพื่อกระโดด
2. ระบุบทใดในเนื้อหาทางด้านซ้ายเป็นของรายการในเมนูลอย
ขั้นตอนนี้เป็นจุดที่ยากมาวิเคราะห์สั้น ๆ :
2.1 กรณีแรกคือคลิกที่รายการเมนูด้วยตนเอง นี่เป็นเรื่องง่ายเพียงแค่ระบุองค์ประกอบที่คลิก
2.2 ในกรณีที่สองเลื่อนหรือลากแถบเลื่อนผ่านปุ่ม Middle Mouse ในเวลานี้คุณต้องเชื่อมโยงเนื้อหาทางด้านซ้ายและรายการเมนูทางด้านขวา นี่เป็นส่วนที่ยากที่สุด พิจารณากลยุทธ์ในการดำเนินการทีละขั้นตอนเริ่มต้นด้วยง่ายและยากและแต่ละคนก็ผ่าน
2.2.1 ก่อนรวบรวมความสูงพิกัดขององค์ประกอบชื่อ นั่นคือความสูงในแนวตั้งของแท็ก H1 ทั้งหมด บันทึกอาร์เรย์ 1.
2.2.2 รวบรวมองค์ประกอบ A ในรายการเมนูและเก็บไว้ในอาร์เรย์ 2
2.2.3 ฟังเหตุการณ์สกรอลล์และพิจารณาว่ารายการเมนูใดที่เนื้อหาปัจจุบันเป็นของ
เมื่อทำขั้นตอนเดียวขอแนะนำให้วาดรูปภาพบนกระดาษต้นฉบับ:
A1
-
* A2
-
-
* A3
-
-
-
* A4
-
ทุกครั้งที่คุณเลื่อนคุณจะกำหนดช่วงระยะที่การเลื่อนปัจจุบันคือ ถ้าเป็น 0 ถึง A1 มันเป็นบทที่ 1, A1 ถึง A2 มันคือบทที่ 2 และอื่น ๆ
เกี่ยวกับความสูงของตำแหน่งขององค์ประกอบฉันเพียงแค่ใช้ Element.OffSettop เพื่อรับที่นี่ อาจมีปัญหาความเข้ากันได้ หากคุณใช้ jQuery ควรเป็น $ ('องค์ประกอบ'). Offset (). ด้านบน,
ในทำนองเดียวกันฉันใช้ document.body.scrolltop เพื่อรับความสูงของแถบเลื่อน ถ้ามันถูกแทนที่ด้วย jQuery ควรเป็น $ (หน้าต่าง). scrolltop ();
จุดประสงค์ของการวาดคือการสร้างปัญหาที่เป็นนามธรรมช่วยให้เราคิดและค้นหากฎ บางทีมันอาจจะดูสูงขึ้นโดยเรียกมันว่า "การสร้างแบบจำลอง"
ควรเน้นว่าความสัมพันธ์ในอาเรย์ 1 และอาเรย์ 2 ควรสอดคล้องกันทีละคน ตัวอย่างเช่น <a href = "#h1"> คือ <h1 id = "h1">
2.3 ในกรณีที่สามตัวบ่งชี้สถานะเมนูเมื่อคุณป้อนหน้าโดยตรง ตัวอย่างเช่นหากคุณป้อนผ่านที่อยู่เช่น index.html#H3 ควรเน้น H3 ในเมนู
3. ใช้การแสดงผลและซ่อนภาพเคลื่อนไหวของเมนูลอยตัว
3.1 ขั้นตอนนี้ควรจะค่อนข้างง่ายคุณสามารถพิจารณาทำมันก่อน เพียงใช้คุณสมบัติ tramsform ของ CSS3 มันง่ายและมีประสิทธิภาพ หากคุณข้ามเบราว์เซอร์โปรดเข้ากันได้
โปรดทราบว่าการแปลง: Translate3D (แกน x, แกน y, แกน z); การใช้ 3D สามารถใช้การเร่งความเร็วฮาร์ดแวร์เพื่อเพิ่มเอฟเฟกต์ภาพเคลื่อนไหว แต่การใช้พลังงานจะเพิ่มขึ้นดังนั้นจึงใช้ประโยชน์ได้ดี! พารามิเตอร์แรกคือการควบคุมทิศทางซ้ายและขวา ถ้ามันเป็นบวกมันหมายถึงการย้ายไปทางขวาและถ้ามันเป็นลบมันหมายถึงการย้ายไปทางซ้าย นี่ไม่ได้เข้มงวดจริงๆ ในความเป็นจริงควรพิจารณาขึ้นอยู่กับจุดอ้างอิง ตัวอย่างเช่นเมื่อ X พิกัดขององค์ประกอบคือ 0 ดังนั้นค่าของ x จะเพิ่มขึ้นไปทางขวาและลดลงไปทางซ้ายและ 0 จะถูกรีเซ็ต
หลังจากการวิเคราะห์รหัสจะถูกเขียน ไม่มีอะไรจะพูดเกี่ยวกับเรื่องนี้ เพลิดเพลินไปกับความรู้สึกทางดนตรีที่เกิดขึ้นจากการพิมพ์แป้นพิมพ์
หลังจากเขียนดูตัวอย่างคลิกเมนูข้ามไปที่บทที่ระบุและคลิกรายการเพื่อเปลี่ยนสีแดงรีเฟรชหน้าปัจจุบันและการแสดงผลการพึ่งพานั้นถูกต้อง เลื่อนล้อเลื่อนและรายการเมนูจะเปลี่ยนไปตามการเปลี่ยนแปลงของเนื้อหา ลากแถบเลื่อน เช่นเดียวกัน สุดท้ายคลิกเพื่อซ่อนเร้นเมนูคลิกเพื่อแสดงและเมนูเลื่อนออก สิ่งนี้จะเสร็จสิ้นฟังก์ชั่นการระงับ
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่าคุณจะชอบมัน