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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦