javascript實(shí)現(xiàn)的圖片切割多塊效果實(shí)例
更新時(shí)間：2015年05月07日 09:25:05 投稿：shichen2014
這篇文章主要介紹了javascript實(shí)現(xiàn)的圖片切割多塊效果,涉及javascript操作圖片及css樣式的技巧,需要的朋友可以參考下
本文實(shí)例講述了javascript實(shí)現(xiàn)的圖片切割多塊效果。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="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:5px solid #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>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function crossLine(container,option,callback){
var lineX=$("<div style='width:2000px;height:4px;overflow:hidden;position:absolute;background:#FACC41;left:0;top:0;z-index:1'></div>");
var lineY=$("<div style='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;
var targetPosX=option.targetPosX;
var targetPosY=option.targetPosY;
var time=option.time;
var freq=option.freq;
times=time/freq;
container.append(lineX).append(lineY);
//開始運(yùn)動(dòng)
var lxt=lineX.position().top;
var lyl=lineY.position().left;
xPerTime=targetPosX/times;
yPerTime=targetPosY/times;
var count=0;
var si=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);
}
function picSplit(line1,line2,container,option){
//begin
line1.css("z-index",2);
/*
var targetX=282;
var targetY=147;
*/
var _option={
"targetX":container.width()/2,
"targetY":container.height()/2,
"time":500,
"freq":10
};
$.extend(_option,option);
option=_option;
var targetX=option.targetX;
var targetY=option.targetY;
var containerWidth=container.width();
var containerHeight=container.height();
/*
*復(fù)制四個(gè)，放入四個(gè)容器，置于四角，然后移動(dòng)
*/
//div0-4 容器，放置于四角
var div0=$("<div></div>").css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","width":targetX,"height":targetY,"z-index":"2","overflow":"hidden"}).appendTo(container);
var div1=$("<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);
var div2=$("<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);
var div3=$("<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復(fù)制出來的層
var tempL0=line1.clone().css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div0);
var tempL1=line1.clone().css({"position":"absolute","left":-targetX,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div1);
var tempL2=line1.clone().css({"position":"absolute","left":-targetX,"top":-targetY,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div2);
var tempL3=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");
//開始運(yùn)動(dòng)
var time=option.time;
var freq=option.freq;
var times=time/freq;
var count=0;
var xLeftPerTime=3;
var xRightPerTime=3;
var yTopPerTime=3;
var yBottomPerTime=3;
var l0=div0.position().left;
var t0=div0.position().top;
var l1=div1.position().left;
var t1=div1.position().top;
var l2=div2.position().left;
var t2=div2.position().top;
var l3=div3.position().left;
var t3=div3.position().top;
var si=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>
<div class="container" id="container">
<div class="line" id="line1"><img src="http://static.house.sina.com.cn/apileju/cms/110819/1820432103.jpg" alt="" /></div>
<div class="line" id="line2"><img src="http://static.house.sina.com.cn/apileju/cms/110819/1110183294.jpg" alt="" /></div>
</div>
<input type="button" value="GO" onclick="javascript:go()" />
<script type="text/javascript">
var line1=$("#line1");
var line2=$("#line2");
line1.css("display","block");
var container=$("#container");
function go(){
var option={"display":"none"};
crossLine(container,option,gopicSplit);
}
var container=$("#container");
function gopicSplit(){
picSplit(line1,line2,container);
}
</script>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
深入理解JavaScript系列（18）：面向?qū)ο缶幊讨瓻CMAScript實(shí)現(xiàn)
這篇文章主要介紹了深入理解JavaScript系列（18）：面向?qū)ο缶幊讨瓻CMAScript實(shí)現(xiàn),本文講解了數(shù)據(jù)類型、原始值類型、Object類型、動(dòng)態(tài)性、內(nèi)置對(duì)象、原生對(duì)象及宿主對(duì)象等內(nèi)容,需要的朋友可以參考下2015-03-03
javascript設(shè)計(jì)模式之對(duì)象工廠函數(shù)與構(gòu)造函數(shù)詳解
這篇文章主要介紹了javascript設(shè)計(jì)模式之對(duì)象工廠函數(shù)與構(gòu)造函數(shù)詳解，使用對(duì)象字面量，或者向空對(duì)象中動(dòng)態(tài)地添加新成員，是最簡單易用的對(duì)象創(chuàng)建方法，除了這兩種常用的對(duì)象創(chuàng)建方式，JavaScript還提供了其他方法創(chuàng)建對(duì)象,需要的朋友可以參考下2015-07-07
JavaScript進(jìn)階教程(第二課)...2007-04-04
獲取body標(biāo)簽的兩種方法，有時(shí)候需要?jiǎng)討B(tài)的在body中添加內(nèi)容用得到。2011-10-10
javascript學(xué)習(xí)筆記(十三) js閉包介紹(轉(zhuǎn))
閉包（closure）是Javascript語言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)2012-06-06
這篇文章主要介紹了ECMAscript 變量作用域，通過使用var操作符聲明和未使用var操作符聲明兩種情景做出了解釋，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
JavaScript必知必會(huì)(七)js對(duì)象繼承
這篇文章主要介紹了JavaScript必知必會(huì)(七)js對(duì)象繼承的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
深入解析JavaScript中的數(shù)字對(duì)象與字符串對(duì)象
這篇文章主要介紹了JavaScript中的數(shù)字對(duì)象與字符串對(duì)象,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-10-10
本文主要介紹javascript中三種常見的代碼注釋的方法，希望能夠幫到大家。2016-06-06
在JavaScript的正則表達(dá)式中使用exec()方法
這篇文章主要介紹了在JavaScript的正則表達(dá)式中使用exec()方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06