原生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封装实现的效果，若是多组图片就是参数改变一下即可！好了，今天就到这里，明天继续！加油！