zoukankan      html  css  js  c++  java
  • FireFox,IE下图片渐变示例

    <img src="13_dp.gif" name="TestImg" width="87" height="87" border="0" id="TestImg" style="0px;overflow:hidden;position:absolute;top:0px;filter:alpha(opacity=30);moz-opacity: 0.3;" title="渐变" onmouseover="addOpacity(this,5,30,100);" />

    <script language="javascript">

    var IE=!!(window.attachEvent && !window.opera);

    var Opera=!!window.opera;

    //设置图片透明度

        function setOpacity(id,value)

        {

           if(IE || Opera) {

                id.filters.alpha.opacity = value*100;

           }else

            {

               id.style.MozOpacity = value;

               id.style.Opacity = value;

           }

       }

        

        //透明度间变

        //id:目标引用,step:变化步长可为正或负,currentValue:当前值,targetValue:目标值

        function addOpacity(id,step,currentValue,targetValue)

        {

           if(step <0 && currentValue<=targetValue || step >0 && currentValue >= targetValue)

               return;

          currentValue = currentValue + step;

           setOpacity(id,currentValue/100);

           setTimeout(function(){addOpacity(id,step,currentValue,targetValue);},

               50);

        }

    </script>

  • 相关阅读:
    转载 | CSS文本溢出显示省略号
    转载 | CSS书写顺序
    转载 | CSS布局大全
    threejs sprite 制作标签
    typeScript 中的类
    Es5中的类
    typeScript中的函数
    websocket在vue项目中的使用
    typeScript中的变量数据类型
    echarts 中的1/4圆环行图的使用
  • 原文地址:https://www.cnblogs.com/top5/p/1542582.html
Copyright © 2011-2022 走看看