图片渐变特效......

google？
楼主 我想你要的应该是等比例将图片放大缩小吧？

解决方案 »

  1.   

    挺多种效果 希望有你要的<html>
    <head><meta content="text/html; charset=gb2312" http-equiv="Content-Type">
    <script language="JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    // -->
    </script>
    </head>
    <body onclick="Clicked()">
    <center>
    <div id="Layer1" style="position:absolute; left:298; top:190; width:402; height:221; z-index:1">   <p><font
        face="楷体_GB2312" size="3" color="#FF0000"><strong><em>请单击鼠标观察多姿多彩的图片过渡显示效果</em></strong></font><font
        color="#ff0000" face="楷体_GB2312" size="3">，</font>
    </div>
    <div id="Layer2" style="position:absolute; left:482px; top:56px; width:158px; height:323px; z-index:2">
      <table width="75">
        <tr> 
        </tr>
      </table>
    </div>
    <script>
    <!--
    transeffect = 0;
    theeffects = new Array(24);
    theeffects[0] = "盒状收缩 单击鼠标显示下一种过渡形式";
    theeffects[1] = "盒状向外 单击鼠标显示下一种过渡形式";
    theeffects[2] = "圆形收缩  单击鼠标显示下一种过渡形式";
    theeffects[3] = "圆形向内  单击鼠标显示下一种过渡形式";
    theeffects[4] = "从下向上  单击鼠标显示下一种过渡形式";
    theeffects[5] = "从上向下  单击鼠标显示下一种过渡形式";
    theeffects[6] = "从左向右  单击鼠标显示下一种过渡形式";
    theeffects[7] = "从右向左  单击鼠标显示下一种过渡形式";
    theeffects[8] = "百页窗形向右  单击鼠标显示下一种过渡形式";
    theeffects[9] = "百页窗形向下  单击鼠标显示下一种过渡形式";
    theeffects[10] = "棋盘形交叉向右  单击鼠标显示下一种过渡形式";
    theeffects[11] = "棋盘形交叉向下  单击鼠标显示下一种过渡形式";
    theeffects[12] = "随意溶解形  单击鼠标显示下一种过渡形式";
    theeffects[13] = "左右向内  单击鼠标显示下一种过渡形式";
    theeffects[14] = "左右向外  单击鼠标显示下一种过渡形式";
    theeffects[15] = "上下向内  单击鼠标显示下一种过渡形式";
    theeffects[16] = "上下向外  单击鼠标显示下一种过渡形式";
    theeffects[17] = "条纹状向左下  单击鼠标显示下一种过渡形式";
    theeffects[18] = "条纹状向左上  单击鼠标显示下一种过渡形式";
    theeffects[19] = "条纹状向右下  单击鼠标显示下一种过渡形式";
    theeffects[20] = "条纹状向右上  单击鼠标显示下一种过渡形式";
    theeffects[21] = "溶解水平状  单击鼠标显示下一种过渡形式";
    theeffects[22] = "溶解上下状  单击鼠标显示下一种过渡形式";
    theeffects[23] = "随着溶解";
    current_image = "image1";
    function Clicked() {
     var the_image, the_other;
     text2.style.visiblity="hidden";
     if (image1.style.visibility=="inherit") {
      the_image = image2;
      the_other = image1;
      }
     else {
      the_image = image1;
      the_other = image2;
      } 
     the_other.style.visibility="hidden";
     the_image.filters.item(0).Apply();
     the_image.filters.item(0).Transition = transeffect;
     the_image.filters.item(0).Play(2.0);
     the_image.style.visibility="inherit";
     text2.innerText=theeffects[transeffect];
     transeffect++;
     if (transeffect == 24)
      transeffect = 0;
     text2.style.visibility="visible";
    }
    //-->
    </script>
    <div id="image"><div id="text1"></div>
    <dd align="center">
    <img height="135" id="image1" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"
      style="FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden" width="113"> 
    <img
      height="135" id="image2" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"
      style="FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden" width="129"> </dd>
    </div><div id="text2" style="width: 624; height: 22"><div align="center"><center>
    <table width="100%">
      <tr>
              <td width="50%">　</td>
      </tr>
    </table>
    </center></div></div>
    </center>
    </body>
    </html>
      

  2.   

    就像这样的效果:http://map.sogou.com/map.html#city=%u6210%u90FD&c=11585718.750000087,3567500,12
      

  3.   

    模糊到清楚？个人的思路：
    首先，我们看到的图片应该是分成了很多个小块图片的，放大或缩小的时候，设置所有图片的zoom样式，将它们等比例放大或缩小(此时图片就可能出现模糊的情况)，同时，在服务器端获取当前比例下的新图片信息(ajax)，再将其呈现出来，同时将以前的图片remove掉
      

  4.   

    http://map.sogou.com/map.html#city=%u6210%u90FD&c=11585718.750000087,3567500,12
    地图应该是很多小块拼接的.
    地图放大是对已下载的图片进行同比放大,没用任何滤镜.图片放大了自然是模糊的.
    然后对各个小区块用新的图片更新覆盖.
      

  5.   

    google有提供api的。不用自己编写。
      

  6.   

    我没有用google.我用的是mapeasy