<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title> image Reflection effect-beautiful style«style of beauty»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= "picture reflection effect: IE is made by filters. firefox1.5+, opera9+ is used canvas to deal with"/>
<meta name= "Author" content= "Aoao"/>
<meta content= "All" name= "robots"/>
<link rel= "Start" href= "http://http://www.alixixi.com/web/a/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);
}
}
}
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>
<body>
<p>ie is made of filters. firefox1.5+, opera9+ is treated with canvas. Legend Safari also supports canvas, but I have no environment. <BR/>
When you have finished, you will find that ... It turns out he was already wrapped up.
<a href= "http://cow.neondragon.net/stuff/reflection/" title= "Reflection.js 1.6" >reflection 1.6</a>
. But.. The important thing is that I learned something in the process.
</p>
<div id= "Reflection" >
</div>
<p>canvas Related information <a href= "Http://developer.mozilla.org/en/docs/Canvas_tutorial" >http:// Developer.mozilla.org/en/docs/canvas_tutorial</div>
</a></p>
<p id= "Copyright" >copyright©2006 <a rel= "Me" href= "http://http://www.alixixi.com/web/a/www.loaoao.com/" Title= "Beautiful style«style of beauty»http://www.alixixi.com/web/a/www.loaoao.com" >aoao</a>. <a rel= "license" href= "http://creativecommons.org/licenses/by/2.5/" title= "Knowledge sharing organization" >some Rights reserved</a >.</p>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
