javascript寫圖片從中心放大
一、HTML
<img src="xianren.jpg" id="img" />
二、CSS
#img { display:block;
width:100px;
height:100px;
position:absolute;
left:200px;
top:200px;
margin:0;
}
三、script
window.onload=function ()
{
var oImg=document.getElementById('img');
oImg.onmouseover=function ()
{
startMove(oImg, {width: 400, height: 400, marginLeft: -100, marginTop: -100});
};
oImg.onmouseout=function ()
{
startMove(oImg, {width: 100, height: 100, marginLeft: 0, marginTop: 0});
};
};
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true;
for(var attr in json)
{
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
四、效果圖
