/*
Baidu on the Internet, feel "from the middle to the two sides" the effect of writing is not very good, changed a bit, feel OK!
*/
<HTML> <Head> <title></title> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <Scripttype= "Text/javascript"> varimage; varintervalId1; varintervalId2; varintervalId3; vardrawW1= 0; varCanvas; varcontext; varDrawleft; varBAIYECHUANGITEMW; functioninit () {image= NewImage (); IMAGE.SRC="eg_mouse.jpg"; Canvas=document.getElementById ("CANVAS1"); Context=Canvas.getcontext ("2d"); Drawleft=Image.width/2; } functionstartlefttoright () {clearinterval (INTERVALID1); Context.clearrect (0,0, Image.width,image.height); IntervalId1=SetInterval ("lefttoright ();", -); } functionLeftToRight () {context.drawimage (image,0,0, DrawW1, Image.height,0,0, Draww1,image.height); DrawW1+= 2; if(drawW1>image.width) {drawW1=0; Clearinterval (INTERVALID1); } } functionCentertoouter () {drawW1+= 2;
//DRAWLEFT-DRAWW1/2 is the left endpoint, Drawleft is the middle, DRAWLEFT+DRAWW1/2 is the right endpoint context.drawimage (Image,drawleft-drawW1/2,0,DRAWW1,IMAGE.HEIGHT,DRAWLEFT-DRAWW1/2,0, Draww1,image.height); if(drawW1>Drawleft*2) {drawW1= 0; Clearinterval (INTERVALID2); } } functionStartcentertoouter () {clearinterval (INTERVALID2); Context.clearrect (0,0, Image.width,image.height); IntervalId2=SetInterval ("Centertoouter ();", -); } functionBaiyechuang () { for(i=0; I<Ten; I++) {context.drawimage (IMAGE,BAIYECHUANGITEMW*I,0, DRAWW1,IMAGE.HEIGHT,BAIYECHUANGITEMW*I,0, Draww1,image.height); } drawW1+= 0.2; if(drawW1>BAIYECHUANGITEMW) {clearinterval (INTERVALID3); } } functionStartbaiyechuang () {drawW1=0; BAIYECHUANGITEMW=Image.width/10.0;clearinterval (INTERVALID3); Context.clearrect (0,0, Image.width,image.height); IntervalId3=SetInterval ("Baiyechuang ();", -); } </Script> </Head> <Bodyonload= "init ();"> <H1><inputtype= "button"value= "Load picture from left to right"onclick= "startlefttoright ();"/></H1> <H1><inputtype= "button"value= "Load picture from middle to side"onclick= "Startcentertoouter ();"/></H1> <H1><inputtype= "button"value= "Shutter mode loading picture"onclick= "Startbaiyechuang ();"/></H1> <Div> <CanvasID= "CANVAS1"width= "400px"Height= "400px"></Canvas> </Div> </Body></HTML>
JS implementation image loading effects (from left to right, blinds, from center to side)