<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>透明度動畫</title>
????<style>
????????*{
????????????padding:?0;
????????????margin:?0;
????????}
????????.block{
????????????width:?80px;
????????????height:?80px;
????????????filter:alpha(30);
????????????opacity:?0.3;
????????????background:?#f00;
????????}
????</style>
</head>
<body>
<div?class="block"></div>
<script>
????window.onload?=?function()?{
????????var?oDiv?=?document.getElementById('block');
????????oDiv.onmouseover=function(){
????????????startMove(100);
????????};
????????oDiv.onmouseout=function(){
????????????startMove(30);
????????};
????};
????var?speed?=?0;
????var?alpha?=?30;
????var?timer?=?null;
????function?startMove(iTarget){
????????var?oDiv?=?document.getElementById('block');
????????clearInterval(timer);
????????timer?=?setInterval(function(){
????????????if(oDiv.alpha?>?iTarget){
????????????????speed?=?-10;
????????????}else{
????????????????speed?=?10;
????????????}
????????????if(oDiv.alpha?==?iTarget){
????????????????clearInterval(timer);
????????????}else{
????????????????alpha?+=?speed;
????????????????oDiv.style.filter?=?'alpha(opacity:'+alpha+')';?//?兼容IE
?oDiv.style.opacity?=?alpha/100;??//?Firefox?Chrome
?}
????????},30);
????}
</script>
</body>
</html>
2018-06-14
大哥，你這是class="block",是類選擇器啊，只能用document.getElementsByClassName("block")[0]來獲取啊，還要看瀏覽器是否支持getElementsByClassName方法，不支持的話可以創建該方法