JavaScript动画--透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明度</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#div1{
width:200px;
height:200px;
background:red;
filter:Alpha(opacity:30);
opacity:0.3;
position:relative;
top:0;
left:200px;
}
#div1 span{
width:50px;
height:50px;
position:absolute;
top:50px;
left:50px;
padding:25px;
color:blue;
font-weight:bold;
text-align:center;
line-height:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var ODiv = document.getElementById('div1');
ODiv.onmouseover= function(){
startMove(100);
}
ODiv.onmouseout = function(){
startMove(30);
}
}
var timer = null;
var alpha = 30;
function startMove(iTarget){
var ODiv = document.getElementById('div1');
window.clearInterval(timer);
timer = window.setInterval(function(){
var speed = 0;
if(alpha > iTarget){
speed = -10;
}else{
speed = 10;
}
if(alpha == iTarget){
window.clearInterval(timer);
}else{
alpha+=speed;
ODiv.style.filter='Alpha(opacity:' + alpha + ')';/*IE*/
ODiv.style.opacity = alpha/100; /*chrome*/
}
},30);
}
</script>
</head>
<body>
<div id="div1"><span>Hello</span></div>
</body>
</html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦