suchen

Heim >Web-Frontend >js-Tutorial >JS DOM realisiert Javascript-Fähigkeiten mit Mausschiebebildeffekten

JS DOM realisiert Javascript-Fähigkeiten mit Mausschiebebildeffekten

WBOY
WBOYOriginal
2016-05-16 15:10:021707Durchsuche

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>


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

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

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

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verstehen Sie kurz die Kapselungs- und Vererbungsfunktionen in JavaScript_GrundkenntnisseNächster Artikel：Verstehen Sie kurz die Kapselungs- und Vererbungsfunktionen in JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen