应用活动框架举行多图片睁开压缩的实例展现
在展现时未插进去图片用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];
}
}