JS DOM réalise les compétences effect_javascript de l'image coulissante de la souris-js tutoriel-php.cn

JS DOM réalise les compétences effect_javascript de l'image coulissante de la souris

WBOY

Libérer： 2016-05-16 15:10:02

original

1651 Les gens l'ont consulté

Souvent, lorsque nous parcourons diverses pages Web, divers effets d'animation s'affichent. Comme le montre l'image ci-dessous, il s'agit d'une méthode d'affichage de produits couramment utilisée dans de nombreux centres commerciaux en ligne. . Si l'utilisateur voit Si vous souhaitez voir les détails d'un produit que vous avez gagné, placez simplement la souris sur la zone du produit, le produit initialement plié s'agrandira automatiquement et les détails seront affichés devant le. utilisateur, et cette animation utilise DOM+JS. Cela est obtenu grâce à une combinaison, et le petit exercice d'aujourd'hui consiste à obtenir cet effet.

Tout d'abord, implémentez le framework de base de la page en HTML, et encapsulez les quatre images dans un bloc div nommé "conteneur"

<!doctype html>
<meta charset="UTF-8">
<html>
 <head>
 <title>
 鼠标滑过页面自动变大
 </title>
 <link rel="stylesheet" href="styles/reset.css" />
 <link rel="stylesheet" href="styles/slidingdoors.css" />
 <script src="slidlingdoors.js"></script>
 </head>
 <body>
 <div id="container">
 <img src="./images/door1.png"/>
 <img src="./images/door2.png"/>
 <img src="./images/door3.png"/>
 <img src="./images/door4.png"/>
 </div>
 </body>
</html>

Copier après la connexion

Ensuite, j'ai utilisé deux feuilles de style pour modifier le style général comme suit :

suivi de

slidingdoors.css和reset.css:
#container {
 height: 477px;
 margin: 0 auto;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 overflow: hidden;
 position: relative;
}

#container img {
 position: absolute;
 display: block;
 left: 0;
 border-left: 1px solid #ccc;
}

Copier après la connexion

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Copier après la connexion

Ensuite, nous devons implémenter l'effet de glissement. Le code js est le suivant :

window.onload=function(){
 var box=document.getElementById("container");
 var imgs=box.getElementsByTagName("img");
 var imgwidth=imgs[0].offsetWidth;
 var exposewidth=160;
 var boxwidth=imgwidth+exposewidth*(imgs.length-1);
 box.style.width=boxwidth+'px';
 function setImgPos(){
 for(var i=1;i<imgs.length;i++)
 {
  imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px';
 }
 }
 setImgPos();
 var translate=imgwidth-exposewidth;
 for(var i=0;i<imgs.length;i++)
 {
 (function(i){
  imgs[i].onmouseover=function(){
  setImgPos();
  for(var j=1;j<=i;j++)
  {
   imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';
  }
  };
 })(i);
 }
};

Copier après la connexion

Le rendu fini est le suivant :

Problèmes rencontrés :

1. Les variables i et j dans la fonction de réinitialisation d'image prêtent à confusion ;

2. Le résultat est qu'après la réinitialisation d'une image, les autres images non réinitialisées sont bloquées. Cela est principalement dû à un petit problème avec la fonction de réinitialisation.

Expérience : Les variables de fonction JS sont compliquées et la logique est rigoureuse. Vous devez être prudent lors de l'écriture de code.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

JS DOM réalise les compétences effect_javascript de l'image coulissante de la souris