ホームページ > 記事 > ウェブフロントエンド > アコーディオン効果を実装するための純粋な JS コード
アコーディオン効果を実装するための純粋な JS コード
- 高洛峰オリジナル
- 2016-10-12 09:29:331459ブラウズ
ほとんどのフロントエンド開発者が開発に 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 つの画像を試してみてください。