Cet article décrit l'effet de JS imitant le bouton de virage de la page d'image de la station d'image Tencent. Partagez-le pour votre référence, comme suit:
La capture d'écran de l'effet de course est la suivante:
Le code spécifique est le suivant:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Imitate Tencent Picture Flip </Title> <style type = "Text / CSS"> * {margin: aucun; rembourrage: aucun; } body {background: # 000000; } #tip {position: absolue; Largeur: 564px; hauteur: 362px; en haut: -362px; Contexte: URL (../ img / Tencemg / Tiplayer.png); } #left {position: absolue; Largeur: 101px; hauteur: 95px; Contexte: URL (../ img / Tencemg / Left.png); Border: 1px solide # f2f2f2; Affichage: aucun; curseur: main; } #Right {position: absolue; Largeur: 101px; hauteur: 95px; Contexte: URL (../ img / tercentimg / droit.png); Border: 1px solide # f2f2f2; Affichage: aucun; curseur: main; } #mousexposition {width: 30px; hauteur: 20px; Couleur: #ffffff; Affichage: en ligne; } #mouseyposition {width: 30px; hauteur: 20px; Couleur: #ffffff; Affichage: en ligne; } #divtop {width: 30px; hauteur: 20px; Couleur: #ffffff; Affichage: en ligne; } </ style> <script type = "text / javascript"> function init () {var ml = document.body.clientwidth / 2 - 40; document.getElementById ("Left"). Style.Pixeltop = 300; document.getElementById ("Right"). Style.Pixeltop = 300; document.getElementById ("Left"). Style.Pixelleft = ML - 101 * 4; document.getElementById ("droite"). 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; } fonction MousPosition (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 = mousmove; Fonction MousMove (e) {e = e || window.event; Var Mouspos = Mouseposition (E); var mid = document.body.clientwidth / 2; document.getElementById ('MousexPosition'). InnerHtml = Mouspos.x; document.getElementById ('MouseyPosition'). InnerHtml = Mouspos.y; if (Mouspos.x <mid) {document.getElementById ("Left"). Style.display = "Block"; document.getElementById ("droite"). style.display = "Aucun"; } else if (Mouspos.x> mid) {document.getElementById ("droit"). style.display = "bloc"; document.getElementById ("Left"). style.display = "Aucun"; }} fonction show () {if (document.getElementById ("Tip"). Style.Pixeltop <80) {document.getElementyId ("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 = "Left" onClick = "hide ()"> </ div> <div id = "droit" onClick = "show ()"> </ div> <span style = "Color: #ffff;"> Mouse X-axis: </pan id = "muousexposition"> 0 </ div> <br/> <span style = "Color: #ffffff"> Axe de souris: </span> <div id = "MouseyPosition"> 0 </div> <br/> <span style = "Color: #ffffff; Font-Size: 13px;"> Marge d'image: </pan> <div Id = "Divtop"> 0 "Tip"> 0 </div> </ody> </html>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.