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

1698 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.