ในเดือนเมษายนของปีนี้ ฉันได้สร้างเอฟเฟกต์การลากและวางในการพลิกหน้าในหอพักของฉัน
เดิมทีมันถูกออกแบบมาสำหรับเว็บไซต์บล็อกของฉันเอง เมื่อวันอังคาร ฉันโดดเรียนเป็นเวลาสองวันในวันพุธและวันพฤหัสบดีเพื่อนับพิกัด ฉันกลับบ้านในวันศุกร์และเขียนเวอร์ชันแรกในตอนเย็น คาดว่ารีวิวจะค่อนข้างดีหลังจากเปิดตัว หลายๆ คนถามฉันว่าฉันควรแก้ไขเอฟเฟกต์นี้อย่างไรจึงจะสามารถนำไปใช้บนเว็บไซต์ของฉันได้ ดังนั้นฉันจึงโพสต์บทความนี้เพื่ออธิบายหลักการของเอฟเฟกต์นี้โดยละเอียด
ฉันตั้งชื่อเอฟเฟกต์นี้อย่างเป็นทางการว่า ThrowPage และฉันจะปรับปรุงเอฟเฟกต์นี้ต่อไปและเผยแพร่โค้ดแบบห่อหุ้มให้ทุกคนได้โทรหากัน อาจจะเป็นหนึ่งเดือนต่อมา หรืออาจจะอีกหนึ่งปีต่อมา In Me God Trust
บทความนี้จะเขียนตามลำดับชั้นที่แยกจากกันสามชั้น ได้แก่ ชั้นโครงสร้าง ชั้นการนำเสนอ และชั้นพฤติกรรม:
เรียกใช้กล่องรหัส
<html>
<หัว>
<title>ThrowPage</title>
<style type="text/css">
HTML,เนื้อหา{
ความกว้าง:100%;
ความสูง:100%;
เส้นขอบ:0px;
ระยะขอบ:0px;
ล้น: ซ่อน;
-
#เมนู{
ความกว้าง:1000px;
ความสูง:500px;
ล้น: ซ่อน;
พื้นหลัง:สีฟ้าอ่อน;
-
.หน้าหนังสือ{
ตำแหน่ง:แน่นอน;
ความกว้าง:300px;
ความสูง:400px;
ซ้าย:350px;
ด้านบน:50px;
พื้นหลัง:#FFF;
เส้นขอบ: 1px ทึบ #999;
-
อูล{
รายการสไตล์: ไม่มี;
ความสูง:320px;
ระยะขอบ:20px;
ช่องว่างภายใน:0px;
พื้นหลัง:#EEE;
-
ลี่{
ขนาดตัวอักษร:12px;
ความสูง:20px;
ความสูงของบรรทัด:20px;
ขอบล่าง:1px ประ #999;
-
ลีสแปน{
ลอย:ขวา;
-
ลี้อา{
สี:#000;
การตกแต่งข้อความ: ไม่มี;
-
ลี้:โฮเวอร์{
การตกแต่งข้อความ:ขีดเส้นใต้;
-
.เคล็ดลับ{
จอแสดงผล: บล็อก;
ความสูง:20px;
ระยะขอบ:0px 20px;
ความสูงของบรรทัด:20px;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
ขนาดตัวอักษร:12px;
พื้นหลัง:#999;
-
</สไตล์>
</หัว>
<ร่างกาย>
<script type="text/javascript">
รหัสฟังก์ชัน (obj) {
กลับ document.getElementById(obj);
-
หน้า var;
วาร์มเอ็กซ์;
var md=false;
วาร์ช=0;
var en=false;
window.onload=ฟังก์ชั่น(){
หน้า=id("เมนู").getElementsByTagName("div");
ถ้า(หน้าความยาว>0){
หน้า[0].style.zIndex=2;
-
สำหรับ(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"ลากและวางหน้า</span>";
หน้า[i].id="หน้า"+i;
หน้า[i].i=i;
หน้า [i] .onmousedown = ฟังก์ชั่น (e) {
ถ้า(!th){
ถ้า(!e){e=e||window.event;}
อดีต=e.pageX?e.pageX:อดีต;
mx=350-อดีต;
this.style.cursor = "ย้าย";
เอ็มดี=จริง;
ถ้า (document.all){
นี้.setCapture();
}อื่น{
window.captureEvents (Event.MOUSEMOVE|Event.MOUSEUP);
-
-
-
หน้า [i] .onmousemove = ฟังก์ชั่น (e) {
ถ้า(เอ็มดี){
th=จริง;
ถ้า(!e){e=e||window.event;}
อดีต=e.pageX?e.pageX:อดีต;
this.style.left=ex+mx+"px";
ถ้า(this.offsetLeft<350){
var cu=(this.i==0)?page.length-1:this.i-1;
หน้า[sh].style.zIndex=0;
หน้า[cu].style.zIndex=1;
this.style.zIndex=2;
ช=ลูกบาศ์ก;
-
ถ้า (this.offsetLeft>350){
var cu=(this.i==page.length-1)?0:this.i+1;
หน้า[sh].style.zIndex=0;
หน้า[cu].style.zIndex=1;
this.style.zIndex=2;
ช=ลูกบาศ์ก;
-
-
-
หน้า [i] .onmouseup = ฟังก์ชั่น () {
this.style.cursor = "ค่าเริ่มต้น";
เอ็มดี=เท็จ;
ถ้า(this.offsetLeft==350){
th=false;
-
ถ้า (document.all){
นี้.releaseCapture();
}อื่น{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
-
การบินออก (นี้);
-
-
-
ฟังก์ชั่นลอยออก (obj) {
ถ้า(obj.offsetLeft < 350){
ถ้า ( (obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}อื่น{
obj.style.left= 50 +"px";
obj.style.zIndex=0;
flyin(id(obj.id));
-
-
ถ้า(obj.offsetLeft > 350){
ถ้า((obj.offsetLeft + 10) < 650){
obj.style.left=obj.offsetLeft + 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}อื่น{
obj.style.left= 650 + "px";
obj.style.zIndex=0;
flyin(id(obj.id));
-
-
-
ฟังก์ชั่น flyin (obj) {
ถ้า(obj.offsetLeft<350){
ถ้า((obj.offsetLeft + 10) < 350){
obj.style.left=obj.offsetLeft + 10+ "px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}อื่น{
obj.style.left= 350 +"px";
th=false;
-
-
ถ้า(obj.offsetLeft>350){
ถ้า((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}อื่น{
obj.style.left=350+"px";
th=false;
-
-
-
</สคริปต์>
<div id="เมนู">
<div class="หน้า">
<ul>
<li><span>25-09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> พันธมิตร</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> เกาะที่สวยงาม</a></li>
<li style="พื้นหลัง:coral;"><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> นักเต้น</a>< /li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> จับมือกัน</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> บ้านรักแรกสุด</a></li>
</ul>
</div>
<div class="หน้า">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> อ่า! คนรักที่หยุดไม่ได้</a></li>
<li><span>25-09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> เครือข่าย</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> สายฝนที่ชวนหลงใหล</a></li>
<li><span>25-09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> ปี 2000 ที่ผ่านมา</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> ผู้ก่อการร้ายสีเขียว</a></li>
</ul>
</div>
<div class="หน้า">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> เวลาค่อยๆ หายไป</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> บ่อน้ำร้อนอันเงียบสงบ</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> ดอกไม้บาน</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> อาฮุยเลี้ยงสุนัข</a></li >
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> จริงหรือปลอม</a></li>
<li><span>25-09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> พรรคคอมมิวนิสต์ไช่ไต้หวันใต้</a></li>
</ul>
</div>
</div>
</ร่างกาย>
</html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
ชั้นโครงสร้าง
จะขยายเนื้อหาของไดเร็กทอรีทีละหน้าได้อย่างไร? อาจจะเป็นเช่นนั้น อย่างน้อยนั่นเป็นวิธีที่ฉันเขียนมัน
<div id="เมนู">
<div class="หน้า">
<ul>
<li><span>09-11-25</span><a>เพลงรัก 1980</a></li>
<li><span>09-11-25</span><a>เพลงรัก 1990</a></li>
<li><span>25-09-11-25</span><a>เพลงรัก 2000</a></li>
<li><span>09-11-25</span><a>แม่</a></li>
</ul>
<span class="tip">ลากและวาง 1/2 หน้า</span>
</div>
<div class="หน้า">
<ul>
<li><span>09-11-25</span><a>พันธมิตร</a></li>
<li><span>09-11-25</span><a>หายไป</a></li>
<li><span>09-11-25</span><a>วัยเด็ก</a></li>
<li><span>09-11-25</span><a>เด็กเลี้ยงแกะ</a></li>
</ul>
<span class="tip">2/2 หน้าลากและวางเพื่อเปลี่ยนหน้า</span>
</div>
</div>
.jpg)
<ul> คือรายการของแต่ละหน้า ซึ่งเป็นส่วนสีเทาอ่อนในภาพ
<li> คือรายการที่อยู่ในรายการ ส่วนปะการังในภาพ
<span class="tip"> ไม่ควรปรากฏใน xhtml และควรเพิ่มด้วย js ซึ่งเป็นเครื่องหมายดัชนีใต้แต่ละหน้า ซึ่งเป็นส่วนสีเทาเข้มในภาพ
<div class="page"> คือเพจในไดเร็กทอรี ส่วนสีขาวในภาพ
<div id="menu"> เป็นไดเร็กทอรีที่มีทุกหน้า ซึ่งเป็นส่วนสีฟ้าสดใสในภาพ แน่นอนว่า หากไม่มีสิ่งใดบนหน้านอกจากเอฟเฟกต์นี้ ไม่จำเป็นต้องเขียนแท็กนี้ ดังนั้นแท็กหลักของ <div class="page"> ทั้งหมดจะเป็น <body>
บางทีคุณอาจบอกว่าไดเร็กทอรีควรเป็น <ul> ดังนั้นจึงควรเขียนแบบนี้
<ul id="เมนู">
<li class="หน้า">
<ul>
<li><span>09-11-25</span><a>เพลงรัก 1980</a></li>
<li><span>09-11-25</span><a>เพลงรัก 1990</a></li>
<li><span>25-09-11-25</span><a>เพลงรัก 2000</a></li>
<li><span>09-11-25</span><a>แม่</a></li>
</ul>
<span class="tip">ลากและวาง 1/2 หน้า</span>
</li>
<ul class="หน้า">
<ul>
<li><span>09-11-25</span><a>พันธมิตร</a></li>
<li><span>09-11-25</span><a>หายไป</a></li>
<li><span>09-11-25</span><a>วัยเด็ก</a></li>
<li><span>09-11-25</span><a>เด็กเลี้ยงแกะ</a></li>
</ul>
<span class="tip">2/2 หน้าลากและวางเพื่อเปลี่ยนหน้า</span>
</li>
</li>
นี่เป็นความหมายมากกว่าจริงๆ แต่ปัญหาจะเกิดขึ้นทันที