Javascript如何改变透明度

JavaScript015

Javascript如何改变透明度,第1张

仅从代码来看是没问题的。但影响程序运行的因素是多方面的，没看到你完整的代码（包括js和html），不好妄下定论，仅仅猜测一下：你说运行到调整透明度的语句就不再往下运行了，那么原因估计是两个：一是left和right这两个id在页面上不存在（或者存在一个以上）；二是浏览器不支持opacity。你可以在出错的地方测试一下：

console.log(document.getElementById("left"))

console.log(document.getElementById("left").style.opacity)

只要看哪个显示的是undefined，就知道是哪个出问题了。

其实你按F12打开开发者界面，看一下红字提示应该就知道什么原因了啊？不会用吗？

//淡入效果(含淡入到指定透明度)    

function fadeIn(elem, speed, opacity){    

/*    

* 参数说明    

* elem==>需要淡入的元素    

* speed==>淡入速度,正整数(可选)    

* opacity==>淡入到指定的透明度,0~100(可选)    

*/    

   speed = speed || 20    

   opacity = opacity || 100    

//显示元素,并将元素值为0透明度(不可见)    

   elem.style.display = 'block'    

   iBase.SetOpacity(elem, 0)    

//初始化透明度变化值为0    

   var val = 0    

//循环将透明值以5递增,即淡入效果    

   (function(){    

       iBase.SetOpacity(elem, val)    

       val += 5    

       if (val <= opacity) {    

           setTimeout(arguments.callee, speed)    

       }    

   })()    

}    

    

//淡出效果(含淡出到指定透明度)    

function fadeOut(elem, speed, opacity){    

/*    

* 参数说明    

* elem==>需要淡入的元素    

* speed==>淡入速度,正整数(可选)    

* opacity==>淡入到指定的透明度,0~100(可选)    

*/    

   speed = speed || 20    

   opacity = opacity || 0    

   //初始化透明度变化值为0    

   var val = 100    

//循环将透明值以5递减,即淡出效果    

   (function(){    

       iBase.SetOpacity(elem, val)    

       val -= 5    

       if (val >= opacity) {    

           setTimeout(arguments.callee, speed)    

       }else if (val < 0) {    

//元素透明度为0后隐藏元素    

           elem.style.display = 'none'    

       }    

   })()    

}    

var btns = document.getElementById('demo')    

       

   btns.onclick = function(){    

       fadeIn(btns)    

   }    

   btns.onclick = function(){    

       fadeOut(btns,40)    

   }    

   

   <p id="demo" style="width:300pxheight:300pxbackground:#f00">淡入淡出</p>

试试吧

如果你只是要给某元素设置透明度，那么只要定义该元素的样式_filter:alpha(opacity=80)opacity: 0.8就行了（这里的80和0.8指的是透明度为80%，根据需要自己设置），跟js无关。

如果你是要用js改变元素透明度，那么如下例

例：document.getElementById("id1").style="_filter:alpha(opacity=80)opacity: 0.8"

其中document.getElementById("id1")是获取id为id1的元素，根据需要自己替换