1.       用jQuery写的简单的图片变化且带alpha滤镜的动态效果  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    3. <html>  
    4.   <head>  
    5.     <title>Alpha.html</title>  
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.     <mce:script type="text/javascript" src="extjs/adapter/jquery/jquery.js" mce_src="extjs/adapter/jquery/jquery.js"></mce:script>  
    10.     <mce:script type="text/javascript">  
    11.         <!--  
    12.         var ary = ["red", "blue", "#CCFFFF", "#99FFCC"];  
    13.         var imgAry = new Array();  
    14.         imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");  
    15.         imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");  
    16.         imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");  
    17.         imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg");  
    18.         var i = 0;  
    19.         $(function () {  
    20.             $("div").css("width", "300px").css("height", "200px").css("border", "1px solid red");  
    21.             $("img").css("width", "200px").css("height", "200px")  
    22.             .css("filter", "progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=3,opacity=0,finishOpacity=100)");  
    23.             /* 
    24.             调节style=3,opacity=0,finishOpacity=100这三个值改变效果， 
    25.             style 渐变样式 0，1，2，3 
    26.             opacity开始透明度 0 25 50 75 100 
    27.             finishOpacity结束透明读0 25 50 75 100 
    28.             */  
    29.             show();  
    30.         });  
    31.         function show () {  
    32.             $("div").css("background-color", ary[i]);  
    33.             $("img").attr("src", imgAry[i]);  
    34.             i++;  
    35.             if (i > ary.length - 1) {  
    36.                 i = 0;  
    37.             }  
    38.             setTimeout("show()", "1000");  
    39.         }  
    41.       // -->  
    42.       </mce:script>     
    43.   </head>  
    45.   <body>  
    46.     <div>  
    47.         <img src="http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg" mce_src="http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg"/>  
    48.     </div>  
    49.   </body>  
    50. </html>
    51.