码迷,mamicode.com
首页 > 其他好文 > 详细

透明度的设置问题

时间:2017-09-04 11:53:35      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:相同   char   tin   art   height   opacity   ext   ==   问题   

1、透明度的样式设置:

透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性;

filter:alpha(opacity:30);
opacity:0.3;

 

2、原生js设置透明度
为了兼容IE与其他浏览器对透明度的设置,代码如下:

var alpha=30;
var mydiv=document.getElementById("myDiv");
mydiv.style.filter="alpha(opacity:"+alpha+")";
mydiv.style.opacity=alpha/100;

 

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

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

 

4、举例:鼠标移入,透明度变小;鼠标移出,恢复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js透明度动画</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        div{
            width:200px;
            height:200px;
            background-color:#f00;
            filter:alpha(opacity:100);/*IE浏览器*/
            opacity:1;/*Firefox浏览器*/
        }
    </style>
    <script>
        window.onload=function(){
            var mydiv=document.getElementById("myDiv");

            mydiv.onmouseover=function(){//鼠标移入
                startMove(30);
            }
            mydiv.onmouseout=function(){//鼠标移出
                startMove(100);
            }
        }

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

        function startMove(iTarget){
            var speed=0;
            var mydiv=document.getElementById("myDiv");
            clearInterval(timer);
            timer=setInterval(function(){
                if(alpha>iTarget){
                    speed= -10;
                }else{
                    speed= 10;
                }

                if(iTarget==alpha){
                    clearInterval(timer);
                }else{
                    alpha+=speed;
                    mydiv.style.filter="alpha(opacity:"+alpha+")";//设置IE透明度
                    mydiv.style.opacity=alpha/100;//设置Firefox透明度,值为小数,其实可以写成alpha*0.01
                }
            },50);
        }
    </script>
</head>
<body>
    <div id="myDiv"></div>
</body>
</html>

 

透明度的设置问题

标签:相同   char   tin   art   height   opacity   ext   ==   问题   

原文地址:http://www.cnblogs.com/dorra/p/7472721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!