jQuery 变动图片、滤镜效果

发布于 2025-02-25 12:38:56 字数 2356 浏览 0 评论 0 收藏 0

用 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

jQuery 变动图片、滤镜效果

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。