JS DOM realisiert Javascript-Fähigkeiten mit Mausschiebebildeffekten-js-Tutorial-php.cn

JS DOM realisiert Javascript-Fähigkeiten mit Mausschiebebildeffekten

WBOY

Freigeben： 2016-05-16 15:10:02

Original

1652 Leute haben es durchsucht

Wenn wir verschiedene Webseiten durchsuchen, werden häufig verschiedene Animationseffekte angezeigt. Wie im Bild unten gezeigt, handelt es sich um eine häufig verwendete Produktanzeigemethode, die in vielen Online-Einkaufszentren nebeneinander angezeigt wird Wenn der Benutzer die Details eines von Ihnen gewonnenen Produkts sehen möchte, legen Sie einfach die Maus auf den Bereich des Produkts. Das ursprünglich gefaltete Produkt wird automatisch erweitert und die Details werden vor dem angezeigt Benutzer, und diese Animation verwendet DOM+JS Dies wird durch Kombination erreicht, und die heutige kleine Übung besteht darin, diesen Effekt zu erzielen.

Implementieren Sie zunächst das Grundgerüst der Seite in HTML und kapseln Sie die vier Bilder in einem div-Block namens „container“

<!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>

Nach dem Login kopieren

Dann habe ich zwei Stylesheets verwendet, um den allgemeinen Stil wie folgt zu ändern:

gefolgt von

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Als nächstes müssen wir den Gleiteffekt implementieren. Der js-Code lautet wie folgt:

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

Nach dem Login kopieren

Das fertige Rendering sieht wie folgt aus:

Aufgetretene Probleme:

1. Die i- und j-Variablen in der Bild-Reset-Funktion sind unklar

2. Das Ergebnis ist, dass nach dem Zurücksetzen eines Bildes die restlichen nicht zurückgesetzten Bilder blockiert werden. Dies liegt hauptsächlich daran, dass ein kleines Problem mit der Reset-Funktion vorliegt.

Erfahrung: JS-Funktionsvariablen sind kompliziert und die Logik ist streng. Sie müssen beim Schreiben von Code vorsichtig sein

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.