Maison > Article > interface Web > JS DOM réalise les compétences effect_javascript de l'image coulissante de la souris

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

WBOYoriginal: 2016-05-16 15:10:021650parcourir

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>

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;
}

/**
 * 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;
}

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);
 }
};

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre brièvement les fonctionnalités d'encapsulation et d'héritage dans les connaissances JavaScript_BasicArticle suivant：Comprendre brièvement les fonctionnalités d'encapsulation et d'héritage dans les connaissances JavaScript_Basic

Articles Liés

Voir plus