js和jquery中有关透明度操作的问题

    在日常开发的网站中，常常会用到设置透明度问题，最简单的就是图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点：

   1 透明度样式设置

      透明度在IE浏览器和其他相关浏览器中的设置方法不太相同，IE使用filter：alpha属性，firefox使用opactiy属性，下面示例设置透明度为30%：

      IE：filter: alpha(opacity:30)；

      firefox：opacity(0.3)；

    2 原生js设置透明度

       为了兼容IE与其他浏览器对透明度的设置，我们需要对以上两种样式分别进行设置；   

      var alpha = 30;                                            //透明度值变量

      var oDiv = document.getElementById('div1'); //获取DOM元素对象

      oDiv.style.filter = 'alpha(opacity:'+alpha+')';  //设置IE的透明度

      oDiv.style.opacity = alpha / 100;                  //设置fierfox等透明度，注意透明度值是小数

   3 jQuery设置透明度

     jQuery中对透明度的设置进行了整合，兼容IE和其他浏览器，修改opactiy属性值即可，值为小数，因此只需要设置一次即可；

     $(function(){
        $("#div1").css("opacity","0.3");   //设置透明度
     });

   4 一个示例

      示例使用原生js实现一个div的淡入淡出效果；鼠标移入div区域，透明度为100%，鼠标移出div区域透明度为30%，同时用时间控制透明度转换效果； 

     window.οnlοad=function()

    {

         var oDiv = document.getElementById('div1');//获取div的DOM对象

         oDiv.onmouseover = function() //鼠标移入方法

         {

                   startMove(100);

         };

         oDiv.onmouseout = function() //鼠标移出方法

         {

                   startMove(30);

         };     

    }

 

     var timer = null;//时间对象

     var alpha = 30;//透明度初始值

    function startMove(iTarget)

   {

         var oDiv = document.getElementById('div1');

         clearInterval(timer);//清空时间对象

         timer = setInterval(function(){

                  var speed = 0;

                   if(alpha < iTarget)

                   {

                            speed =5;

                   }

                   else

                   {

                            speed = -5;

                   }

        

                   if(alpha == iTarget)

                   {

                            clearInterval(timer);

                   }

                   else

                   {

                            alpha +=speed;                                         //透明度值增加效果

                            oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE透明度

                            oDiv.style.opacity = alpha / 100;                 //设置其他浏览器

                   }

                },30);

     }

   

    100%透明度效果                       30%透明度效果

   

 

转载于:https://www.cnblogs.com/njcolin/p/njcolin.html