JS---ケース:アコーディオン(パッケージされたアニメーション関数を利用)
16319 ワード
ケース:オルガン
パッケージされたアニメーション関数はcommonです.jsの中
//function getStyle(element, attr) {...}
//function animate(element, json, fn) {...}
アコーディオンは背景図ですか、backgroudImage="url(image/**.jpg)";
マウスが入ると、現在の幅は800になり、残りの遍歴は100に設定されます.
マウスを離すとli幅が400になります
パッケージされたアニメーション関数はcommonです.jsの中
//function getStyle(element, attr) {...}
//function animate(element, json, fn) {...}
アコーディオンは背景図ですか、backgroudImage="url(image/**.jpg)";
マウスが入ると、現在の幅は800になり、残りの遍歴は100に設定されます.
マウスを離すとli幅が400になります
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
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;
}
div ul {
width: 1300px;
}
style>
head>
<body>
<div id="box">
<ul>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
<script src="common.js">script>
<script>
// 2 common.js
//function getStyle(element, attr) {
//function animate(element, json, fn) {
// li
var list = my$("box").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//
list[i].onmouseover = mouseoverHandle;
//
list[i].onmouseout = mouseoutHandle;
}
//
function mouseoverHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], { "width": 100 });//
}
animate(this, { "width": 800 });
}
function mouseoutHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], { "width": 240 });//
}
}
script>
body>
html>