Artikel ini menjelaskan efek mengambang gambar sederhana yang diimplementasikan oleh JS. Bagikan untuk referensi Anda, sebagai berikut:
Menggunakan objek jendela untuk mencapai efek mengambang dari suatu gambar
1. Ada div iklan yang ingin kami kendalikan, titik awalnya (0,0)
2. Atur kecepatan horizontal dan vertikal
3. Kontrol AD Div Mobile
1) Apakah div iklan mencapai batas
2) Jika kita mencapai batas, kita mengatur kecepatan untuk bergerak secara terbalik
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<title> unt titled document </title> <style div {absolute: absolute: absolute: absolute: absolute: absolute; posisi {position {titleute; Filter: alpha (opacity = 100);/* yaitu*/-moz -opacity: 1;/* moz + ff*/opacity: 1;/* browser yang mendukung css3 (ff 1.5 juga mendukung)*/} </style> </head> <div id = "divimg"> <mg src = "123." 123. " type = "text/javascript"> // Dapatkan objek div di mana gambarnya adalah var img = document.getElementById ("divimg"); // Atur koordinat sudut kiri atas div, koordinat titik awal var x = 10, y = 10; // Atur kecepatan perjalanan gambar var xspeed = 2, yspeed = 1; // Atur tinggi dan lebar mengambang maksimum gambar var w = document.documentelement.clientwidth-110, h = document.documentelement.clientheight-160; fungsi floatimg () {// Bandingkan apakah disk gambar mencapai batas // jika kita mencapai batas, kita mengontrol gambar untuk mengubah arah jika (x> w || x <0) {xspeed = -xspeed; } if (y> h || y <0) {yspeed = -yspeed; } // Jika batas tidak tercapai, atur koordinat sudut kiri atas gambar // Atur nilai koordinat koordinat koordinat + kecepatan x + = xspeed; y+= yspeed; img.style.top = y+"px"; img.style.left = x+"px"; // tunda Panggilan fungsi floatimg (), dan hubungi setTimeout ("floatimg ()"), 40); } floatimg (); </script> </body> </html>Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.