您的位置：首页 > Web前端 > JQuery

CSS实现透明效果通用方案以及使用javascript或jquery改变透明度

2014-02-17 00:00 816 查看
使用CSS实现透明度有很多方案，这里只是介绍大家通用的方法：
.transparent_class {
      filter:alpha(opacity=50);//标准的css透明度，在大部分的标准浏览器Firefox, Safari, and Opera都有效
      opacity: 0.5; //兼容IE解决方案
      -moz-opacity:0.5;//老的Mozilla browsers如Netscape Navigator.几乎没有可以不需要
      -khtml-opacity: 0.5; //兼容老的Safari (1.x) 版本,很少可以不用   
}


知道了CSS改变透明度的原理，那么使用javascript动态改变透明度就简单了：
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div{width:100px;height:100px;background-color:red}
        </style>
        <script>
            window.onload = function(){
                var myDiv = document.getElementById("transparent_div");
                myDiv.onclick = function(){
                    myDiv.style.opacity = ".4"; //针对所有通用浏览器
                    myDiv.style.filter = "alpha(opacity=40)"; //针对IE浏览器
                }
            }
        </script>
    </head>
    <body>
        <div id="transparent_div">this is transparent div</div>
    </body>
</html>


jQuery改变透明度实现如下：
$("#transparent_div").css({ opacity: .4 });


使用jQuery还可以轻松实现动画效果：
$("#transparent_div").click(function(){
     $("#transparent_div").animate({  
         opacity: .4  
         }, 1000, function() { 
             alert("动画完成");
     });  
 });
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航