<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>js透明度變化</title>
????<style>
????????body,div{
????????????margin:?0;
????????????padding:?0;
????????}
????????div{
????????????width:?200px;
????????????height:200px;
????????????background:?red;
????????????margin:?10px;
????????????float:?left;
????????????filter:alpha(opacity:30);//透明度30
????????????opacity:0.3;
????????}
????</style>
????<script>
???????window.onload=function(){
???????????var?oDiv=document.getElementsByTagName('div');
???????????for(var?i=0;i<oDiv.length;i++){
???????????????oDiv[i].alpha=30;
???????????????oDiv[i].onmouseover=function(){
???????????????????startMove(this,100);
???????????????}
???????????????oDiv[i].onmouseout=function(){
???????????????????startMove(this,30);
???????????????}
???????????}
???????}
????????function?startMove(obj,iTarget){
????????????clearInterval(obj.timer);
????????????obj.timer=setInterval(function(){
????????????????var?speed=0;
????????????????if(obj.alpha>iTarget){
????????????????????speed=-10;
????????????????}
????????????????else{
????????????????????speed=10;
????????????????}
????????????????if(obj.alpha==iTarget){
????????????????????clearInterval(obj.timer);
????????????????}
????????????????else{
???????????????????obj.alpha+=speed;
????????????????????//基于ie瀏覽器
?obj.style.filter='alpha(opactiy:'+obj.alpha+')';
????????????????????//基于非ie瀏覽器
?obj.style.opacity=obj.alpha/100;
???????????????}
????????????},30)
????????}
????</script>
</head>
<body>
????<div?id="div1"></div>
????<div?id="div2"></div>
????<div?id="div3"></div>
????<div?id="div4"></div>
</body>
</html>
2017-02-25
style中注釋使用錯了，應(yīng)該是? /*透明度30*/，你用的//是js的單行注釋，改一下就好