javascript实现的图片切割多块效果实例
本文实例讲述了javascript实现的图片切割多块效果。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"> <head> <title></title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <styletype="text/css"> .line{ display:none; z-index:1; left:0; top:0; position:absolute; } #line1{ display:block; } .container{ position:relative; width:564px; height:294px; overflow:hidden; } .border{ border:5pxsolid#000; } .corner{ position:absolute; width:282px; height:147px; background:#ccc; overflow:hidden; } .leftTop,.inLeftTop{ position:absolute; left:0; top:0; right:auto; bottom:auto; } .rightTop,.inRightTop{ position:absolute; right:0; top:0; left:auto; bottom:auto; } .rightBottom,.inRightBottom{ position:absolute; right:0; bottom:0; top:auto; left:auto; } .leftBottom,.inLeftBottom{ position:absolute; left:0; bottom:0; top:auto; right:auto; } </style> </head> <body> <scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script> <scripttype="text/javascript"> functioncrossLine(container,option,callback){ varlineX=$("<divstyle='width:2000px;height:4px;overflow:hidden;position:absolute;background:#FACC41;left:0;top:0;z-index:1'></div>"); varlineY=$("<divstyle='width:4px;height:2000px;overflow:hidden;position:absolute;background:#FACC41;left:0;top:0;z-index:1'></div>"); var_option={ "display":"none", "targetPosX":container.width()/2-2, "targetPosY":container.height()/2-2, "time":500, "freq":10 }; $.extend(_option,option); option=_option; vartargetPosX=option.targetPosX; vartargetPosY=option.targetPosY; vartime=option.time; varfreq=option.freq; times=time/freq; container.append(lineX).append(lineY); //开始运动 varlxt=lineX.position().top; varlyl=lineY.position().left; xPerTime=targetPosX/times; yPerTime=targetPosY/times; varcount=0; varsi=setInterval(function(){ count++; if(count>=times){ clearInterval(si); if(typeof(callback)=="function"){ callback(); } if(option.display=="none"){ lineX.remove(); lineY.remove(); } } if(lxt+yPerTime<=targetPosY){ lxt+=yPerTime; lineX.css("top",lxt); }else{ lxt=targetPosY; lineX.css("top",targetPosY); } if(lyl+xPerTime<=targetPosX){ lyl+=xPerTime; lineY.css("left",lyl); }else{ lyl=targetPosX; lineY.css("left",targetPosX); } },freq); } functionpicSplit(line1,line2,container,option){ //begin line1.css("z-index",2); /* vartargetX=282; vartargetY=147; */ var_option={ "targetX":container.width()/2, "targetY":container.height()/2, "time":500, "freq":10 }; $.extend(_option,option); option=_option; vartargetX=option.targetX; vartargetY=option.targetY; varcontainerWidth=container.width(); varcontainerHeight=container.height(); /* *复制四个,放入四个容器,置于四角,然后移动 */ //div0-4容器,放置于四角 vardiv0=$("<div></div>").css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","width":targetX,"height":targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); vardiv1=$("<div></div>").css({"position":"absolute","left":targetX,"top":0,"right":"auto","bottom":"auto","width":containerWidth-targetX,"height":targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); vardiv2=$("<div></div>").css({"position":"absolute","left":targetX,"top":targetY,"right":"auto","bottom":"auto","width":targetX,"height":containerHeight-targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); vardiv3=$("<div></div>").css({"position":"absolute","left":0,"top":targetY,"right":"auto","bottom":"auto","width":targetX,"height":containerHeight-targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); //tempL0-4复制出来的层 vartempL0=line1.clone().css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div0); vartempL1=line1.clone().css({"position":"absolute","left":-targetX,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div1); vartempL2=line1.clone().css({"position":"absolute","left":-targetX,"top":-targetY,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div2); vartempL3=line1.clone().css({"position":"absolute","left":0,"top":-targetY,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div3); line1.css("display","none"); line2.css("display","block"); //开始运动 vartime=option.time; varfreq=option.freq; vartimes=time/freq; varcount=0; varxLeftPerTime=3; varxRightPerTime=3; varyTopPerTime=3; varyBottomPerTime=3; varl0=div0.position().left; vart0=div0.position().top; varl1=div1.position().left; vart1=div1.position().top; varl2=div2.position().left; vart2=div2.position().top; varl3=div3.position().left; vart3=div3.position().top; varsi=setInterval(function(){ count++; if(count>=times){ clearInterval(si); div0.remove(); div1.remove(); div2.remove(); div3.remove(); } l0=l0-xLeftPerTime; t0=t0-yTopPerTime; l1=l1+xRightPerTime; t1=t1-yTopPerTime; l2=l2+xRightPerTime; t2=t2+yBottomPerTime; l3=l3-xLeftPerTime; t3=t3+yBottomPerTime; div0.css("left",(l0-xLeftPerTime)+"px"); div0.css("top",(t0-yTopPerTime)+"px"); div1.css("left",(l1+xRightPerTime)+"px"); div1.css("top",(t1-yTopPerTime)+"px"); div2.css("left",(l2+xRightPerTime)+"px"); div2.css("top",(t2+yBottomPerTime)+"px"); div3.css("left",(l3-xLeftPerTime)+"px"); div3.css("top",(t3+yBottomPerTime)+"px"); },freq); } </script> <divclass="container"id="container"> <divclass="line"id="line1"><imgsrc="http://static.house.sina.com.cn/apileju/cms/110819/1820432103.jpg"alt=""/></div> <divclass="line"id="line2"><imgsrc="http://static.house.sina.com.cn/apileju/cms/110819/1110183294.jpg"alt=""/></div> </div> <inputtype="button"value="GO"onclick="javascript:go()"/> <scripttype="text/javascript"> varline1=$("#line1"); varline2=$("#line2"); line1.css("display","block"); varcontainer=$("#container"); functiongo(){ varoption={"display":"none"}; crossLine(container,option,gopicSplit); } varcontainer=$("#container"); functiongopicSplit(){ picSplit(line1,line2,container); } </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。