<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body, div {
margin: 0;
padding: 0;
}
img {
width: 1280px;
height: 720px;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div"><img src="McLaren-P1.jpg"/></div>
<script type="text/javascript">
window.onload = function () { //页面加载运行函数
var img = document.getElementsByTagName('img')[0], //img 等于第一个标签img
timer = null, //timer等于空
alpha = 30; //alpha等于30
img.onmouseover = function () { //img鼠标经过事件
changeOpa(100); //向changeOpa函数传参100
}
img.onmouseout = function () { //img鼠标离开事件
changeOpa(30); //向changeOpa函数传参30
}
function changeOpa(iOpa) { //changeOpa函数
clearInterval(timer); //清空定时器
timer = setInterval(function () { //定时器函数
var speed = 0;
if (alpha < iOpa) { //如果30小鱼传进来的参数
speed = 10; //等于10
}
else {
speed = -10; //否则等于-10
}
if (alpha == iOpa) { //如果相等就停止定时器
clearInterval(timer);
}
else {
alpha += speed; //否则alpha等于alpha自己加speed
img.style.filter = 'alpha(opacity:' + alpha + ')'; //img的样式透明度等于alpha ie版本
img.style.opacity = alpha / 100; //img的样式透明度等于alpha除以100
}
}, 30)
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body, div {
margin: 0;
padding: 0;
}
img {
width: 1280px;
height: 720px;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div"><img src="McLaren-P1.jpg"/></div>
<script type="text/javascript">
window.onload = function () { //页面加载运行函数
var img = document.getElementsByTagName('img')[0], //img 等于第一个标签img
timer = null, //timer等于空
alpha = 30; //alpha等于30
img.onmouseover = function () { //img鼠标经过事件
changeOpa(100); //向changeOpa函数传参100
}
img.onmouseout = function () { //img鼠标离开事件
changeOpa(30); //向changeOpa函数传参30
}
function changeOpa(iOpa) { //changeOpa函数
clearInterval(timer); //清空定时器
timer = setInterval(function () { //定时器函数
var speed = 0;
if (alpha < iOpa) { //如果30小鱼传进来的参数
speed = 10; //等于10
}
else {
speed = -10; //否则等于-10
}
if (alpha == iOpa) { //如果相等就停止定时器
clearInterval(timer);
}
else {
alpha += speed; //否则alpha等于alpha自己加speed
img.style.filter = 'alpha(opacity:' + alpha + ')'; //img的样式透明度等于alpha ie版本
img.style.opacity = alpha / 100; //img的样式透明度等于alpha除以100
}
}, 30)
}
}
</script>
</body>
</html>