فكرة:
1. احصل على مسافة الجسم من الجانب العلوي والأيسر؛
2. الحصول على كائن العنصر؛
3. احصل على مسافة التمرير لشريط التمرير عند تمرير شريط التمرير؛
4. يتم تنفيذ الوظيفة عندما يتم تمرير شريط التمرير: تصبح مسافة الكائن من الأعلى/اليسار هي المسافة الأصلية من الأعلى/اليسار + عدد وحدات البكسل التي تم تمريرها بواسطة شريط التمرير.
كود html:
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<العنوان></العنوان>
</الرأس>
<الجسم>
<div معرف = "يسار">
<img src="images/z1.jpg" alt=""/>
</div>
<div معرف = "يمين">
<img src="images/z2.jpg" alt=""/>
</div>
</الجسم>
</html> كود CSS:
*{
الهامش: 0;
الحشو: 0؛
}
جسم{
العرض: 2000 بكسل؛
الارتفاع: 2000 بكسل؛
}
.غادر{
الموقف: مطلق؛
العرض: 110 بكسل؛
الارتفاع: 110 بكسل؛
أعلى: 100 بكسل؛
اليسار: 50 بكسل؛
}
.يمين{
الموقف: مطلق؛
العرض: 110 بكسل؛
الارتفاع: 110 بكسل؛
أعلى: 100 بكسل؛
اليسار: 1360 بكسل؛
} كود js:
var leftT;// المسافة بين اليسار p والأعلى var leftL;// المسافة بين اليسار p واليسار var rightT;// المسافة بين اليمين p والأعلى var rightL;/ / المسافة بين اليمين p واليسار var objLeft;// كائن مستند P على اليسار var objRight;// كائن مستند P على اليمين function place(){
objLeft=document.getElementById("left");
objRight=document.getElementById("right");
leftT=document.defaultView.getComputedStyle(objLeft,null).top;
leftL=document.defaultView.getComputedStyle(objLeft,null).left;
rightT=document.defaultView.getComputedStyle(objRight,null).top;
rightL=document.defaultView.getComputedStyle(objRight,null).left;
}
// احصل على عدد وحدات البكسل التي تم تمريرها بواسطة وظيفة شريط التمرير move(){
var التمريرT=document.documentElement.scrollTop;
var التمريرL=document.documentElement.scrollLeft;
// اضبط وحدات البكسل من الجانب الأيسر إلى الأعلى objLeft.style.top=parseInt(leftT)+scrollT+"px";
objLeft.style.left=parseInt(leftL)+scrollL+"px";
objRight.style.top=parseInt(rightT)+scrollT+"px";
objRight.style.left=parseInt(rightL)+scrollL+"px";
}
window.onload=place;
window.onscroll=move التوصيات ذات الصلة: [فيديو تعليمي لجافا سكريبت]
ما سبق هو استخدام js لإصلاح الصورة في موضع معين على الشاشة! لمزيد من التفاصيل، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع php الصيني!
