HTML 代码
<!DOCTYPE html>
<html>
<head>
<title>fadeSport.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#div1 {width:300px;height:300px;background:green;margin:auto;margin-top:50px;filter:alpha(opacity:30);opacity:0.3;}
</style>
<script type="text/javascript" src="../js/fadeSport.js"></script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
js文件
window.onload = function(){
var div = document.getElementById('div1');
var timer = null;
var alpha = 30;
div.onmouseover = function(){
fadeSport(100);
}
div.onmouseout = function(){
fadeSport(30);
}
function fadeSport(taget){
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha < taget){
speed =5;
}else{
speed = -5;
}
if(alpha == taget){
clearInterval(timer);
}else{
alpha += speed;
div.style.filter = 'alpha(opacity:'+alpha+')';
div.style.opacity = alpha/100;
}
},30);
}
}
扫一扫
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
