javascript 淡入淡出效果
浏览数：14 /
时间：2015年06月08日
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
#dd{
width:200px;
height:200px;
background:red;
opacity: 0.3;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('dd');
var oBtn=document.getElementById('btn');
var timer=null;
var old=0.3;
var speed;
var speedValue=0.2;
function startMove(){
old+=speed;
if(old<=1&&old>=0.3)
{
oDiv.style.opacity=old;
}
else
{
if(old>1)
{
old=1;
oDiv.style.opacity=1;
}
else
{
old=0.3;
oDiv.style.opacity=0.3;
}
clearInterval(timer);
}
}
oDiv.onmouseover=function(){
clearInterval(timer);
speed=speedValue;
timer=setInterval(startMove,100);
};
oDiv.onmouseout=function(){
clearInterval(timer);
speed=-speedValue;
timer=setInterval(startMove,100);
};
};
</script>
</head>
<body>
<div id="dd"></div>
</body>
</html>
注意事项：
opactiy是firfox浏览器中的透明度设置，IE中是 filter:alpha(opactiy=30);
运行结果图：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
