في أبريل من هذا العام، قمت بإنشاء تأثير السحب والإسقاط لقلب الصفحة في مسكني.
لقد تم تصميمه في الأصل لموقع مدونتي الخاصة. خطرت لي الفكرة يوم الثلاثاء، لقد تغيبت عن الدرس لمدة يومين يومي الأربعاء والخميس لأحسب الإحداثيات أتوقع أن المراجعات كانت جيدة جدًا بعد إصداره، وقد سألني العديد من الأشخاص عن كيفية تعديل هذا التأثير حتى أتمكن من استخدامه على موقع الويب الخاص بي، لذلك أقوم بنشر هذا المنشور لشرح مبدأ هذا التأثير بالتفصيل.
أطلق على هذا التأثير رسميًا اسم ThrowPage، وسأواصل بالتأكيد تحسين هذا التأثير وإصدار الكود المغلف ليتصل به الجميع، ربما بعد شهر، أو ربما بعد عام، In Me God Trust
سيتم كتابة هذه المقالة بترتيب ثلاث طبقات منفصلة: الطبقة الهيكلية، وطبقة العرض، والطبقة السلوكية:
تشغيل مربع التعليمات البرمجية
<أتش تي أم أل>
<الرأس>
<title>صفحة الرمي</title>
<نمط النوع = "نص/CSS">
أتش تي أم أل، الجسم {
العرض: 100%؛
الارتفاع: 100%؛
الحدود: 0 بكسل؛
الهامش: 0 بكسل؛
تجاوز: مخفي؛
}
#قائمة طعام{
العرض: 1000 بكسل؛
الارتفاع: 500 بكسل؛
تجاوز: مخفي؛
الخلفية: أزرق فاتح؛
}
.صفحة{
الموقف:مطلق؛
العرض: 300 بكسل؛
الارتفاع: 400 بكسل؛
اليسار: 350 بكسل؛
أعلى: 50 بكسل؛
الخلفية: #FFF؛
الحدود: 1 بكسل صلب #999؛
}
أول {
نمط القائمة: لا شيء؛
الارتفاع: 320 بكسل؛
الهامش: 20 بكسل؛
الحشو: 0 بكسل؛
الخلفية:#EEE؛
}
لي {
حجم الخط: 12 بكسل؛
الارتفاع: 20 بكسل؛
ارتفاع الخط: 20 بكسل؛
الحد السفلي:1px متقطع #999؛
}
لي سبان{
تعويم: صحيح؛
}
لى {
اللون: #000؛
زخرفة النص: لا شيء؛
}
لى:تحوم{
زخرفة النص:تسطير؛
}
.نصيحة{
عرض:كتلة؛
الارتفاع: 20 بكسل؛
الهامش: 0 بكسل 20 بكسل؛
ارتفاع الخط: 20 بكسل؛
محاذاة النص:مركز؛
حجم الخط: 12 بكسل؛
الخلفية:#999;
}
</نمط>
</الرأس>
<الجسم>
<نوع البرنامج النصي = "نص/جافا سكريبت">
معرف الوظيفة (الكائن) {
إرجاع document.getElementById(obj);
}
صفحة فار؛
فارمكس;
فار MD=false;
فار ش=0;
فار أون=خطأ;
window.onload=function(){
page=id("menu").getElementsByTagName("div");
إذا(page.length>0){
page[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"سحب وإفلات الصفحة</span>";
page[i].id="page"+i;
الصفحة[i].i=i;
الصفحة[i].onmousedown=function(e){
إذا (! أون) {
إذا (!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
mx=350-ex;
this.style.cursor="move";
md=true;
إذا (المستند.الكل){
this.setCapture();
}آخر{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
الصفحة[i].onmousemove=function(e){
إذا (مد) {
أون=صحيح;
إذا (!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
this.style.left=ex+mx+"px";
إذا (this.offsetLeft<350){
var cu=(this.i==0)?page.length-1:this.i-1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
ش = cu؛
}
إذا (this.offsetLeft>350){
var cu=(this.i==page.length-1)?0:this.i+1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
ش = cu؛
}
}
}
الصفحة[i].onmouseup=function(){
this.style.cursor="default";
md=false;
إذا (this.offsetLeft==350){
en=false;
}
إذا (المستند.الكل){
this.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;
فلاين(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;
فلاين(id(obj.id));
}
}
}
وظيفة فلاين (الكائن) {
إذا (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";
en=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";
en=false;
}
}
}
</script>
<div معرف = "القائمة">
<div class="page">
<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 style="background:coral;"><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> راقصة</a>< / لى>
<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="page">
<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"> عام 2000 الماضي</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> الإرهابي الأخضر</a></li>
</ul>
</div>
<div class="page">
<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>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> حزب تساي الشيوعي بجنوب تايوان</a></li>
</ul>
</div>
</div>
</الجسم>
</html>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]
الطبقة الهيكلية
كيفية توسيع محتويات الدليل حسب الصفحة؟ ربما كان الأمر كذلك، على الأقل هكذا كتبتها
<div معرف = "القائمة">
<div class="page">
<ul>
<li><span>09-11-25</span><a>أغنية الحب 1980</a></li>
<li><span>09-11-25</span><a>أغنية الحب 1990</a></li>
<li><span>09-11-25</span><a>أغنية حب 2000</a></li>
<li><span>09-11-25</span><a>الأم</a></li>
</ul>
<span class="tip">سحب وإسقاط نصف صفحة</span>
</div>
<div class="page">
<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">سحب وإسقاط صفحتين لقلب الصفحات</span>
</div>
</div>
.jpg)
<ul> هي قائمة بكل صفحة، الجزء الرمادي الفاتح في الصورة
<li> هو عنصر في القائمة، الجزء المرجاني في الصورة
<span class="tip"> يجب ألا يظهر في ملف xhtml ويجب إضافته بواسطة js، وهو علامة الفهرس الموجودة أسفل كل صفحة، الجزء الرمادي الداكن في الصورة
<div class="page"> هي الصفحة الموجودة في الدليل، الجزء الأبيض في الصورة
<div id="menu"> هو دليل يحتوي على كافة الصفحات، الجزء الأزرق الساطع في الصورة. بالطبع، إذا لم يكن هناك أي شيء آخر على الصفحة باستثناء هذا التأثير، فلا يلزم كتابة هذه العلامة، فإن العلامة الأصلية لجميع <div class = "page"> هي <body>
ربما ستقول أن الدليل يجب أن يكون أيضًا <ul>، لذا يجب كتابته بهذه الطريقة
<ul معرف = "القائمة">
<لي فئة = "صفحة">
<ul>
<li><span>09-11-25</span><a>أغنية حب 1980</a></li>
<li><span>09-11-25</span><a>أغنية الحب 1990</a></li>
<li><span>09-11-25</span><a>أغنية حب 2000</a></li>
<li><span>09-11-25</span><a>الأم</a></li>
</ul>
<span class="tip">سحب وإسقاط نصف صفحة</span>
</لي>
<ul class="page">
<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">سحب وإسقاط صفحتين لقلب الصفحات</span>
</لي>
</لي>
وهذا بالفعل أكثر دلالة، ولكن المشكلة ستظهر على الفور