Reiner JS-Code zur Implementierung von Akkordeoneffekten-js-Tutorial-php.cn

Reiner JS-Code zur Implementierung von Akkordeoneffekten

高洛峰

Freigeben： 2016-10-12 09:29:33

Original

1527 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;

}

Nach dem Login kopieren

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