Este artigo descreve o efeito do JS imitando o botão Virar a página da imagem da estação de imagem Tencent. Compartilhe -o para sua referência, como segue:
A captura de tela do efeito em execução é a seguinte:
O código específico é o seguinte:
<! Docttype html public "-// w3c // dtd html 4.01 // pt" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv = "Chareset-linentspe" Tencent picture flip </title> <style type = "text/css"> *{margem: nenhum; preenchimento: nenhum; } corpo {background:#000000; } #tip {posição: absoluto; Largura: 564px; Altura: 362px; topo: -362px; Antecedentes: url (../ img/tencentimg/tiplayer.png); } #Left {Position: Absolute; Largura: 101px; Altura: 95px; Antecedentes: url (../ img/tencentimg/esquerd.png); borda: 1px sólido #f2f2f2; Exibir: Nenhum; Cursor: mão; } #Right {Position: Absolute; Largura: 101px; Altura: 95px; Antecedentes: url (../ img/tencentimg/right.png); borda: 1px sólido #f2f2f2; Exibir: Nenhum; Cursor: mão; } #mousexposition {width: 30px; Altura: 20px; Cor: #ffffff; exibição: embutido; } #mouseyposition {width: 30px; Altura: 20px; Cor: #ffffff; exibição: embutido; } #divtop {width: 30px; Altura: 20px; Cor: #ffffff; exibição: embutido; } </style> <script type = "text/javascript"> function init () {var ml = document.body.clientWidth/2 - 40; document.getElementById ("esquerda"). style.pixeltop = 300; document.getElementById ("Right"). style.pixeltop = 300; document.getElementById ("esquerda"). style.pixelleft = ml - 101*4; document.getElementById ("direita"). 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; } função mousePosition (ev) {if (ev.pagex || ev.pagey) {return {x: ev.pagex, y: ev.pagey}; } retornar {x: ev.clientx + document.body.scrollleft - document.body.clientleft, y: ev.clienty + document.body.scrolltop - document.body.clienttop}; } document.onMousEmove = mouseMove; função mousemove (e) {e = e || Window.Event; var mousepos = mouseposição (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 ("esquerda"). style.display = "bloco"; document.getElementById ("Right"). style.display = "nenhum"; } else if (mousepos.x> mid) {document.getElementById ("direita"). style.display = "bloqueio"; document.getElementById ("esquerda"). style.display = "nenhum"; }} 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)}} 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> </ad Head> <corpo onLload = "init ()"> <div id = "esquerdo" onclick = "hide ()"> </div> <div id = "direita" onclick = "show ()"> </div> <span = "cor: #ffffffff; id = "mousexposition"> 0 </div> <br/> <span style = "cor: #ffffff"> mouse y eixo: </span> <div id = "mouseypoition"> 0 </div> <br/> <span style = "cor: #ffff; font-size: 13px;"> margin </span> "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 e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.