<!DOCTYPE?HTML>
<html?lang="en/zh">
<head>
????<meta?charset="UTF-8">
????<title>JS_透明度動畫</title>
????<style?type="text/css">
????????*{
????????????padding:?0px;
????????????margin:?0px;????????????
????????}
????????#div1{
????????????width:?200px;
????????????height:?200px;
????????????background:?red;????
????????????filter:alpha(opacity:30);????/*ie低版本不支持opacity的??只支持filter?*/????
????????????opacity:?0.3;????/*firefox,chrome*/
????????}
????</style>
????<script?type="text/javascript">
????????window.onload=function(){
????????????var?oDiv=document.getElementById("div1");
????????????oDiv.onmouseover=function(){
????????????????changeOpcity(100);
????????????}
????????????oDiv.onmouseout=function(){
????????????????changeOpcity(30);
????????????}
????????}
????????var?timer=null;
????????var?alpha?=30;
????????function?changeOpcity(target){
????????????var?oDiv=document.getElementById("div1");
????????????clearInterval(timer);
????????????timer=setInterval(function(){
????????????????var?speed?=?0;
????????????????if(alpha>target){
????????????????????speed=-10;
????????????????}else{
????????????????????speed=10;
????????????????}
????????????????if(alpha==target){
????????????????????clearInterval(timer);
????????????????}else{
????????????????????alpha+=speed;
????????????????????oDiv.style.filter='alpha(opacity:'+alpha+')';/*IE*/
????????????????????oDiv.style.opacity=alpha/100;
????????????????}
????????????},30);
????????}
????</script>
</head>
<body>
????<div?id="div1">
????
????</div>
</body>
</html>
2015-12-06
為什么不是一個值？ 當然在變化，每一次間歇調用都在第二個if語句里對它進行了操作 并且讓div的不透明度進行了變化。直到達到目標值才停止