<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#img1 {
filter: alpha(opacity: 30);
opacity: 0.3;
}
</style>
<script>
window.onload = function() {
var oImg = document.getElementById('img1');
oImg.onmouseover = function() {
startMove(100);
}
oImg.onmouseout = function() {
startMove(30);
}
}
var timer = null;
var alpha = 30;
var iTarget = null;
function startMove(iTarget) {
var oImg = document.getElementById('img1');
clearInterval(timer);
timer = setInterval(function() {
var iSpeed = 0;
if (alpha < iTarget) {
iSpeed = 10;
} else {
iSpeed = -10;
}
if (alpha == iTarget) {
clearInterval(timer);
} else {
alpha += iSpeed;
oImg.style.filter = 'alpha(opacity:' + alpha + ')';
oImg.style.opacity = alpha / 100;
}
}, 30)
}
</script>
</head>
<body>
<img id="img1" src="bg.jpg" alt="" width="800px">
</body>
</html>