运用运动框架进行多图片展开收缩的实例展示
在展示时未插入图片用ul li 来代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多图片的展开收缩</title>
<style type="text/css">
body {margin:0;}
#ul1 {margin:0;padding: 0;width: 330px;margin:100px auto 0;position: relative;}
li {width: 100px;height: 100px;background: red;float: left;list-style:none;margin:10px 0 0 10px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
/*元素居中放大：除了要改变元素的宽高以外，还要改变元素定位（left top）
因为在页面布局时点是根据元素的左上角即（left,top）来计算的
如果图片放大一倍则位移为放大宽高的一半
通过程序将浮动的图片转化为定位 不需要通过css一个个进行设定
*/
window.onload = function() {
//在转换布局的，相对用户眼睛的位置的保持不变
//offsetLeft[Top]当前元素到定位负极的距离 到当前元素的offsetParent的距离
/*
offsetLeft[Top]也存在兼容性问题：
IE7：
如果父级有定位
如果自己有定位，那么就是到定位父级的距离
如果自己没有定位，那么offsetLeft是到body的距离
如果父级没有定位
offsetParent->body
offsetLeft->html
*/
var oUl = document.getElementById('ul1');
var aLi = document.getElementsByTagName('li');
var arr = [];
var zIndex = 1;//提高层级
for (var i = 0; i < aLi.length; i++) {
arr.push({
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
})//防止移入后再次移入时 值会再次改变
}
for (var i = 0; i < aLi.length; i++) {
//在利用js设置css样式的时候:在同一个代码块中，有些css样式的设置的权限要高于其他样式
// aLi[i].style.left = aLi[i].offsetLeft+'px';
// aLi[i].style.top = aLi[i].offsetTop+'px';
aLi[i].index = i;
aLi[i].style.left = arr[i].left+'px';
aLi[i].style.top = arr[i].top+'px';
aLi[i].style.position = 'absolute';//会被优先解析 先定位后获值
//由于left值和margin值不会覆盖 会累加计算 故需要将margin值清零
aLi[i].style.margin = '0px';
aLi[i].onmouseover = function(){
this.style.zIndex = zIndex++;
startMove(this,
{
height:200,
width:200,
left:arr[this.index].left-50,
top:arr[this.index].top-50
});
}
aLi[i].onmouseout = function(){//移除回到原来的状态
startMove(this,
{
height:100,
width: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>引入的运动框架代码
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];
}
}