アコーディオン効果を実装するための純粋な JS コード-jsチュートリアル-php.cn

アコーディオン効果を実装するための純粋な JS コード

高洛峰

リリース： 2016-10-12 09:29:33

オリジナル

1540 人が閲覧しました

ほとんどのフロントエンド開発者が開発に jQuery などのサードパーティライブラリを使用していることは知っていますが、これにより時間が節約されるだけでなく、効率が大幅に向上し、会社の利益も増大します。

ただし、これにはいくつかの欠点もあります。たとえば、jQ は js よりも遅く、これは特に大規模なプロジェクトで発生します。以下では、単純なアコーディオン効果を実装するためにネイティブ js を使用します。

HTMLコードは次のとおりです

構造は非常にシンプルで、5つのliボックスだけで、jsコードが画像をレンダリングします

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

ログイン後にコピー

CSSコードは次のとおりです:

幅と高さは自分で設定してください。以前に作成したこのプロジェクトの画像は 1226*446 の画像でした。幅と高さはプロジェクトの作業時に合わせて設定されています。他のサイズの画像を配置したい場合は、実際の状況に応じてインストールしてください。 ..

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;

}

ログイン後にコピー

以下がハイライトです。ネイティブ js をお楽しみください (ネイティブ js を忘れている人も多いと思います)

//誰かを見つけてください
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;

// lis をループし、背景画像をバインドします

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

//マウス通過イベントを li ごとに登録します。マウス通過後は排他的である必要があります

lis[ i].onmouseover = function () {

//全員の幅が徐々に100になるように全員をキルします

for (var j = 0; j animate(lis[j], {"width": 100});
}

} 徐々に 800 になります

animate(this, {"width": 800});
};
}

//マウスはボックスから出てすべての li の幅になります徐々に240になります

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

//jQueryにはanimateアニメーション関数があり、実装原理はjQほど強力ではありませんが、基本的な効果の実現には問題ありません

function animate(obj, json) ) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {假 // まず、今回はすべての属性がターゲットに到達したと仮定します。 ;
var target = json[k];
var step = (ターゲット - リーダー) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
リーダー = リーダー + ステップ; console.log("コードはまだ実行中です " ）;それは、誰もが本当に到着したことを意味します}

上記はすべてのコードです。5 つの画像を試してみてください。