تصف هذه المقالة طريقة JS لتحقيق تأثير عائم الصورة. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
الوصف: عند فتح صفحة الويب ، سترى صورًا تطفو باستمرار ، انقر للاتصال بالصفحات الأخرى ؛ سيكون لها تأثير رئيسي!
انسخ الرمز كما يلي: <html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<title> اختبار </title>
<type type = "text/css">
#{العرض: 100 ٪ ؛ الارتفاع: 3000px ؛}
</style>
</head>
<body>
<div id = "all">
<div id = "img" style = "الموضع: مطلق ؛ z-index: 99 ؛">
<a href = "#" target = "_ blank"> <img src = "images/opvti.jpg" style = "cursor: pointer ؛" النمط = "المؤشر: مؤشر ؛" /> </a>
<script language = "javaScript">
<!-ابدأ
var xpos = document.body.clientwidth - 20 ؛
var ypos = document.body.clientheight / 2 ؛
var step = 1 ؛
var delay = 10 ؛
var height = 0 ؛
var hoffset = 0 ؛
var woffset = 0 ؛
var yon = 0 ؛
var xon = 0 ؛
var pause = true ؛
فاين الفاصل.
img.style.top = ypos ؛
الوظيفة changepos () {
العرض = document.body.clientwidth ؛
الارتفاع = document.body.clientheight ؛
hoffset = img.offsetheight ؛
woffset = img.offsetWidth ؛
img.style.left = xpos + document.body.scrollleft ؛
img.style.top = ypos + document.body.scrolltop ؛
إذا (yon) {
ypos = ypos + خطوة ؛
} آخر {
ypos = ypos - خطوة ؛
}
if (ypos <0) {
يون = 1 ؛
ypos = 0 ؛
}
if (ypos> = (الارتفاع - hoffset)) {
yon = 0 ؛
ypos = (الارتفاع - hoffset) ؛
}
إذا (xon) {
XPOS = XPOS + Step ؛
} آخر {
XPOS = XPOS - خطوة ؛
}
if (xpos <0) {
xon = 1 ؛
XPOS = 0 ؛
}
if (xpos> = (width - woffset)) {
xon = 0 ؛
XPOS = (العرض - woffset) ؛
}
}
وظيفة start () {
img.vibility = "مرئي" ؛
الفاصل الزمني = setInterval ('changepos ()' ، التأخير) ؛
}
دالة wave_resume () {
إذا (توقف) {
clearinterval (الفاصل) ؛
وقفة = خطأ ؛
} آخر {
الفاصل الزمني = setInterval ('changepos ()' ، التأخير) ؛
وقفة = صواب ؛
}
}
يبدأ()؛
// end ->
</script>
</div>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.