原生js解決圖片漸漸變透明的效果

今天來封裝一個簡單的js效果，就是點擊一張圖片，漸漸的圖片的透明度為0，即為圖片消失的效果。

來看布局即為一張圖片：

<!--需求：點擊圖片，透明度降低-->
<img id="img" width="180" src="img/pic4.jpg"/>

js效果如下：

<script>
    window.onload=function(){
        var oImg=document.getElementById("img");
        oImg.onclick=function(){
             opacity(oImg,-0.1,0);
        };
        
        //透明度的封裝
        function opacity(obj,dir,target){
            clearInterval( obj.timer );
            obj.timer = setInterval(function () {
                var speed =parseFloat(getStyle( obj, "opacity" ))+ dir;
                if ( speed < target) {
                    clearInterval( obj.timer );
                }else  {
                    obj.style.opacity=speed;
                }
            }, 300);

        }
    };
    //兼容不同瀏覽器獲取行間樣式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

</script>

需要注意的是，圖片opacity的值是在0-1之間的，超出這個范圍的話，opacity就不起作用了！

當然這是很簡單的一個opacity的js封裝實現的效果，若是多組圖片就是參數改變一下即可！好了，今天就到這里，明天繼續！加油！