วันนี้ฉันเห็นภาพเลื่อนที่เขียนโดยคนอื่น มันดูเท่ เมื่ออ่านซอร์สโค้ดมันดูยากเล็กน้อย ดังนั้นฉันจึงเลียนแบบและเขียนหนึ่ง เอฟเฟกต์นั้นเหมือนกับหน้าเว็บดั้งเดิม แต่รหัส JS ของฉันเองนั้นง่ายในตรรกะและจำเป็นต้องปรับปรุง
PS: ฉันเขียนม้าหมุนเมื่อสองวันก่อนและความเข้ากันได้นั้นไม่ดี เมื่อฉันเขียนหน้าเว็บนี้วันนี้ฉันก็ทำตามความคิดนี้และวิ่งได้ดีมากใน Google Chrome ไม่สามารถใช้งานฟังก์ชั่นจำนวนมากของ Firefox ได้ เนื่องจาก Wrap-Panel ใช้การวางตำแหน่งแบบสัมบูรณ์การแปลการแปลจึงถูกเปลี่ยนเป็นซ้าย หลังจากการเปลี่ยนแปลงแต่ละเบราว์เซอร์ทำงานได้ดี
รหัสเฉพาะมีดังนี้
รหัส HTML (ไม่มีการเขียนความคิดเห็น)
<div> <h1> ตัวเลื่อน Parallax </h1> <div> <div> <div id = "bg_1" style = "ซ้าย: 0px;"> </div> <div id = "bg_2" style = "ซ้าย: 0px;"> </div> <div id = "bg_2" style = "left: 0px;"> <div> <img id = "img_1" src = "ภาพ/1.jpg"> </div> <div> <img src = "images/2.jpg"> </div> <div> <img src = "ภาพ/3.jpg" src = "images/5.jpg"> </div> <div> <img src = "images/6.jpg"> </div> </div> <div> <span id = "perv_btn"> </span> <span id = "next_btn" id = "show_small"> <ul> <li> <img src = "รูปภาพ/thumbs/1.jpg"> </li> <li> <img src = "รูปภาพ/thumbs/2.jpg"> </li> <li> <img src = "images/thumbs/3.jpg"> src = "images/thumbs/4.jpg"> </li> <li> <img src = "images/thumbs/5.jpg"> </li> <li> <img src = "images/thumbs/6.jpg"> </li>
รหัส CSS (อ่านด้วยตัวเอง):
* {มาร์จิ้น: 0; Padding: 0; } html, body, .container {width: 100%; ความสูง: 100%; Font-Family: 'Microsoft Yahei'; } .Container {พื้นหลังสี: #222; Overflow-X: ซ่อน; } .Container H1 {FONT-SIZE: 50PX; สี: #CCC; TEXT-ALIGN: CENTER; Font-Weight: Bolder; ความสูง: 120px; ความสูงของสาย: 120px; } .wrap {ตำแหน่ง: ญาติ; ความกว้าง: 600%; ความสูง: 400px; ชายแดนด้านบน: 10px Solid #333; ขอบด้านล่าง: 10px Solid #333; ระยะขอบด้านบน: 20px; } .BG {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; ซ้าย: 0; ด้านบน: 0; -Webkit-Transition: 1S; -MOZ-TRANSITION: ทั้งหมด 1S; -MS-TRANSITION: 1S; -O-TRANSITION: ทั้งหมด 1S; -O-TRANSITION: ทั้งหมด 1S; การเปลี่ยนแปลง: ทั้งหมด 1s; } .BG-1 {พื้นหลัง: URL (รูปภาพ/bg1.png); } .bg-2 {พื้นหลัง: url (images/bg2.png); } .BG-3 {พื้นหลัง: url (images/bg3.png); } .wrap-panel {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; -webkit-transition: ทั้งหมด 1s; -MOZ-TRANSITION: 1S ทั้งหมด; -MS-TRANSITION: 1S ทั้งหมด; -O-TRANSITION: ทั้งหมด 1S; การเปลี่ยนแปลง: ทั้งหมด 1s; } .Panel {Width: 16.66%; ความสูง: 100%; ลอย: ซ้าย; } .panel img {display: block; มาร์จิ้น: 0 อัตโนมัติ; ระยะขอบด้านบน: 35px; แนวชายแดน: 10px; ชายแดน: 10px Solid RGBA (143, 143, 143, 0.6); } .navigation-Button Span: Hover {Opacity: 0.8} .perv-Button, .next-Button {ตำแหน่ง: Absolute; ความกว้าง: 30px; ความสูง: 60px; พื้นหลังสี: #344133; แนวชายแดน: 10px; เคอร์เซอร์: ตัวชี้; ความทึบ: 0.4; } .perv-button {พื้นหลัง: #000 URL (images/prev.png) ศูนย์กลางศูนย์ไม่ซ้ำ; } .next-Button {พื้นหลัง: #000 URL (images/next.png) ศูนย์กลางศูนย์กลางที่ไม่ต้องทำซ้ำ; }. show-small {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 680px; ด้านล่าง: 20px; }. show-small ul {list-style: none; }. show-small ul li {float: ซ้าย; มาร์จิ้น: 0 10px; ชายแดน: 5px Solid #FFF; ความทึบ: 0.7; เคอร์เซอร์: ตัวชี้; -webkit-transition: ทั้งหมด. 3s; -MOZ-TRANSITION:. 3S ทั้งหมด; -MS-TRANSITION:. 3S ทั้งหมด; -O-TRANSITION: ทั้งหมด. 3s; การเปลี่ยนแปลง:. 3s ทั้งหมด; }. show-small ul li: hover {margin-top: -15px; -รหัส JS (ตัวอย่างเล็ก):
window.onload = function () {// รับองค์ประกอบ var getdom = function (id) {return typeof id === "String"? document.getElementById (id): id; } // รับวัตถุ var img = getDom ('img_1'); var prev = getDom ("perv_btn"); var next = getDom ("next_btn"); var wrap_panel = getDom ('wrap_panel'); var bg_1 = getDom ("bg_1"); var bg_2 = getDom ("bg_2"); var bg_3 = getDom ("bg_3"); var show_small = getDom ("show_small"); var list = show_small.getElementsByTagname ("li"); var wwidth; // bind Event สำหรับองค์ประกอบ var addevent = function (id, เหตุการณ์, fn) {var el = getDom (id) || เอกสาร; if (el.addeventListener) {el.addeventListener (เหตุการณ์, fn, false); } อื่นถ้า (el.attachevent) {el.attachevent ('on' + event, fn); }} ฟังก์ชั่น init () {// วางปุ่ม // ระยะทางซ้ายของปุ่มไปข้างหน้า = ระยะทางซ้ายของรูปภาพ + เส้นขอบ prev.style.left = img.offsetleft + 10 + 'px'; // ระยะทางด้านบนของปุ่มไปข้างหน้า = ระยะทางด้านบนของรูปภาพ + ครึ่งหนึ่งของความสูงของภาพ - ครึ่งหนึ่งของปุ่ม prev.style.top = img.offsettop + img.clientheight/2 - prev.clientheight/2 + 'px'; next.style.left = img.offsetleft + img.clientWidth + 10 - next.clientWidth + 'px'; next.style.top = prev.style.top; // จัดตำแหน่งคอนเทนเนอร์ของรูปภาพขนาดเล็ก wwidth = document.documentElement.ClientWidth || document.body.clientwidth; show_small.style.left = (wwidth - show_small.clientwidth)/2 + 'px'; } // ฟังก์ชั่นการประมวลผลภาพขนาดเล็ก small_img () {// หมุนภาพสำหรับ (var i = 0; i <list.length; i ++) {// หมุนทิศทาง = math.pow (-1, parseint (math.random ()*10)); รายการ [i] .style = "แปลง: หมุน (" + (math.random ()*20*ทิศทาง) + "deg)"; } รายการ [0] .style.Opacity = 1; } ฟังก์ชั่น only_one (el, num) {สำหรับ (var i = 0; i <el.length; i ++) {el [i] .style.Opacity = 0.7; } // console.log (num); el [num] .style.Opacity = 1; } // เมื่อเบราว์เซอร์ถูกซูม, window.onresize = function () {init (); } // ดำเนินการฟังก์ชัน init (); small_img (); addevent (ก่อนหน้า, 'คลิก', function () {// เปลี่ยน var oldpos ของ wrap-panel oldpos = parseint (wrap_panel.style.left); ถ้า (oldpos == 0) bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left = -wwidth*(list.length-1) +'px'; = (oldpos + wwidth) + 'px'; bg_3.style.left = (OldPos + wwidth-parseint (-(oldpos/wwidth + 1))*500) + 'px'; addevent (ถัดไป, 'คลิก', function () {// เปลี่ยน var oldpos ของ wrap-panel oldpos = parseint (wrap_panel.style.left); ถ้า (oldpos == -wwidth*(list.length-1)) bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left = '0px'; + 'px'; (OldPos - WWIDTH + PARSEINT ( - (OLDPOS/WWIDTH + 1))*500) + 'PX'; -ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript