Artikel ini menjelaskan efek JS yang meniru tombol gambar gambar stasiun gambar Tencent. Bagikan untuk referensi Anda, sebagai berikut:
Tangkapan layar efek berjalan adalah sebagai berikut:
Kode spesifiknya adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <meta http-equiv = "content-type" content = "TEPP/TEKP/TEKP/TEKP/TEKS/TEKP/TEKP/TEKS/TEKS/TEKS/TEKST/TEKST/TEKST/TEKST/TEKST/TEKST/TEPT/TEPT/TEKST/TEKST/TEKST. Flip </ title> <style type = "text/css"> *{margin: none; padding: tidak ada; } body {latar belakang:#000000; } #tip {position: absolute; Lebar: 564px; Tinggi: 362px; Atas: -362px; latar belakang: url (../ img/tencenimg/tiplayer.png); } #left {position: absolute; Lebar: 101px; Tinggi: 95px; latar belakang: url (../ img/tencenimg/left.png); BORDER: 1PX SOLID #F2F2F2; Tampilan: Tidak Ada; Kursor: Tangan; } #right {position: absolute; Lebar: 101px; Tinggi: 95px; latar belakang: url (../ img/tencenimg/right.png); BORDER: 1PX SOLID #F2F2F2; Tampilan: Tidak Ada; Kursor: Tangan; } #mousexposition {width: 30px; Tinggi: 20px; Warna: #FFFFFF; Tampilan: inline; } #mousePosition {width: 30px; Tinggi: 20px; Warna: #FFFFFF; Tampilan: inline; } #divtop {width: 30px; Tinggi: 20px; Warna: #FFFFFF; Tampilan: inline; } </tyle> <script type = "text/javascript"> function init () {var ml = document.body.clientwidth/2 - 40; document.geteLementById ("kiri"). style.pixeltop = 300; document.geteLementById ("kanan"). style.pixeltop = 300; document.geteLementById ("kiri"). style.pixelleft = ml - 101*4; document.geteLementById ("kanan"). style.pixelleft = ml + 101*4; var tip = document.geteLementById ("tip"); var inith = (document.body.clientwidth - tip.offsetWidth)/2; document.geteLementById ("tip"). style.left = inith; document.geteLementById ("tip"). style.pixeltop = -362; } function mouseposition (ev) {if (ev.pagex || ev.pagey) {return {x: ev.pagex, y: ev.pagey}; } return {x: ev.clientx + document.body.scrollleft - document.body.clientleft, y: ev.clienty + document.body.scrolltop - document.body.clienttop}; } document.onMouseMove = mouseMove; function mousemove (e) {e = e || window.event; var mousepos = mouseposition (e); var mid = document.body.clientwidth/2; document.geteLementById ('mousexposition'). innerHtml = mousepos.x; document.geteLementById ('mouseyposition'). innerhtml = mousepos.y; if (mousepos.x <mid) {document.geteLementById ("left"). style.display = "block"; document.geteLementById ("kanan"). style.display = "none"; } else if (mousepos.x> mid) {document.geteLementById ("right"). style.display = "block"; document.geteLementById ("kiri"). style.display = "none"; }} function show () {if (document.geteLementById ("tip"). style.pixeltop <80) {document.geteLementById ("tip"). style.pixeltop += 20; document.geteLementById ("divtop"). innerHtml = document.geteLementById ("tip"). style.pixeltop; setTimeout ("show ()", 10)}} fungsi hide () {if (document.geteLementById ("tip"). style.pixeltop> -362) {document.geteLementById ("tip"). style.pixeltop -= 20; document.geteLementById ("divtop"). innerHtml = document.geteLementById ("tip"). style.pixeltop; setTimeout("hide()",10) } } </script> </head> <body onload="init()"> <div id = "left" onclick="hide()"></div> <div id = "right" onclick="show()"></div> <span style = "color:#ffffff;">Mouse X-axis:</span> <div id = "mousexposition"> 0 </div> <br/> <span style = "color: #ffffff"> mouse y sumbu: </span> <div id = "mouseyposition"> 0 </div> <br/> <span style = "color: #ffffff; font-size: 13px;"> gambar margin teratas: </span/span/font "Tip"> 0 </div> </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.