suchen

Heim >Web-Frontend >js-Tutorial >Reiner JS-Code zur Implementierung von Akkordeoneffekten

Reiner JS-Code zur Implementierung von Akkordeoneffekten

高洛峰
高洛峰Original
2016-10-12 09:29:331544Durchsuche

Ich weiß, dass die meisten Front-End-Entwickler jetzt Bibliotheken von Drittanbietern wie jQuery verwenden. Dies spart nicht nur Zeit, sondern erhöht auch die Effizienz und den Nutzen des Unternehmens.

Dies wird jedoch auch gewisse Mängel aufweisen. Beispielsweise ist jQ langsamer als js, was insbesondere in großen Projekten auftritt. Im Folgenden verwende ich natives js, um einen einfachen Akkordeoneffekt zu implementieren.

Der HTML-Code lautet wie folgt

Die Struktur ist sehr einfach, nur 5 Li-Boxen, und der JS-Code rendert das Bild 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

Der CSS-Code ist wie folgt:

Bitte stellen Sie die Breite und Höhe selbst ein. Das Bild dieses Projekts, das ich zuvor gemacht habe, war ein 1226*446-Bild, daher wurden Breite und Höhe entsprechend der Zeit eingestellt, als ich es war Arbeiten an dem Projekt. Wenn Sie Bilder in anderen Größen platzieren möchten, passen Sie diese bitte entsprechend der tatsächlichen Situation an. Das Folgende ist das Highlight, bitte genießen Sie die nativen js (I Ich glaube, viele Leute haben das native js fast vergessen)

ul {
    list-style: none
}

* {
    margin: 0;
    padding: 0;
}

div {
    width: 1150px;
    height: 400px;
    margin: 50px auto;
    border: 1px solid red;
    overflow: hidden;
}

div li {
    width: 240px;
    height: 400px;
    float: left;
    /*background-image: url(images/1.jpg);*/
}

div ul {
    width: 1300px;

}
//Jemanden finden

var box = document.getElementById("box");
var ul = box.children[0] ;

var lis = ul.children;


//Schleife durch lis, um das Hintergrundbild zu binden

for (var i = 0; i lis[i].style.backgroundImage = "url(images/" (i 1) ".jpg)" ;

//Registrieren Sie das Mauspassereignis für jedes Li muss exklusiv sein
lis[i].onmouseover = function () {

//Alle töten Lassen Sie die Breite von allen allmählich 100 werden

für (var j = 0 ; j animate(lis[j], {"width": 100}) ;
                                                                                                                        
}
//Die Maus verlässt die Box und alle Li-Breiten werden nach und nach 240

box.onmouseout = function () {
for (var i = 0; i animate(lis[i], { "width": 240});
}
};

//In jQuery gibt es eine Animationsfunktion. Das Folgende ist das Prinzip der Implementierung, obwohl es nicht so leistungsfähig ist wie jQ , es gibt immer noch kein Problem bei der Realisierung des Grundeffekts

function animate(obj, json) {
clearInterval(obj.timer);
obj. timer = setInterval(function () {
//Angenommen, dass alle Attribute nach dieser Ausführung das Ziel erreicht haben

var flag = true;
for (var k in json) {
var Leader = parseInt(getStyle(obj , k)) ||. 0;
var target = json[k];
var step = (target - Leader) / 10;
step = step > 0 ? Math.ceil(step) : Math .floor(step);
Leader = Leader Step;
obj.style[k] = Leader "px";
//if (leader = == target) {
// clearInterval( obj.timer);
🎜>
                  flag = false; // Teilen Sie der Markierung mit, dass dieses Attribut noch nicht angekommen ist

if (flag) {
clearInterval(obj.timer) ;
}
}, 15);
}

//Alle Attribute sind angekommen Der Zielwert kann nur gelöscht werden

function getStyle(obj, attr) {
if (window.getComputedStyle) {
  return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}


Das Obige ist der gesamte Code. Sie können fünf Bilder zum Ausprobieren finden.

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：Tutorial zur JavaScript-Stärkung – BootstrapNächster Artikel：Tutorial zur JavaScript-Stärkung – Bootstrap

In Verbindung stehende Artikel

Mehr sehen