js运动实例-多图片从中心放大缩小
多图片从中心放大缩小实现的过程分四步：
第一步：布局，各个小盒子相对于外面的大盒子定位（这里为简便，以li块代替图片）
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 330px;
margin: 50px auto 0;
position: relative;
}
li{
width: 100px;
height: 100px;
background: olivedrab;
}
style>
<script type="text/javascript">
window.οnlοad=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
for (var i=0; i'absolute' ;
aLi[i].style.left=(i%3)*110+10+'px';
aLi[i].style.top=Math.floor(i/3)*110+10+'px';
}
}
script>
head>
<body>
<ul id="ul1">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
body>
html>第二步：声明一个数组，用于存储各个li块的原始left值和top值
<script type="text/javascript">
window.οnlοad=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
var arr=[];
for (var i=0; i'absolute' ;
aLi[i].style.left=(i%3)*110+10+'px';
aLi[i].style.top=Math.floor(i/3)*110+10+'px';
arr.push({
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
})
}
}
script>第三步：加入鼠标移入和移出函数
<script src="js/move.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
window.οnlοad=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
var arr=[];
for (var i=0; i'absolute' ;
aLi[i].style.left=(i%3)*110+10+'px';
aLi[i].style.top=Math.floor(i/3)*110+10+'px';
arr.push({
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
})
aLi[i].οnmοuseοver=function(){
startMove(this,{
width:140,
height:140,
left:arr[this.index].left-20,
top:arr[this.index].top-20
})
}
aLi[i].οnmοuseοut=function(){
startMove(this,{
width:100,
height:100,
left:arr[this.index].left,
top:arr[this.index].top
})
}
}
}
script>到这里已经基本实现了各个li块的从中心放大缩小，当鼠标移入时改变当前li块的背景颜色，可以发现，此处存在层级问题，即后面li块的层级比前面的高，因此会遮挡从中心放大的li块。
解决：声明一个变量，使鼠标移入的li块的层级增加，即第四步
第四步：解决层级问题
最终代码：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 330px;
margin: 50px auto 0;
position: relative;
}
li{
width: 100px;
height: 100px;
background: olivedrab;
}
style>
<script src="js/move.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
window.οnlοad=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
var arr=[];
var zindex=1;
for (var i=0; i'absolute' ;
aLi[i].style.left=(i%3)*110+10+'px';
aLi[i].style.top=Math.floor(i/3)*110+10+'px';
arr.push({
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
})
aLi[i].οnmοuseοver=function(){
this.style.background='#333';
this.style.zIndex=zindex++;
startMove(this,{
width:140,
height:140,
left:arr[this.index].left-20,
top:arr[this.index].top-20
})
}
aLi[i].οnmοuseοut=function(){
this.style.background='olivedrab';
startMove(this,{
width:100,
height:100,
left:arr[this.index].left,
top:arr[this.index].top
})
}
}
}
script>
head>
<body>
<ul id="ul1">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
body>
html>注意：本例引入了一个move.js文件，即上一篇博客“运动框架加入缓冲”中的startMove函数。
move.js:
function startMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for ( var attr in json ) {
var iTarget = json[attr];
if (attr == 'opacity') {
iCur = Math.round(css( obj, 'opacity' ) * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = ( iTarget - iCur ) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != iTarget) {
iBtn = false;
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}