一个图片的倒影效果

2022-07-15 80酷酷网 80kuku.com
　　倒影
<!DOCTYPE html PUBLIC "-//W3C//DTD  1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片倒影效果- Beautiful Style « 样式之美 » loaoao.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="KEYWords" content="Reflection,canvas,filter,css,xhtml,effect" />
<meta name="DEscription" content="图片倒影效果: IE是滤镜做的的.Firefox1.5+ ,Opera9+ 是用canvas来处理的" />
<meta name="author" content="aoao" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.loaoao.com" title="Home" />
<script type="text/javascript">
 var draw=function(){
  var img=document.getElementById("gundam");
  var doc =document.getElementById("reflection"); 
  if (document.all && !window.opera) {
   var draw = document.createElement("DIV");
   draw.setAttribute("className","draw");
   doc.appendChild(draw);
  }
  else{
   var canvas = document.createElement("canvas");
   canvas.setAttribute("width",img.width);
   canvas.setAttribute("height",img.height);
   doc.appendChild(canvas);
   if (canvas.getContext){
    var test = canvas.getContext("2d");
    test.translate(0,img.height);
    test.scale(1,-1);
    test.drawImage(img, 0, 0,img.width,img.height);
    //test.globalCompositeOperation = "destination-out";
    var gradient = test.createLinearGradient(0, 0, 0, img.height);
    gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
    test.fillStyle = gradient;
    test.fillRect(0,0,img.width,img.height);
   }
  }
 }
 var webSiteID = 6;window.onload = draw;
</script>
<style type="text/css">
 #reflection{
 width:300px;
 margin:0 auto;
 }
 #gundam{
 display:block;
 }
 .draw{
 width:262px; height:240px;
   color:red;
    background:url("/UploadPic/2007-4/200741151936782.jpg") no-repeat ;
 filter:FlipV 
 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFFFF', endColorStr='#00000000', gradientType='0');
 /*progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)*/
   }
</style>
</head>
<body>
<h1>图片倒影效果</h1>
<p>IE是滤镜做的的.Firefox1.5+ ,Opera9+ 是用canvas来处理的.传说 Safari也支持canvas,可惜我没环境.<br />
做完后才发现...原来人家早就把他封装好了...
<a href="http://cow.neondragon.net/stuff/reflection/" title="Reflection.js 1.6 " >reflection 1.6</a>
. 不过..重要的是我在过程学到东西..
</p>
<div id="reflection">
<img id="gundam" src="http://file.wbgxw.com/UpLoadPic/2007-4/200741151936782.jpg"/>
</div>
<p>canvas的相关资料<a href="http://developer.mozilla.org/en/docs/Canvas_tutorial"></div>
</a></p>
<p id="copyright">Copyright © 2006 <a rel="me" href="http://www.loaoao.com/" title="Beautiful Style « 样式之美 » ">aoao</a> .  <a rel="license" href="http://creativecommons.org/licenses/by/2.5/" title="知识共享组织">Some rights reserved</a>.</p>
</body>
</html>