ตัวอย่างนี้จะแบ่งปันรหัสการใช้งานเฉพาะของหน้าต่างการลากป๊อปอัพ JavaScript สำหรับการอ้างอิงของคุณกับคุณ เนื้อหาเฉพาะมีดังนี้
คำอธิบายข้อกำหนด:
1. คลิกปุ่มหน้าเพื่อปรากฏขึ้นหน้าต่าง
2. มีหน้ากากพื้นหลังโปร่งแสง
3. หน้าต่างป๊อปอัพมีมุมโค้งมนหน้าต่างโปร่งแสง แต่เนื้อหาเป็นทึบแสง กับเงา;
4. สามารถลากหน้าต่างได้
5. หลังจากการลากหยุดตำแหน่งหน้าต่างยังคงไม่เปลี่ยนแปลงเมื่อเลื่อนหน้า
6. คุณสามารถใช้ jQuery;
7. มีปุ่มปิด
คำอธิบายการทำงาน เพิ่มเติม:
คลิกปุ่มและจะมีเลเยอร์ลอยตัวที่สามารถลากออกได้
มีหน้ากากพื้นหลังที่รองรับการลากและวางแถบชื่อเรื่อง การลากนอกพื้นที่แถบชื่อไม่มีผล ฟังก์ชั่นการลากมี จำกัด และฟังก์ชั่นการลากนั้น จำกัด อยู่ที่พื้นที่ที่มองเห็นได้
ลากไอเดีย:
รับตำแหน่งของเมาส์ เมื่อเมาส์เคลื่อนที่ให้รับตำแหน่งของเมาส์รับแกน y แกน y กำหนดให้กับแกน y แกน x ของหน้าต่างและทำให้หน้าต่างวางตำแหน่งอย่างแน่นอน ยกเลิกกิจกรรมนี้เมื่อเมาส์ถูกปล่อยออกมา
หลักการดำเนินการของการลากและวาง:
เมื่อเมาส์เคลื่อนที่ตำแหน่งพิกัดของชั้นลอยจะได้รับการปรับปรุงอย่างต่อเนื่องเมื่อเมาส์เคลื่อนที่
1. เมื่อเมาส์กดองค์ประกอบที่ลอยอยู่ให้ทำเครื่องหมายองค์ประกอบลอยตัวซึ่งสามารถลากได้
2. เมื่อเมาส์เคลื่อนที่เราจะตรวจสอบก่อนว่าสามารถลากเครื่องหมายความผันผวนของเครื่องหมายองค์ประกอบลอยตัวได้หรือไม่ ถ้าเป็นเช่นนั้นให้เลเยอร์ลอยตัวเคลื่อนที่ไปกับเมาส์และไม่สนใจถ้าไม่
3. เมื่อเมาส์ถูกปล่อยออกมาองค์ประกอบลอยตัวไม่สามารถลากได้
4.JS ลากและวางส่วนใหญ่ใช้กิจกรรมของเมาส์สามครั้ง: Mousedown, Mousemove และ Mouseup
Mousedown: กด Mouse
Mouseup: ปล่อยเมาส์
Mousemove: การเคลื่อนไหวของเมาส์
หมายเหตุ : ความแตกต่างระหว่าง Mousedown และ Click: กระบวนการทั้งหมดของการคลิก Mousedown จะเกิดขึ้นกับสามเหตุการณ์: Mousedown → Mouseup →คลิกและคลิกจะไม่เกิดขึ้นหลังจากที่เมาส์ถูกปล่อยออกมาในตอนท้าย
เมื่อพูดถึงเรื่องนี้เราต้องพูดคุยเกี่ยวกับเหตุการณ์เมาส์
พูดคุยสั้น ๆ เกี่ยวกับเหตุการณ์เมาส์ด้านล่าง:
(1) คลิกเหตุการณ์
(2) เหตุการณ์ dbclick
(3) เหตุการณ์ Mousedown
(4) เหตุการณ์ MouseUp
(5) เหตุการณ์ Mouseenter
(6) เหตุการณ์ Mouseover
(7) เหตุการณ์ Mouseleaver
(8) เหตุการณ์ Mouseout
คำอธิบาย : (คำอธิบายของเหตุการณ์เมาส์ถูกเลือกจาก W3School)
(1) เหตุการณ์คลิก: เหตุการณ์การคลิกจะถูกทริกเกอร์เมื่อผู้ใช้แตะปุ่มเมาส์ซ้ายบนองค์ประกอบและปล่อยปุ่มซ้ายบนองค์ประกอบเดียวกัน
(2) เหตุการณ์ DBCLICK: เมื่อองค์ประกอบดับเบิลคลิกเหตุการณ์ DBLCLICK จะเกิดขึ้น การคลิกเกิดขึ้นเมื่อตัวชี้เมาส์อยู่เหนือองค์ประกอบจากนั้นกดและปล่อยปุ่มเมาส์ซ้าย การคลิกสองครั้งเกิดขึ้นในเวลาอันสั้นซึ่งเป็นเหตุการณ์คลิกสองครั้ง
ตัวอย่าง:
เมื่อคลิกสองครั้งที่ปุ่มซ่อนหรือแสดงองค์ประกอบ:
$ (เอกสาร) .ready (function () {$ ("ปุ่ม"). dblclick (ฟังก์ชั่น () {$ ("p"). slidetoggle ();});});(3) เหตุการณ์ Mousedown: เมื่อตัวชี้เมาส์เคลื่อนที่เหนือองค์ประกอบและกดปุ่มเมาส์เหตุการณ์ Mousedown จะเกิดขึ้น เหตุการณ์ Mousedown นั้นแตกต่างจากเหตุการณ์การคลิกเท่านั้นที่ต้องการคีย์ที่จะต้องกดและไม่จำเป็นต้องปล่อยให้เกิดขึ้น
$ (เอกสาร) .ready (function () {$ ("ปุ่ม"). mousedown (function () {$ ("p"). slidetoggle ();});});(4) เหตุการณ์ MouseUp: เมื่อปุ่มเมาส์ผ่อนคลายในองค์ประกอบเหตุการณ์ MouseUp จะเกิดขึ้น
เหตุการณ์ MouseUp นั้นต้องใช้ปุ่มผ่อนคลายเท่านั้น เมื่อตัวชี้เมาส์อยู่เหนือองค์ประกอบปุ่มผ่อนคลายเมาส์จะกระตุ้นเหตุการณ์
$ (เอกสาร) .ready (function () {$ ("ปุ่ม"). mouseup (function () {$ ("p"). slidetoggle ();});});(5) เหตุการณ์ Mouseenter: เมื่อตัวชี้เมาส์ผ่านองค์ประกอบเหตุการณ์ Mouseenter จะเกิดขึ้น เหตุการณ์นี้ใช้เป็นส่วนใหญ่กับเหตุการณ์ Mouseleave
หมายเหตุ: แตกต่างจากเหตุการณ์ MouseOver เหตุการณ์ MouseEnter จะถูกเรียกใช้เฉพาะเมื่อตัวชี้เมาส์ผ่านองค์ประกอบที่เลือก หากตัวชี้เมาส์ผ่านองค์ประกอบเด็กใด ๆ เหตุการณ์ MouseOver ก็จะถูกเรียกใช้เช่นกัน
(6) เหตุการณ์ MouseOver: เมื่อตัวชี้เมาส์อยู่เหนือองค์ประกอบเหตุการณ์ MouseOver จะเกิดขึ้น เหตุการณ์นี้ใช้เกือบตลอดเวลากับเหตุการณ์ Mouseout
หมายเหตุ: แตกต่างจากเหตุการณ์ Mouseenter เหตุการณ์ MouseOver จะถูกเรียกใช้โดยไม่คำนึงว่าตัวชี้เมาส์จะผ่านองค์ประกอบที่เลือกหรือองค์ประกอบลูก เหตุการณ์ Mouseenter จะถูกเรียกใช้ก็ต่อเมื่อตัวชี้เมาส์ผ่านองค์ประกอบที่เลือก
$ (เอกสาร) .ready (function () {$ ("p"). mouseover (function () {$ ("p"). css ("พื้นหลังสี", "สีเหลือง");}); $ ("p") mouseout (ฟังก์ชั่น () {$ ("p")ความแตกต่างระหว่าง Mouseenter และ Mouseover
<html> <head> <script type = "text/javascript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javascript"> x = 0; y = 0; $ (เอกสาร) .ready (function () {$ ("div.over"). mouseover (function () {$ (". over span"). ข้อความ (x+= 1);}); $ ("div.enter"). mouseenter (ฟังก์ชั่น () {$ ("ป้อนช่วง") </script> </head> <body> <p> เหตุการณ์ MouseOver จะถูกเรียกใช้โดยไม่คำนึงว่าตัวชี้เมาส์จะผ่านองค์ประกอบที่เลือกหรือองค์ประกอบลูก </p> <p> เหตุการณ์ Mouseenter จะถูกเรียกใช้เฉพาะเมื่อตัวชี้เมาส์ผ่านองค์ประกอบที่เลือก </p> <div style = "พื้นหลังสี: lightgray; padding: 20px; ความกว้าง: 40%; ลอย: ซ้าย"> <h2 style = "พื้นหลังสี: สีขาว;"> เหตุการณ์ Mouseover ที่เปล่งประกาย: <span> </pan> </h2> style = "พื้นหลังสี: สีขาว;"> เหตุการณ์ Mouseenter ที่กะพริบ: <span> </span> </h2> </div> </body> </html>(7) เหตุการณ์ Mouseleaver: เมื่อตัวชี้เมาส์ผ่านองค์ประกอบเหตุการณ์ Mouseenter จะเกิดขึ้น
เหตุการณ์นี้ใช้เป็นส่วนใหญ่กับเหตุการณ์ Mouseleave
หมายเหตุ: แตกต่างจากเหตุการณ์ Mouseout เหตุการณ์ Mouseleave จะถูกเรียกใช้เฉพาะเมื่อตัวชี้เมาส์ออกจากองค์ประกอบที่เลือก หากตัวชี้เมาส์ออกจากองค์ประกอบของเด็กใด ๆ เหตุการณ์ MouseOut ก็จะถูกเรียกใช้เช่นกัน
(8) เหตุการณ์ Mouseout
เหตุการณ์ Mouseout เกิดขึ้นเมื่อตัวชี้เมาส์ถูกย้ายออกไปจากองค์ประกอบ
เหตุการณ์นี้ใช้เกือบตลอดเวลากับเหตุการณ์ MouseOver
หมายเหตุ: แตกต่างจากเหตุการณ์ Mouseleave เหตุการณ์ MouseOut จะถูกเรียกใช้โดยไม่คำนึงว่าตัวชี้เมาส์ออกจากองค์ประกอบที่เลือกหรือองค์ประกอบเด็กใด ๆ เหตุการณ์ Mouseleave จะถูกเรียกใช้ก็ต่อเมื่อตัวชี้เมาส์ออกจากองค์ประกอบที่เลือก
โปรดดูตัวอย่างการสาธิตต่อไปนี้
<html> <head> <script type = "text/javascript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javascript"> x = 0; y = 0; $ (เอกสาร) .ready (function () {$ ("div.out"). mouseout (function () {$ (". out Span"). ข้อความ (x+= 1);}); $ ("div.leave"). mouseleave (ฟังก์ชั่น () {$ (" </script> </head> <body> <p> เหตุการณ์ Mouseout จะถูกเรียกใช้โดยไม่คำนึงว่าตัวชี้เมาส์ออกจากองค์ประกอบที่เลือกหรือองค์ประกอบลูกใด ๆ </p> <p> เหตุการณ์ Mouseleave จะถูกเรียกใช้เฉพาะเมื่อตัวชี้เมาส์ออกจากองค์ประกอบที่เลือก </p> <div style = "พื้นหลังสี: lightgray; padding: 20px; ความกว้าง: 40%; ลอย: ซ้าย"> <h2 style = "พื้นหลังสี: สีขาว;"> เหตุการณ์เมาส์ที่เปล่งประกาย: <span> </pan> </h2> style = "พื้นหลังสี: สีขาว;"> เหตุการณ์ Mouseleave Flashed: <span> </span> </h2> </div> </body> </html>หมายเหตุ: บทความนี้เป็นต้นฉบับที่อยู่: http://www.cnblogs.com/wanghuih/p/5569438.html
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น