ปลั๊กอิน! ปลั๊กอิน! ฉันได้ยินคนขอปลั๊กอินนี้และปลั๊กอินนั้นทุกวัน แน่นอนว่าการใช้ปลั๊กอินของบุคคลที่สามสามารถปรับปรุงประสิทธิภาพการพัฒนาได้อย่างมาก แต่ในฐานะมือใหม่ฉันยังคงชอบที่จะใช้มันเองส่วนใหญ่เป็นเพราะฉันมีเวลา!
วันนี้ฉันจะแบ่งปันวิธีการเขียนรูปภาพม้าหมุนโดยใช้ JS พื้นเมือง
ผู้อาวุโสสามารถเพิกเฉยต่อเรื่องไร้สาระต่อไปนี้:
ก่อนที่จะเริ่มให้ฉันพูดถึงประสบการณ์ของฉันในการเรียนรู้ส่วนหน้าถึงตอนนี้ วันนี้ควรจะประมาณสองเดือน โดยทั่วไปใช้เวลาเรียน 6-10 ชั่วโมงทุกวันการศึกษาด้วยตนเองอย่างหมดจดและมีการกล่าวกันว่าการฝึกอบรมไม่น่าเชื่อถือ! ขณะนี้ฉันกำลังเรียนรู้เพียงสามรายการหลัก (HTML5, CSS3, JavaScript) และความรู้อื่น ๆ ทั้งหมดยังคงอยู่เบื้องหลังแผนการเรียนรู้ ... ฉันอยู่ในช่วงเวลาของความสับสนและฉันไม่รู้ว่าจะเรียนรู้อะไรก่อน! ไม่ว่าจะเกิดอะไรขึ้นลองจัดเรียงรายการสำคัญสามรายการก่อน หากคุณมีคำแนะนำที่ดีฉันหวังว่าคุณจะให้คำแนะนำกับฉันได้!
จาก HTML5 ถึง CSS3 ฉันรู้สึกว่าส่วนหน้าค่อนข้างง่ายดังนั้นฉันจึงรู้สึกมั่นใจและมีแรงจูงใจเล็กน้อย จากนั้นฉันก็เรียนรู้ JS ฉันเคยเรียนรู้ C# และ Swift ของ Apple พวกเขาเป็นทั้งภาษาที่มุ่งเน้นวัตถุและที่แข็งแกร่งซึ่งค่อนข้างก้าวหน้า อย่างไรก็ตามฉันยังคงชอบส่วนหน้าดังนั้นฉันจึงหันมาที่นี่และเริ่มเรียนรู้ JS มันง่าย แต่ฉันรู้สึกว่าภาษานี้ยุ่งและแตกต่างจากคนอื่น ๆ ! มีบางสิ่งที่ไม่ง่ายที่จะเข้าใจในคู่มือผู้มีอำนาจ หากคุณไม่สามารถทำได้เพียงแค่มองไปที่ Baidu และดูความเข้าใจของคนอื่นมากขึ้นเกี่ยวกับแนวคิดเช่นการปิดและต้นแบบและค่อยๆคุณสามารถเชี่ยวชาญได้ ในขั้นตอนนี้คุณอาจค่อยๆตระหนักว่าส่วนหน้ามีหลายสิ่งหลายอย่าง! มีห้องสมุดบุคคลที่สามกรอบกรอบ ฯลฯ และสิ่งอื่น ๆ อีกมากมาย ในระยะสั้นคำนามใหม่ยังคงโผล่ขึ้นมาต่อหน้าต่อตาของคุณ บางคนบอกว่าสิ่งนี้จะล้าสมัยและกำลังจะเป็นกระแสหลักซึ่งวุ่นวายมาก! ยุ่งมาก! ฉันจะไปต่อไปได้อย่างไร? จะเรียนรู้อะไรก่อน? จะเรียนรู้อะไรในภายหลัง?
ตอนนี้ฉันอยู่ในขั้นตอนนี้ บางครั้งฉันไม่สามารถยืนดูอะไรได้สองวันติดต่อกันไม่สามารถนอนหลับและรู้สึกไม่พอใจนั่นคือฉันหมกมุ่นอยู่กับมัน!
ฉันแค่คิดว่ามีอะไรผิดปกติกับฉัน? ฉันคิดไม่ออก! ลืมมันหยุดพักและออกกำลังกายร่างกายของคุณ! เพียงแค่ไปวิ่งและเดินไปรอบ ๆ ! ในขณะที่คิด: จะนำตัวเองกลับเข้าสู่สถานะได้อย่างไร!
หลังจากนั้นฉันก็ทำสิ่งนี้: ให้ขนมกับตัวเอง! (ทำตัวอย่างง่ายๆด้วยตัวเอง)
ฉันพบว่าขนมหวานจนฉันสามารถทำได้จริง! ความรู้สึกของความสำเร็จเป็นไปอย่างสบายและแรงจูงใจเต็ม! ฉันเพิ่งเขียนหนึ่งอินสแตนซ์หลังจากนั้นอีก หากฉันไม่เข้าใจหรือไม่คุ้นเคยกับ API ฉันจะแปลเอกสาร (ฉันจะเขียนด้วยตัวเองก่อนที่จะอ่านรหัสของคนอื่นและฉันจะอ่านอีกครั้งหากฉันไม่สามารถทำได้จริง ๆ ) ค่อยๆฉันรู้สึกว่าฉันกลับมาจริงๆและเริ่มติดตาม!
ฉันยังดูว่าคนส่วนใหญ่ของ บริษัท ส่วนใหญ่ที่กำลังสรรหา บริษัท ส่วนหน้าต้องการและทำแผนการศึกษาใหม่สำหรับตัวเอง แน่นอนเพราะตอนนี้ฉันมีเวลาฉันต้องการใช้เวลาสักครู่เพื่อรวมฐานรากหลักสามประการก่อนฝึกซ้อมมากขึ้นจากนั้นกลับไปอ่านเอกสารอีกครั้งเพื่อทำความเข้าใจหลักการพื้นฐานและภายในของพวกเขา! ไม่ว่าคุณจะเรียนรู้อะไรต่อไปมันจะง่ายกว่ามากที่จะเริ่มต้น! ในเวลาเดียวกันยังคงเข้าใจส่วนหน้ามากขึ้น! เพื่อให้เข้าใจถึงโอกาสและทิศทางของอาชีพนี้คือการสร้างโลกทัศน์ส่วนหน้าสำหรับตัวคุณเองเพื่อที่คุณจะได้ไม่สูญเสียทิศทางของคุณเมื่อคุณเรียนรู้!
ควรเรียนรู้ห้องสมุดและเฟรมเวิร์กของบุคคลที่สามซึ่งฉันไม่รู้ในขณะนี้ JQ ล้าสมัยหรือไม่? คุณต้องการเรียนรู้หรือไม่? ฉันไม่รู้ดังนั้นฉันจึงไม่สนใจมันอีกต่อไปเพียงแค่เล่นกับคนพื้นเมืองก่อน! คุณควรรู้อย่างเป็นธรรมชาติในอนาคต!
การต่อสู้ที่เกิดขึ้นจริงเริ่มต้นต่อไปนี้เป็นรหัสและการสาธิต
ฉันไม่สามารถเรียนรู้วิธีการเขียนเชิงวัตถุของผู้อาวุโสของฉันในขณะนี้ดังนั้นฉันจึงสามารถเขียนฟังก์ชั่นบางอย่างฮ่าฮ่า! (ภาพมาจากอินเทอร์เน็ตคุณสามารถตัดภาพ 300*200 ตัวเองเพื่อดูเอฟเฟกต์คลิกปุ่ม 'เกรดและออก' เพื่อเริ่มต้น)
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Padding: 0; รายการสไตล์: ไม่มี; การตกแต่งข้อความ: ไม่มี; } #Slide {ตำแหน่ง: สัมบูรณ์; ด้านบน: 100px; ซ้าย: 50px; ความกว้าง: 300px; ความสูง: 200px; เส้นขอบ: 1px ของแข็งสีเทา; } #slide .blog-name {display: block; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; ซ้าย: 0; ความกว้าง: 100%; ความสูง: 25px; ความสูงของสาย: 25px; พื้นหลังสี: RGBA (155,155,155,0.5); z-index: 4; เคอร์เซอร์: ตัวชี้; Indent-Indent: 3px; } #slide-nav {ตำแหน่ง: สัมบูรณ์; ขวา: 5px; ด้านล่าง: 5px; z-index: 5; } #slide-nav li {display: inline-block; ความกว้าง: 16px; TEXT-ALIGN: CENTER; ความสูงของสาย: 16px; แนวชายแดน: 5px; เคอร์เซอร์: ตัวชี้; ล้น: ซ่อน; } #slide-nav li: hover, .selected {พื้นหลังสี: #336699; สี: สีขาว; } .Slide-Content1 {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 300px; ความสูง: 200px; ขนาดตัวอักษร: 0; } .Slide-Content1 a {ตำแหน่ง: สัมบูรณ์; เคอร์เซอร์: ตัวชี้; } .Slide-Content1 A: เยี่ยมชม {color: black;} #model-btn {ตำแหน่ง: Absolute; ด้านบน: -25px; ขนาดตัวอักษร: 20px; } </style> <script> window.onload = function () {var sufuimagescrooller = function () {// ฟังก์ชั่นเครื่องมือหลายฟังก์ชั่นแสดง (img) {var id; สำหรับ (var i = 0; i <= 21; i ++) {var op = i * 5; id = settimeout (ฟังก์ชั่น (e) {setOpacity (img, e)}. -bind (this, op), i * 50); } ClearTimeOut (ID); } ฟังก์ชั่นซ่อน (img) {var id; สำหรับ (var i = 0; i <= 21; i ++) {var op = 100 - i * 5; id = settimeout (ฟังก์ชั่น (e) {setOpacity (img, e)}. -bind (this, op), i * 20); } ClearTimeOut (ID); } ฟังก์ชั่น getById (id) {return document.getElementById (id); } ฟังก์ชั่น setOpacity (elem, ระดับ) {ถ้า (elem.filter) {elem.style.filter = "alpha (opacity =" + ระดับ + ")"; // เข้ากันได้กับ IE} else {elem.style.Opacity = ระดับ/100; }} // (โหมดขั้นสูงและก้าวหน้า) ฟังก์ชั่นร่างกายฟังก์ชั่น inoutmodel (nums, navid, imgcontainerid, imginfoid, ล่าช้า) {// ป้องกันการคลิกหลายครั้งของปุ่มเลือกโหมดเพื่อสร้าง li ถ้า getById ('slide-nav') var targetidext = 0; // บันทึกข้อมูลสถานะรูปภาพ var currentidext = 0; // บันทึกข้อมูลสถานะรูปภาพ var frag = document.createdocumentFragment (); สำหรับ (var i = 0; i <nums; i ++) {nav [i] = fragment.appendChild (document.createElement ('li')); // วิธีการภาคผนวกจะส่งคืน li nav [i] .innerhtml = i+1; } getById (navid) .AppendChild (frag); // เริ่มต้นเพื่อแสดงภาพแรก var imgs = getById (imgContainerId) .getElementsByTagname ('a'); ข้อมูล var = getById (imginfoid); info.innerhtml = imgs [0] .title.slice (0,12)+'... '; NAV [0] .className = 'เลือก'; // การเปลี่ยนแปลงแบบไดนามิกของชื่อคลาสของ Li เพื่อเปลี่ยนสไตล์ของมันสำหรับ (var j = 1; j <nav.length; j ++) {setopacity (imgs [j], 0); } // เริ่มต้น Var ID แบบหมุนอัตโนมัติ; ฟังก์ชั่นเริ่มต้น (ล่าช้า) {id = setInterval (function () {hide (imgs [cureentidext]); nav [cureentidext] .className = ''; ถ้า (targetidext <nums-1) {targetidext ++; 'เลือก'; info.innerhtml = imgs [targetidext] .title.slice (0,12)+' } เริ่มต้น (ล่าช้า); // เพิ่มเหตุการณ์สำหรับแต่ละปุ่มนำทางสำหรับ (var k = 0; k <nav.length; k ++) {nav [k] .onclick = ฟังก์ชั่น (เหตุการณ์) {var e = เหตุการณ์ || window.event; // เข้ากันได้กับ IE var t = event.target || event.srcelement; // เข้ากันได้กับ IE var idex = parseint (t.innerhtml) -1; console.log ('idex:'+idex+'t:'+targetidext+'c:'+cureentidext); ถ้า (idex === humen [cureentidext]); nav [cureentidext] .className = ''; humenidext = idex; แสดง (IMGS [IDEX]); nav [idex] .className = 'เลือก'; info.innerhtml = imgs [idex] .title.slice (0,12)+'... '; }} getById (navid) .onMouseOver = function () {clearInterval (id)}; getById (navid) .onMouseOut = function () {start (ล่าช้า)}; } // จากฟังก์ชั่นโหมดซ้ายไปซ้ายจาก rightModel (nums, navid, imgContainerId, imginfoid, ล่าช้า) {แจ้งเตือน ('บล็อกเกอร์ขี้เกียจลืมใช้ฟังก์ชั่นนี้! โปรดฝากข้อความไว้ถ้าคุณต้องการ!'); } ฟังก์ชั่น fromtopmodel (nums, navid, imgcontainerid, imginfoid, ล่าช้า) {แจ้งเตือน ('บล็อกเกอร์ขี้เกียจลืมใช้ฟังก์ชั่นนี้! โปรดฝากข้อความไว้ถ้าคุณต้องการ!'); } return {InoutModel: InoutModel, FrorTHMODEL: FRORTHMODEL, FROMTOPMODEL: FROMTOPMODEL: FROMTOPMODEL, getByID: getById}} (); sufuimagescrooller.getById ('model-btn1'). onclick = function () {sufuimagescrooller.inoutmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); - sufuimagescrooller.getById ('model-btn2'). onclick = function () {sufuimagscrooller.fromrightModel (5, 'Slide-Nav', 'Slide-Main', 'Slide-info', 3500); - sufuimagescrooller.getById ('model-btn3'). onclick = function () {sufuimagescrooller.fromtopmodel (5, 'slide-nav', 'Slide-Main', 'Slide-info', 3500); - - </script> </head> <body> <div id = "slide"> <a id = "slide-info" href = "http://www.cnblogs.com/susufufu/" target = "blank"> บล็อกของ Sufu </a> href = "http://www.cnblogs.com/susufufu/p/5749922.html" target = "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg" href = "http://www.cnblogs.com/susufufu/p/5768431.html" target = "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=428685119,2694540617&fm=21&gp=0.jpg" href = "http://www.cnblogs.com/susufufu/p/5738673.html" target = "_ blank"> <div> <img src = "https://ss3 href = "http://www.cnblogs.com/susufufu/p/5714020.html" target = "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg" href = "http://www.cnblogs.com/susufufu/p/5759480.html" target = "_ blank"> <div> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg" id = "model-btn1" value = "ค่อยเป็นค่อยไป progressive"> <อินพุต type = "ปุ่ม" id = "model-btn2" value = "ขวาไปซ้าย"> <อินพุต type = "ปุ่ม" id = "model-btn3" value = "top to Bottom"> </div> </div> </body>ในตอนแรกลองคิดดูว่าจะใช้งานได้อย่างไร: คุณไม่เพียงแค่ใช้ตัวจับเวลาเพื่อเปลี่ยนรูปภาพและเปลี่ยนความทึบของภาพในคาสสโตน?
1. เค้าโครง HTML ค่อนข้างง่าย:
<ul id = "slide-nav" ></ul> <div id = "slide-main"> <a href = "" target = "_ blank"> <div> <img src = "lg1.png"> </div> </a> ... </div> ...
Slide-Info ใช้เพื่อแสดงชื่อรูปภาพ Slide-NAV เป็นปุ่มดิจิตอล Slide-Main เป็นคอนเทนเนอร์รูปภาพและลิงก์รูปภาพจะถูกวางไว้ข้างใน
ไม่มี li เขียนในแท็กเพราะมันถูกสร้างขึ้นแบบไดนามิกผ่าน JS;
2. ตราบใดที่คุณได้สัมผัสกับการตั้งค่าสไตล์ CSS คุณจะเข้าใจพวกเขา ให้ความสนใจกับพวกเขา:
•ก่อนที่คุณจะสร้างเค้าโครงของคุณเองควรเพิ่มเส้นขอบให้กับองค์ประกอบหลักเพื่อให้คุณสามารถเข้าใจฉากและลบออกได้ในที่สุด
• UL LI และแท็กอื่น ๆ อีกมากมายมีช่องว่างภายในค่าเริ่มต้นและควรตั้งค่าเป็น 0;
*{มาร์จิ้น: 0; Padding: 0; รายการสไตล์: ไม่มี; การตกแต่งข้อความ: ไม่มี; -ความสูง: 25px; และความสูงของสาย: 25px; สองมีความเท่าเทียมกันเพื่อให้ตัวละครสามารถเป็นศูนย์กลางได้
Z-Index นั้นสัมพันธ์กับพี่น้องของคุณเท่านั้นและไม่ถูกต้องสำหรับญาติในสนาม หากคุณต้องการให้มันแสดงต่อหน้าญาติ ๆ ในสนามให้ตั้งบรรพบุรุษของญาติในสนาม ตัวอย่างเช่นปู่ของคุณคือนายกรัฐมนตรีและอาจารย์คนที่สองของคุณคือเกษตรกรจากนั้นตัวตนทั้งหมดของครอบครัวของคุณนั้นมีความสูงส่งมากกว่าตัวตนทั้งหมดของครอบครัวอาจารย์คนที่สองของคุณ
•ตำแหน่ง: สัมบูรณ์; มันเกี่ยวข้องกับพ่อของเขาด้วย หากพ่อของเขาไม่ได้ตั้งตำแหน่งมันจะไม่น่าเชื่อถือดังนั้นจึงมองหาการสนับสนุนต่อไปจนกว่าเขาจะพบมันและพึ่งพาเขาเพื่อวางตำแหน่ง!
•หากคุณต้องการให้ได้เอฟเฟกต์จากขวาไปซ้ายจำขนาดตัวอักษร: 0; ชัดเจนเกี่ยวกับระยะห่างระหว่างรูปภาพและเก็บภาพให้ไหล่ถึงไหล่!
เมื่อคำพูดไปฝึกซ้อมทำให้สมบูรณ์แบบ เฉพาะเมื่อ CSS เป็นของแข็งคุณสามารถควบคุมเค้าโครงได้! ตัวอย่างเช่นเค้าโครงปีกคู่ต่อไปนี้สามารถทำได้โดยไม่ต้องวางตำแหน่ง:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> ร่างกาย {margin: 0; Padding: 0; } .header, .footer {width: 100%; ความสูง: 50px; ระดับความสูง: 50px; TEXT-ALIGN: CENTER; พื้นหลังสี: Greenyellow; } .Container {overflow: ซ่อน; *ซูม: 1; } .left {ลอย: ซ้าย; ความกว้าง: 100px; ความสูง: 100px; ขอบซ้าย: -100%; พื้นหลังสี: สีเขียว; } .Main {Float: ซ้าย; ความกว้าง: 100%; ความสูง: 100px; พื้นหลังสี: สีเทา; }. right {float: ซ้าย; ความกว้าง: 200px; ความสูง: 100px; ขอบซ้าย: -200px; พื้นหลังสี: ทอง; } .Center {padding-left: 100px; Padding-Right: 200px; } </style> </head> <body> <div> ส่วนหัว </div> <div> <div> ศูนย์กลางหลัก </div> </div> <div> ซ้าย </div> </div> ขวา </div> </div> </div> ท้ายที่สุด </div> </body> </html>การใช้งานรหัส
เขียนโครงร่างก่อน:
var sufuimagescrooller = function () {function getById (id) {... } // universal get element object function (elem, ระดับ) {... } // ตั้งค่าฟังก์ชั่นความโปร่งใสซ่อน (img) {... } // ปลอมในฟังก์ชั่นแสดง (omg) {... } // } // ฟังก์ชั่นหลักกลับมา {inoutModel: inoutModel, ... }} ();ด้วยวิธีนี้คุณสามารถโทรหาวิธี Inoutmodel ผ่าน Sufuimagescrooller, Sufuimagescrooller InoutModel (5, 'Slide-Nav', 'Slide-Main', 'Slide-Info', 3500);
InoutModel (NUMS, NAVID, IMGCONTAINERID, IMGINFOID, DELAY) พารามิเตอร์: NUMS สร้างจำนวน LI ซึ่งจะต้องสอดคล้องกับจำนวนรูปภาพ, ID คอนเทนเนอร์ปุ่มดิจิตอล Navid, IMGCONTAINERID ID ID ID IMGINFOID
หลังจากเขียนโครงร่างแล้วครึ่งแล้วเสร็จ คนอื่น ๆ คือการดำเนินการตามรายละเอียดเฉพาะ ฉันเขียนไม่ค่อยดีนัก ฉันสามารถพูดได้ว่าฉันได้ใช้ฟังก์ชั่นนี้ ทุกคนคิดเกี่ยวกับมันเพื่อตัวเอง หากคุณมีคำแนะนำที่ดีโปรดอย่าลังเลที่จะนำไปข้างหน้า
เริ่มต้นด้วยการตัดลงในฟังก์ชั่น inoutmodel จากนั้นไปทีละขั้นตอน กุญแจสำคัญคือการพิมพ์ด้วยตนเอง หากคุณแค่ดูมันคุณจะไม่มีประสบการณ์ที่ลึกซึ้ง!
โอเคนั่นคือประเด็น หากคุณไม่ทราบวิธีการแปลเอกสาร API ด้วยตัวคุณเองคุณสามารถฝากข้อความไว้เพื่อถามฉันได้
บทความข้างต้น "ความรู้สึกของการตระหนักถึงผลกระทบของม้าหมุนจาก JS + การเรียนรู้ส่วนหน้า (ป้องกันความหลงใหล) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น