jQuery 变动图片、滤镜效果
最后更新于：2022-04-01 10:04:56
~~~
用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>
~~~