ฉันไม่สามารถเพิ่มความสนใจใน CSS ได้เมื่อเร็ว ๆ นี้เพราะฉันไม่พอใจเกี่ยวกับ Picture Carousels และไม่ได้เรียนรู้ที่ดีดังนั้นฉันจึงใช้เวลาในการทำความคุ้นเคยกับ JS จากนั้นฉันก็เดินไปที่ถนนแบล็กและเขียนเอฟเฟกต์ของม้าหมุนและภาพที่ซีดจางในการใช้ jQuery และ JS ถนนสู่การเรียนรู้ในอนาคตนั้นยาวมากฉันหวังว่าฉันจะไปไกลกว่านี้บนถนนส่วนหน้า `(∩_∩) ′
โดยหลักการแล้วมีบทเรียนออนไลน์มากมาย
จางหายไป แต่ในความเป็นจริงจะมีการใช้เอฟเฟกต์จางลงที่นี่ สำหรับแต่ละภาพที่จางหายไปเราตั้งค่าการแสดงผลเป็นบล็อกและภาพอื่น ๆ ไม่มีดังนั้นจึงมีเพียงภาพเดียวที่มีอยู่จริงและอยู่ในตำแหน่งในสตรีมเอกสาร ก่อนที่จะตั้งค่าวิธีการแสดงผลของภาพค่อยๆเพิ่มความโปร่งใสของภาพจะทำให้ผู้คนรู้สึกซีดจาง
ในความเป็นจริงมีอีกประเด็นสำคัญในรหัส JS การปิดใช้ในรหัสดังนั้นฉันจึงมีความเข้าใจเล็กน้อยเกี่ยวกับการปิด ให้ฉันพูดอีกสองสามคำที่นี่:
คำอธิบายอย่างเป็นทางการของการปิดคือการปิดเป็นการแสดงออก (โดยปกติจะเป็นฟังก์ชัน) ที่มีตัวแปรมากมายและสภาพแวดล้อมที่ผูกพันกับตัวแปรเหล่านี้ดังนั้นตัวแปรเหล่านี้จึงเป็นส่วนหนึ่งของการแสดงออก
วิธีที่ง่ายที่สุดคือ:
เมื่อฟังก์ชั่นภายใน B ของฟังก์ชั่น A ถูกอ้างอิงโดยตัวแปรภายนอกฟังก์ชั่น A การปิดจะถูกสร้างขึ้น
พูดอย่างละเอียดมากขึ้น สิ่งที่เรียกว่า "การปิด" คือการกำหนดฟังก์ชั่นอื่นเป็นฟังก์ชันวิธีการในตัวสร้างและฟังก์ชั่นวิธีการของวัตถุนี้หมายถึงตัวแปรชั่วคราวในร่างกายฟังก์ชั่นด้านนอก สิ่งนี้จะช่วยให้ค่าตัวแปรชั่วคราวที่ใช้โดยตัวสร้างเดิมจะได้รับการบำรุงรักษาทางอ้อมตราบใดที่วัตถุเป้าหมายสามารถรักษาวิธีการของมันได้ตลอดอายุการใช้งาน
แม้ว่าการเรียกตัวสร้างเริ่มต้นได้สิ้นสุดลงและชื่อของตัวแปรชั่วคราวได้หายไป แต่ค่าของตัวแปรสามารถอ้างอิงได้ภายในวิธีการของวัตถุเป้าหมายและค่าสามารถเข้าถึงได้ในวิธีนี้เท่านั้น แม้ว่าตัวสร้างเดียวกันจะถูกเรียกอีกครั้ง แต่จะมีการสร้างวัตถุและวิธีการใหม่เท่านั้น ตัวแปรชั่วคราวใหม่จะสอดคล้องกับค่าใหม่เท่านั้นและเป็นอิสระจากการโทรครั้งสุดท้าย
ฟังก์ชั่นต่อไปนี้เป็นฟังก์ชั่นการปิด ทำไมต้องใช้ปิด? เป็นไปไม่ได้สำหรับฟังก์ชั่นทั่วไปหรือไม่? มันเป็นไปไม่ได้จริงๆ จุดประสงค์ของการปิดที่นี่คือการอ้างอิงถึงธง หากไม่มีการปิดสำหรับตัวแปรท้องถิ่นตราบใดที่ฟังก์ชั่นถูกดำเนินการหนึ่งครั้งนั่นคือธงจะถูกดำเนินการหนึ่งครั้งตัวแปรท้องถิ่นจะถูกรวบรวมและทำความสะอาดโดยกลไกการรวบรวมขยะ เราอ้างถึงตัวแปรธงผ่านฟังก์ชั่นในการโทรเป็นระยะ ๆ เมื่อการดำเนินการครั้งที่สองถูกดำเนินการธงจะสูญเสียค่าและร่างกายฟังก์ชั่นไม่สามารถเรียกใช้ผลลัพธ์ที่ถูกต้องได้ เมื่อฉันเริ่มสัมผัสส่วนหน้าฉันรู้สึกว่าการปิดเป็นทางเลือก ความจริงก็คือสิ่งนี้สำคัญมาก!
var setVal = function (s, flag) {return function () {pos = math.abs (parseint (pic.style [point])); ถ้า (ธง> 0) {// จุดปัจจุบันมากกว่าพิกัดของจุดเป้าหมายภาพจะเคลื่อนที่ไปทางขวาค่าซ้ายจะลดลง pic.style [จุด] = -math.floor (pos +(parseint (s*ssinglesize) - pos)*ความเร็ว) +'px'; } if (Flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*ความเร็ว) +'px'; } if (pos == (ssinglesize * s)) {now = s; ClearInterval (ช่วงเวลา); -นี่คือรหัส:
HTML
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> picsglide </title> <link href = "css/index.css" rel = "stylesheet" type = "css"> src = "js/index.js"> </script> </head> <body onload = "init ()"> <div id = "picbox" >< ul class = "show_pic" style = "left: 0"> <li class = "on"> <a href = "#"> src = "imgs/aaa.jpg"/> </li> <li> <img src = "imgs/bbb.jpg"/> </li> <li> <img src = "imgs/ccc.jpg"/> </li> <li> src = "imgs/ccc.jpg"/> </li> </ul> <div class = "bg"> </div> <ul class = "show_des"> <li> puss ใน boots1 </li> <li> puss ใน boots2 </li> <li> </ul> <ul class = "icon_num"> <li class = "on"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li>
CSS
ร่างกาย {ตัวอักษรขนาด: 12px; } ul, li {padding: 0; มาร์จิ้น: 0; รายการสไตล์: ไม่มี; } #PICBOX {WIDTH: 610PX; ความสูง: 205px; มาร์จิ้น: 50px auto; ล้น: ซ่อน; ตำแหน่ง: ญาติ; FONT-SIZE: 0;}/*ภาพม้าหมุน*/#picbox. show_pic {width: 3050px; ตำแหน่ง: สัมบูรณ์;}#picbox. show_pic li {float: ซ้าย; ความกว้าง: 610px; ความสูง: 205px; แสดง: ไม่มี; /*display: none;*/}#picbox. show_pic li.on {display: block;}#picbox. show_pic li img {display: block; ความกว้าง: 610px; ความสูง: 205px;}#picbox .icon_num {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 12px; ขวา: 10px; z-index: 10;}#picbox .icon_num li {float: ซ้าย; /*พื้นหลัง: URL (/uploadfile/200912/28/fa15567738.gif) ไม่ต้องทำซ้ำ -15px 0; */ ความกว้าง: 16px; ความสูง: 16px; ขนาดตัวอักษร: 16px; สี: #39F; TEXT-ALIGN: CENTER; เคอร์เซอร์: ตัวชี้; มาร์จิ้น-ขวา: 5px;} #picbox .icon_num li.on {พื้นหลัง: #000; ความทึบ: 0.5; }/*พื้นหลัง*/. bg {z-index: 1; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; ความสูง: 40px; ความกว้าง: 610px; ความเป็นมา: #000; ความทึบ: 0.6; ตัวกรอง: alpha (opacity = 60);}#picbox. show_des {width: 300px; ความสูง: 18px; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 11px; ซ้าย: 15px; สี: #FFF; z-index: 10;}#picbox. show_des li {display: none; ความสูงบรรทัด: 18px; FONT-SIZE: 18PX;}#picbox. show_des li.on {display: block;}JS
ฟังก์ชั่น CleanWhitespace (oElement) {สำหรับ (var i = 0; i <oElement.childNodes.length; i ++) {var node = oeelement.childNodes [i]; if (node.nodeType == 3 &&! // s/.test (node.nodevalue)) {node.parentNode.removeChild (Node); }}} // รหัส carousing this.layerglide = ฟังก์ชั่น (อัตโนมัติ, obox, ssinglesize, วินาที, fspeed, จุด) {ช่วงเวลา var, หมดเวลา; // สองตัวจับเวลา var pos; // ค่าสัมบูรณ์ของการวางตำแหน่งปัจจุบันพิกัดการสร้างเวลา var เวลา = วินาทีตอนนี้ = 0; // เวลาที่ภาพเคลื่อนไหวหนึ่งครั้งตอนนี้ค่าดัชนีของภาพปัจจุบันภาพ var ความเร็ว = fseed // ความเร็วการเคลื่อนไหวการหน่วงเวลา = วินาที * 1000; // ช่วงเวลาสำหรับการสลับแต่ละภาพ var picbox = document.getElementById (obox); CleanWhitespace (PICBox); var pic = picbox.childnodes [0]; // รายการรูปภาพ var des = picbox.childnodes [2] .getElementsByTagname ("li"); // รายการรูปภาพ var con = picbox.childnodes [3] .getElementsByTagname ("li"); var sum = con.length; var setVal = function (s, flag) {return function () {pos = math.abs (parseint (pic.style [point])); ถ้า (ธง> 0) {// จุดปัจจุบันมากกว่าพิกัดของจุดเป้าหมายภาพจะเคลื่อนที่ไปทางขวาค่าซ้ายจะลดลง pic.style [จุด] = -math.floor (pos +(parseint (s*ssinglesize) - pos)*ความเร็ว) +'px'; } if (Flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*ความเร็ว) +'px'; } if (pos == (ssinglesize * s)) {now = s; ClearInterval (ช่วงเวลา); - var changeto = function (num) {สำหรับ (var i = 0; i <sum; i ++) {con [i] .className = ""; des [i] .className = ""; - con [num] .className = "on"; des [num] .className = "on"; var flag = math.abs (parseint (pic.style [point]))-ssinglesize * num; Interval = setInterval (setVal (num, flag), เวลา); //bkg.hide (). fadein (); } ฟังก์ชั่น autoglide () {cleartimeout (ช่วงเวลา); ตอนนี้ = (ตอนนี้ == (parseint (sum) -1))? 0: (ตอนนี้ + 1); Changeto (ตอนนี้); หมดเวลา = settimeout (autoglide, ล่าช้า); } ฟังก์ชั่น isauto () {ถ้า (อัตโนมัติ) {timeout = settimeout (autoglide, ล่าช้า); - } isauto (); // เริ่มม้าหมุนอัตโนมัติสำหรับ (var i = 0; i <sum; i ++) // ปุ่มนำทาง {con [i] .onmouseover = (ฟังก์ชั่น (i) {ฟังก์ชั่น return () {cleartimeout (หมดเวลา); ClearInterval (ช่วงเวลา); changeTo (i); this.layerFader = function (auto, obox, second, count, speed) {ช่วงเวลา var, หมดเวลา; // สองตัวจับเวลา var now = 0; // เวลาที่รูปภาพจะย้ายครั้งหนึ่งช่วงเวลาตอนนี้ค่าดัชนีของภาพปัจจุบันการหน่วงเวลา = วินาที * 1000; // ช่วงเวลาของแต่ละภาพถูกสลับ var picbox = document.getElementById (obox); CleanWhitespace (PICBox); var pic = picbox.childnodes [0] .getElementsByTagname ("li"); var des = picbox.childnodes [2] .getElementsByTagname ("li"); var con = picbox.childnodes [3] .getElementsByTagname ("li"); var sum = con.length; ฟังก์ชั่น fadein (elem) {setopacity (elem, 0); // เริ่มต้นโปร่งใสอย่างสมบูรณ์สำหรับ (var i = 0; i <= count; i ++) {// การเปลี่ยนแปลงความโปร่งใส 20 * 5 = 100 (ฟังก์ชั่น (i) {var level = i * 5; // ค่าการเปลี่ยนแปลงความโปร่งใสในแต่ละครั้ง }} ฟังก์ชั่น setOpacity (elem, ระดับ) {// ตั้งค่าความโปร่งใสถ้า (elem.filters) {elem.style.filter = "alpha (opacity =" + ระดับ + ")"; } else {elem.style.Opacity = ระดับ / 100; }} var changeto = function (num) {สำหรับ (var i = 0; i <sum; i ++) {con [i] .className = ""; des [i] .className = ""; pic [i] .className = ""; - fadein (pic [num]); con [num] .className = "on"; des [num] .className = "on"; pic [num] .className = "on"; //bkg.hide (). fadein (); } ฟังก์ชั่น autoglide () {cleartimeout (ช่วงเวลา); ตอนนี้ = (ตอนนี้ == (parseint (sum) -1))? 0: (ตอนนี้ + 1); Changeto (ตอนนี้); หมดเวลา = settimeout (autoglide, ล่าช้า); } ฟังก์ชั่น isauto () {ถ้า (อัตโนมัติ) {timeout = settimeout (autoglide, ล่าช้า); - } isauto (); // เริ่มม้าหมุนอัตโนมัติสำหรับ (var i = 0; i <sum; i ++) // ปุ่มนำทาง {con [i] .onmouseover = (ฟังก์ชั่น (i) {ฟังก์ชั่น return () {cleartimeout (หมดเวลา); // clearInterval (Interval); changeTo (i);jQuery นั้นง่ายกว่า JS มากดังนั้นฉันจะไม่เข้าไปดูรายละเอียดที่นี่ เมื่อฉันอยู่ในปีจูเนียร์ฉันเรียนรูปแบบการออกแบบ ครูบอกให้เราโปรแกรมสำหรับอินเทอร์เฟซมากกว่าการใช้งาน พยายามอย่าปรากฏค่าคงที่ในรหัสเพื่อปรับปรุงความสามารถในการใช้ซ้ำของรหัส ดังนั้นเมื่อเขียนโค้ดปัจจัยตัวแปรทั้งหมดจะถูกกล่าวถึงพารามิเตอร์ ในประโยคสุดท้ายสำหรับการดำเนินการ JS DOM, JS เป็นวิธี Kingly โดยการใช้และฝึกฝนมากขึ้นเท่านั้นคุณสามารถควบคุมได้ดี ฉันหวังว่าคุณจะก้าวต่อไปในอนาคต
ตัวอย่างง่าย ๆ ข้างต้นของ JS ดั้งเดิมที่ใช้งาน Carousel Image และ Fade-in Effects เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น