<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
margin-left: 200px;
opacity: 0.3;
alpha(opacity = 30);
}
</style>
<script>
window.onload = function ()
{
var oimg = document.getElementById('img1');
var timer = null;
oimg.onmouseover = function ()
{
touming(this,100,10)
}
oimg.onmouseout = function ()
{
touming(this,30,-10);
}
function touming(obj,target,speed)
{
clearInterval(timer);
timer = setInterval(function ()
{
var icur = Math.round(css(obj,'opacity')*100);
if(icur == target)
{
clearInterval(timer);
}
else
{
obj.style.opacity = (icur + speed)/100;
obj.style.filter = 'alpha(opacity= '( + icur + speed ) + ')';
}
},30);
}
function css(obj,attr)
{
if(obj.currentStyle)
return obj.currentStyle[attr];
else
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<img id="img1" src="img/1.jpg" alt="图片">
</body>
</html>
