Dieser Artikel beschreibt die Auswirkung von JS, die die Bildseite der Bildseite drehen, die Schaltfläche Tencent Bildstation imitiert. Teilen Sie es für Ihre Referenz wie folgt weiter:
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<! DocType html public "-// w3c // dtd html 4.01 // ede Tencent Bildflip </title> <style type = "text/css"> *{margin: keine; Polsterung: Keine; } Body {Hintergrund:#000000; } #tip {Position: absolut; Breite: 564px; Höhe: 362px; Oben: -362px; Hintergrund: URL (../ img/Tencentimg/Tiplayer.png); } #left {Position: absolut; Breite: 101px; Höhe: 95px; Hintergrund: URL (../ img/tencentimg/links.png); Grenze: 1PX Solid #f2f2f2; Anzeige: Keine; Cursor: Hand; } #right {Position: absolut; Breite: 101px; Höhe: 95px; Hintergrund: URL (../ img/tencentimg/right.png); Grenze: 1PX Solid #f2f2f2; Anzeige: Keine; Cursor: Hand; } #mousexposition {width: 30px; Höhe: 20px; Farbe: #ffffff; Anzeige: Inline; } #mouseyposition {width: 30px; Höhe: 20px; Farbe: #ffffff; Anzeige: Inline; } #divtop {width: 30px; Höhe: 20px; Farbe: #ffffff; Anzeige: Inline; } </style> <script type = "text/javaScript"> Funktion init () {var ml = document.body.clientwidth/2 - 40; document.getElementById ("links"). style.pixeltop = 300; document.getElementById ("rechts"). style.pixeltop = 300; document.getElementById ("links"). style.pixellEft = ml - 101*4; document.getElementById ("rechts"). style.pixellEft = ml + 101*4; var tip = document.getElementById ("Tipp"); var inith = (document.body.clientwidth - tip.offsetwidth)/2; document.getElementById ("Tipp"). style.left = inith; document.getElementById ("Tipp"). 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; Funktion Mousemove (e) {e = e || Fenster.Event; var mousepos = mouseposition (e); var Mid = document.body.clientwidth/2; document.getElementById ('mousexposition'). Innerhtml = mousepos.x; document.getElementById ('Mausyposition'). Innerhtml = mousepos.y; if (mousepos.x <mid) {document.getElementById ("links"). style.display = "block"; document.getElementById ("rechts"). style.display = "Keine"; } else if (mousepos.x> mid) {document.getElementById ("rechts"). style.display = "block"; document.getElementById ("links"). style.display = "Keine"; }} Funktion show () {if (document.getElementById ("Tipp"). style.pixeltop <80) {document.getElementById ("Tipp"). Style.pixeltop += 20; document.getElementById ("Divtop"). InnerHtml = document.getElementById ("Tipp"). style.pixeltop; setTimeout ("show ()", 10)}} function hide () {if (document.getElementById ("tipp"). document.getElementById ("Divtop"). InnerHtml = document.getElementById ("Tipp"). style.pixeltop; setTimeout ("hide ()", 10)}} </script> </head> <body onload = "init ()"> <div id = "links" onclick = "hide ()"> </div> <div id = "rechts" onclick = "show ()"> </div> <span style = "color: #FFFF; id = "mousexposition"> 0 </div> <br/> <span style = "color: #ffffff"> Maus-y-Achse: </span> <div id = "mouseyposition"> 0 </div> <br/> <span style = "color: #ffff; font-size: 13px; "Tipp"> 0 </div> </body> </html>Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.