用jQuery写的简单的图片变化且带alpha滤镜的动态效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Alpha.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <mce:script type="text/javascript" src="extjs/adapter/jquery/jquery.js" mce_src="extjs/adapter/jquery/jquery.js"></mce:script> <mce:script type="text/javascript"> <!-- var ary = ["red", "blue", "#CCFFFF", "#99FFCC"]; var imgAry = new Array(); imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg"); imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg"); imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg"); imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg"); var i = 0; $(function () { $("div").css("width", "300px").css("height", "200px").css("border", "1px solid red"); $("img").css("width", "200px").css("height", "200px") .css("filter", "progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=3,opacity=0,finishOpacity=100)"); /* 调节style=3,opacity=0,finishOpacity=100这三个值改变效果， style 渐变样式 0，1，2，3 opacity开始透明度 0 25 50 75 100 finishOpacity结束透明读0 25 50 75 100 */ show(); }); function show () { $("div").css("background-color", ary[i]); $("img").attr("src", imgAry[i]); i++; if (i > ary.length - 1) { i = 0; } setTimeout("show()", "1000"); } // --> </mce:script> </head> <body> <div> <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"/> </div> </body> </html>
posted on 2010-06-08 13:52 java课程设计 阅读(331) 评论(0) 编辑 收藏 举报
