zoukankan      html  css  js  c++  java
  • CSS中用javascript或jquery实现透明度的改变

    如何用CSS实现背景半透明效果?做过活动页面的可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。

    不过如果你只需求在IE下实现,使用CSS实现透明度有很多方案,这里只是介绍大家通用的方法:

    1.  .transparent_class {

    2.        filter:alpha(opacity=50);//标准的css透明度,在大部分的标准浏览器Firefox, Safari, and Opera都有效

    3.        opacity:0.5;//兼容IE解决方案

    4.        -moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.几乎没有可以不需要

    5.        -khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用  

    6.  }


    知道了CSS改变透明度的原理,那么使用javascript动态改变透明度就简单了:

    1.  <html>

    2.      <head>

    3.          <title></title>

    4.          <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

    5.          <style>

    6.              div{100px;height:100px;background-color:red}

    7.          </style>

    8.          <script>

    9.              window.onload =function(){

    10.                var myDiv = document.getElementById("transparent_div");

    11.                myDiv.onclick =function(){

    12.                    myDiv.style.opacity =".4";//针对所有通用浏览器

    13.                    myDiv.style.filter ="alpha(opacity=40)";//针对IE浏览器

    14.                }

    15.            }

    16.        </script>

    17.    </head>

    18.    <body>

    19.        <divid="transparent_div">this istransparent div</div>

    20.    </body>

    21.</html>


    jQuery改变透明度实现如下:

    1.  $("#transparent_div").css({ opacity:.4});


    使用jQuery还可以轻松实现动画效果:

    1.  $("#transparent_div").click(function(){

    2.       $("#transparent_div").animate({ 

    3.           opacity:.4 

    4.           },1000,function(){

    5.               alert("动画完成");

    6.       }); 

    7.   });

    来源:http://front.anyforweb.com/newsDetail69.shtml

    用JQuery改变图片的透明度

    下面的例子展示了你如何改变项目的透明度。当鼠标滑过<img>标签时,用hover()函数设置透明度样式。

    Html代码 
      1. <!DOCTYPE html>  
      2. <html>  
      3. <head>  
      4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
      5.     <script text="text/javascript">  
      6.         const OUT_OPACITY = 0.4;  
      7.         const OVER_OPACITY = 1.0;  
      8.         $(function() {  
      9.             $("div#miniGallery img").css("opacity", OUT_OPACITY)  
      10.                 .hover(  
      11.                     function () {  
      12.                         $(this).animate({opacity:OVER_OPACITY});  
      13.                     },  
      14.                     function () {  
      15.                         $(this).animate({opacity:OUT_OPACITY});  
      16.                     }  
      17.                 );  
      18.             });  
      19.     </script>  
      20. </head>  
      21. <body>   
      22.     <div id="miniGallery">  
      23.         <img src="http://helpexamples.com/flash/images/image1.jpg" width="150" />  
      24.         <img src="http://helpexamples.com/flash/images/image2.jpg" width="150" />  
      25.         <img src="http://helpexamples.com/flash/images/image3.jpg" width="150" />  
      26.     </div>   
      27. </body>  
      28. </html
  • 相关阅读:
    解析链接部分
    按指定格式输出日期时间
    Comet:基于 HTTP 长连接的“服务器推”技术
    dialog组件
    中文字符截断的问题
    css垂直水平居中方案
    类的创建
    修改placeholder属性
    json化表单数据
    瀑布流布局
  • 原文地址:https://www.cnblogs.com/yanyanmammy/p/4335217.html
Copyright © 2011-2022 走看看