1. รูปแบบย่อย
เมื่อออกแบบเว็บไซต์เราจำเป็นต้องออกแบบรูปแบบย่อยโมดอลบางอย่างเช่น
ขั้นตอนนี้ใช้งานง่ายเพียงแค่ Div+CSS ก็โอเคโปรดดูรหัส:
การคัดลอกรหัสมีดังนี้:
<div> </div>
<div>
<div>
<enter> การคลิกพื้นที่บล็อกสามารถเปลี่ยนตำแหน่งของฉัน </enter>
</div>
</div>
การคัดลอกรหัสมีดังนี้:
. modal-background
-
พื้นหลังสี: #999999;
ด้านล่าง: 0;
ซ้าย: 0;
ความทึบ: 0.3;
ตำแหน่ง: แก้ไข;
ขวา: 0;
ด้านบน: 0;
z-index: 1100;
-
.modal-window
-
พื้นหลังสี: #FFFFF;
ชายแดน: 1px Solid #6B94AD;
Box-Shadow: 5px 5px 5px #6b94ad;
Font-Family: 'Microsoft Yahei';
ขนาดตัวอักษร: 12px;
ความสูง: 120px;
ซ้าย: 50%;
ขอบซ้าย: -160px;
ระยะขอบด้านบน: -160px;
ความทึบ: 1;
ตำแหน่ง: แก้ไข;
ด้านบน: 50%;
ความกว้าง: 320px;
z-index: 1110;
-
.modal-window .head
-
ความสูง: 25px;
สี: #FFFF;
Font-Weight: 600;
ภาพพื้นหลัง: -Moz-Linear-Gradient (บนสุด, #4A8CC5, #2963A5);
ภาพพื้นหลัง: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, สี-หยุด (0, #4a8cc5), การหยุดสี (1, #2963a5));
ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorStr = '#4A8CC5', endColorSTR = '#2963A5', gradientType = '0'); ::::::::::::::::::::::: กระทาน
-
. Modal-Window. เฮดศูนย์กลาง
-
Padding-Top: 2px;
-
การเพิ่ม HTML และ CSS ข้างต้นสามารถบรรลุผลของรูปแบบโมดอลข้างต้นได้อย่างง่ายดาย ที่เหลือ: 50%; ด้านบน: 50%;
แน่นอนว่าขนาดของรูปแบบโมดอลถูกเขียนขึ้นในชั้นเรียนรูปแบบหน้าต่าง
การคัดลอกรหัสมีดังนี้:
<div> </div>
<div>
<div>
<enter> การคลิกพื้นที่บล็อกสามารถเปลี่ยนตำแหน่งของฉัน </enter>
</div>
</div>
บรรทัดที่สองของรหัสถูกผนวกเข้ากับคลาสสไตล์. หน้าต่าง-หน้าต่างเพื่อแทนที่ขนาดและตำแหน่งในคลาส
การคัดลอกรหัสมีดังนี้:
. -list-window
-
ความกว้าง: 600px;
ความสูง: 400px;
ขอบซ้าย: -300px;
ระยะขอบด้านบน: -200px;
-
ดังที่แสดง
จะเห็นได้ว่าการใช้งานขั้นตอนนี้เป็นเรื่องง่ายมาก
2. เมื่อเมาส์คลิกที่หัวของรูปแบบย่อยวิธีลากและเลื่อนรูปแบบย่อย? หลังจากแนะนำ JQ เราต้องการสคริปต์เพียงไม่กี่ตัวเพื่อแก้ปัญหาฟังก์ชั่นเล็ก ๆ นี้ ถ้าคุณไม่เชื่อลองดูสิ
การคัดลอกรหัสมีดังนี้:
var ซ้าย, ด้านบน, $ this;
$ (เอกสาร) .Delegate ('. modal-window .head', 'mousedown', ฟังก์ชั่น (e) {
ซ้าย = e.clientx, top = e.clienty, $ this = $ (นี่) .css ('เคอร์เซอร์', 'ย้าย');
this.setcapture?
this.setCapture ()
this.onmousemove = function (ev) {mousemove (ev || event);
this.onmouseup = mouseup
): $ (เอกสาร). -bind ("Mousemove", Mousemove). -bind ("Mouseup", Mouseup);
-
ฟังก์ชั่น mousemove (e) {
var target = $ this.parents ('. modal-window');
var l = math.max ((e.clientx -ซ้าย + number (target.css ('margin -left'). แทนที่ (/px $/, '')) || 0), -target.position () ซ้าย);
var t = math.max ((e.clienty -top + number (target.css ('margin -top') แทนที่ (/px $/, '')) || 0), -target.position () สูงสุด);
l = math.min (l, $ (หน้าต่าง) .width () - target.width () - target.position (). ซ้าย);
t = math.min (t, $ (หน้าต่าง) .height () - target.height () - target.position (). ด้านบน);
ซ้าย = e.clientx;
top = e.clienty;
target.css ({'margin-left': l, 'margin-top': t});
-
ฟังก์ชั่น Mouseup (e) {
var el = $ this.css ('เคอร์เซอร์', 'เริ่มต้น') รับ (0);
El.Releasecapture?
-
El.Releasecapture ()
el.onmousemove = el.onmouseup = null
): $ (เอกสาร) .unbind ("Mousemove", Mousemove) .Unbind ("Mouseup", Mouseup);
-
รหัสนี้สั้นมากและสามารถทำงานได้อย่างราบรื่นในเบราว์เซอร์ต่างๆ
ในความเป็นจริงหลักการดำเนินการของมันนั้นง่ายมากและแบ่งออกเป็นสามขั้นตอน:
①เมื่อเมาส์อยู่ภายใต้ mousedown ที่หัวของแบบฟอร์มโมดอลผูก mousemove และเหตุการณ์เมาส์กับเอกสารทันที
②เมื่อเมาส์ไม่ปรากฏขึ้น (ไม่มีเมาส์) ถ้าเมาส์เคลื่อนที่ในรูปแบบให้เปิดใช้งานฟังก์ชั่น mousemove และย้ายตำแหน่งของรูปแบบทั้งหมดในเวลาโดยการคำนวณระยะทางที่เมาส์เคลื่อนที่
③เมื่อเมาส์เด้งขึ้น (Mouseup) โทรไปที่เหตุการณ์ MouseUp เพื่อคลายเหตุการณ์ Mousemove และเหตุการณ์ MouseUp ที่ผูกไว้กับเอกสาร
หลักการของกระบวนการทั้งหมดคือ: เมื่อเมาส์ mousedown ถูกมูสลงเหตุการณ์การเคลื่อนไหวของเมาส์จะถูกถ่ายโอนไปยังเอกสารและทั้งแบบฟอร์มจะถูกประมวลผลผ่านเหตุการณ์การเคลื่อนไหวของเมาส์ในเอกสาร
นอกจากนี้ยังมีเคล็ดลับเล็ก ๆ ใน Mousemove ซึ่งเป็นตัวแปรด้านซ้าย เมาส์ย้ายไปไกลแค่ไหน
หลังจากการวิเคราะห์รหัสนี้พบว่าเมาส์เคลื่อนย้ายแบบฟอร์มหรือองค์ประกอบใด ๆ ในเอกสารค่อนข้างง่าย
ตัวอย่างเช่นหากคุณต้องการเปลี่ยนขนาดของแบบฟอร์มโดยการลากและลดลงเราเพียงแค่ต้องปรับขนาดของแบบฟอร์มในฟังก์ชั่นการจัดการเหตุการณ์ Mousemove และมันจะโอเค ปรับปรุงอีกครั้ง?
บางคนอาจถามว่า setcapture และ retreasecapture ทำอะไรตามลำดับ? อันที่จริงแล้วนี่คือความเข้ากันได้ของ IE เท่านั้น SetCapture อนุญาตให้องค์ประกอบปัจจุบันจับเหตุการณ์ทั้งหมดของเมาส์