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程序设计有所帮助。