Este artículo describe el efecto de imitar el botón de giro de la página de la imagen de la estación de imágenes Tencent. Compártelo para su referencia, como sigue:
La captura de pantalla del efecto de ejecución es la siguiente:
El código específico es el siguiente:
< Tencent Picture Flip </title> <style type = "text/css"> *{margin: none; relleno: ninguno; } cuerpo {fondo:#000000; } #tip {posición: absoluto; Ancho: 564px; Altura: 362px; arriba: -362px; Antecedentes: url (../ img/tencentimg/tiplayer.png); } #left {posición: absoluto; Ancho: 101px; Altura: 95px; Antecedentes: url (../ img/tencentimg/left.png); borde: 1px sólido #f2f2f2; Pantalla: ninguno; cursor: mano; } #right {posición: absoluto; Ancho: 101px; Altura: 95px; Antecedentes: url (../ img/tencentimg/right.png); borde: 1px sólido #f2f2f2; Pantalla: ninguno; cursor: mano; } #MousExPosition {ancho: 30px; Altura: 20px; Color: #ffffff; Pantalla: en línea; } #MouseyPosition {ancho: 30px; Altura: 20px; Color: #ffffff; Pantalla: en línea; } #DivTop {ancho: 30px; Altura: 20px; Color: #ffffff; Pantalla: en línea; } </style> <script type = "text/javaScript"> function init () {var ml = document.body.clientWidth/2 - 40; document.getElementById ("izquierda"). style.pixelTop = 300; document.getElementById ("correcto"). style.pixelTop = 300; document.getElementById ("izquierda"). style.pixelleft = ml - 101*4; document.getElementById ("correcto"). style.pixelleft = ml + 101*4; var punta = 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}; } documento.onmousemove = mouseMove; función mouseMove (e) {e = e || Window.event; var mousePos = mousePosition (e); var mid = document.body.clientwidth/2; document.getElementById ('MousexPosition'). Innerhtml = mousePos.x; document.getElementById ('MouseyyPosition'). Innerhtml = mousePos.y; if (mousePos.x <mid) {document.getElementById ("izquierda"). style.display = "bloque"; document.getElementById ("correcto"). style.display = "none"; } else if (mousePos.x> mid) {document.getElementById ("correcto"). style.display = "bloque"; document.getElementById ("izquierda"). style.display = "none"; }} función 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)}} function 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 = "izquierda" onClick = "hide ()"> </div> <div id = "right" onClick = "show ()"> </div> <span style = "color: #ffffff;"> rouse x-exis: </span> <divsi id = "mousexPosition"> 0 </div> <br/> <span style = "color: #ffffff"> mouse y eje: </span> <div id = "mouseyyposition"> 0 </div> <br/> <span style = "color: #ffffff; font-size: 13px;"> Imagen Top Margin: </shen> <Divi = "Divtop"> 0 </Divi ID = Divi = "Tip"> 0 </div> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.