javascript中级--运动二
一、设置图片透明度变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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;
function startMove(iTarget) {
var oImg = document.getElementById('img1');
clearInterval(timer);
timer = setInterval(function() {
var iSpeed = -1;
if (alpha < iTarget) {
iSpeed = -iSpeed;
}
if (alpha == iTarget) {
clearInterval(timer);
} else {
alpha += iSpeed;
//document.title = alpha;
oImg.style.filter = 'alpha(opacity=' + alpha + ')';
oImg.style.opacity = alpha / 100;
}
}, 30)
}
</script>
</head>
<body>
<img id="img1" src="p1.jpg" alt="" width="300px">
</body>
</html>
