DEMO1(무작위로 나타남): http://cnwander.com/demo/puzzle_효과 /
기계가 구성된 경우 그림을 더 세밀하게 잘라낼 수 있습니다(변수 xNum, yNum).
DEMO1(규칙 이동): http://cnwander.com/demo/puzzle_ 효과/index2.html
테스트: IE6, IE7, FF3.014
원문: http://cnwander.com/blog/?p=13
기발한 효과는 주로 아이디어를 강조하지만 효과는 여전히 상대적으로 약합니다. 약간의 창의성을 발휘하면 좀 더 혁신적인 그림 전환 효과를 얻을 수 있습니다.
아이디어는 특별한 것이 없습니다. 관심 있는 학생들이 직접 DEMO를 시청해 보세요.
효과 1(무작위로 나타남):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>퍼즐 효과 - 작성자: Wander</title>
<스타일 유형="텍스트/css">
* {여백:0;
ul {목록 스타일:없음}
img {경계:0}
본문 {위치:상대적; 배경:텍스트 정렬:중심; 글꼴:12px/120% Arial,simsun,sans-serif }
.imgWrap {마진:0 자동}
#thumbs {위치:절대; 위쪽: 600px 왼쪽:300px}
#thumbs li {float:left; 여백:0 5px;
#thumbs li img {float:left}
#thumbs li.current {마진:-3px 2px 0 2px 패딩:1px 테두리:2px 단색 검정}
</style>
<스크립트 유형="텍스트/자바스크립트">
//[email protected]의 코드
var xNum = 2,
y번호 = 2,
x한계,
y한계;;
var 엄지 손가락, 포장;
window.onload = 함수() {
var ThumbsWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - ThumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,screen.height - 200];
엄지손가락 = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
각각(thumbs,thumbEvts);
}
함수 ThumbEvts() {
this.onclick = 썸다운;
함수 ThumbDown(e) {
각각(엄지손가락,함수(){
this.className = "";
});
this.className = "현재";
loadImg(this.getAttribute("url"));
}
}
함수 loadImg(url) {
var img = 새 이미지();
var 왼쪽,
상단 = 100,
imgW,imgH;
if(wrap) RemoveElem(wrap);
Wrap = addDiv($("body"),{className:"imgWrap"});
img.src = URL;
Wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.width > 0) initImg();
그렇지 않으면 img.onload = initImg;
함수 initImg() {
imgW = img.폭;
imgH = img.높이;
왼쪽 = ($("body").clientWidth - imgW)/2;
Wrap.innerHTML = "";
숫자타이머 = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++)
addPiece(i,j);
}
}
함수 addPiece(x,y) {
var obj = addDiv(wrap),
w = 이미지W/xNum,
h = imgH/yNum,
오파 = 0,
xPos = x*w,
yPos = y*h,
xStart = 무작위 수(xLimit[0],xLimit[1]-w),
yStart = randowNum(yLimit[0],yLimit[1]-h);
슬라이드투();
함수 SlideTo() {
변수 a = 0.2,
toScale = 1,
toX = 왼쪽+xPos,
toY = 상단+yPos,
toOpa = 1,
타이머 = window.setInterval(move,20);
숫자타이머++;
함수 이동() {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
opa += (toOpa - opa)*a;
if(Math.abs(toX-xStart)<=1) {
xStart = toX;
yStart = toY;
opa = toOpa;
window.clearInterval(타이머);
숫자타이머--;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
Wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "위치:절대;왼쪽:"+xStart+"px;상단: "+yStart+"px;너비:"+w+"px;높이:"+h+"px;배경:url("+url+ ") 반복 없음 -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; 불투명도:"+ opa;
}
}
}
}
함수 addDiv(where,attr) {
var obj = document.createElement("div");
if(속성)
for(attr의 var 키) {
if(key == "className") obj.className = attr[key];
else obj.setAttribute(key,attr[key]);
}
where.appendChild(obj);
반환 객체;
}
함수 제거Elem(elem){
var parent = elem.parentNode;
if(부모){
parent.removeChild(elem);
}
}
//객체를 순회
함수 각각(obj,fuc) {
for(obj의 var 키) {
obj[key].index = 키;
fuc.call(obj[키]);
}
}
함수 ranowNum(시작,끝) {
return Math.floor(Math.random()*(end - start)) + start;
}
//스타일 설정
함수 setStyle() {
if(arguments.length == 2 && typeof 인수[1] == "객체") {
for(인수[1]의 var 키) {
인수[0].스타일[키] = 인수[1][키];
}
} else if (arguments.length > 2) {
인수[0].스타일[인수[1]] = 인수[2];
}
}
//요소 찾기
함수 $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
결과 = [문서 감싸기 ||
while(eleExpr.test(s)) {
var 태그 = RegExp.$1,
유형 = RegExp.$2,
내용 = RegExp.$3,
요소 = [];
for(var i=0; i<result.length; i++) {
vartemp;
스위치(유형) {
사례 "#":
temp = [result[i].getElementById(content)];
부서지다;
사례 ".":
temp = getElemsByClassName(content,result[i],tag);
부서지다;
기본:
temp = 결과[i].getElementsByTagName(태그+콘텐츠);
}
for(온도의 var 키) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
결과 = [];
for(요소의 var 키) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? 결과[0] : 결과;
함수 getElemsByClassName(클래스 이름,요소,태그) {
var 결과 = [],
태그 = 태그 ||
allElems = elem.getElementsByTagName(tag) ||
for(var i=0; i<allElems.length; i++){
var list = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(list[j] == 클래스명) result.push(allElems[i]);
}
}
결과 반환;
}
}
</script>
</head>
<본문>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Wander의 공간</a></div>
<ul id="엄지손가락">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ 리>
<li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>
<li url="/articleimg/2009/11/7205/photo03.jpg"><img src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
</ul>
</body>
</html>
효과 2(규칙적인 움직임):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>퍼즐 효과 - 작성자: Wander</title>
<스타일 유형="텍스트/css">
* {여백:0;
ul {목록 스타일:없음}
img {경계:0}
본문 {위치:상대적; 배경:텍스트 정렬:중심; 글꼴:12px/120% Arial,simsun,sans-serif }
.imgWrap {마진:0 자동}
#thumbs {위치:절대; 위쪽: 600px 왼쪽:300px}
#thumbs li {float:left; 여백:0 5px;
#thumbs li img {float:left}
#thumbs li.current {margin:-3px 2px 0 2px; 테두리:2px 단색 검정}
</style>
<스크립트 유형="텍스트/자바스크립트">
//[email protected]의 코드
var xNum = 3,
y번호 = 3,
x한계,
y한계;;
var 엄지 손가락, 포장;
window.onload = 함수() {
var ThumbsWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - ThumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,screen.height - 250];
엄지손가락 = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
각각(thumbs,thumbEvts);
}
함수 ThumbEvts() {
this.onclick = 썸다운;
함수 ThumbDown(e) {
각각(엄지손가락,함수(){
this.className = "";
});
this.className = "현재";
loadImg(this.getAttribute("url"));
}
}
함수 loadImg(url) {
var img = 새 이미지();
var 왼쪽,
상단 = 100,
imgW,imgH;
if(wrap) RemoveElem(wrap);
Wrap = addDiv($("body"),{className:"imgWrap"});
img.src = URL;
Wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.width > 0) initImg();
그렇지 않으면 img.onload = initImg;
함수 initImg() {
imgW = img.폭;
imgH = img.높이;
왼쪽 = ($("body").clientWidth - imgW)/2;
Wrap.innerHTML = "";
숫자타이머 = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++) {
var xStart = (xLimit[1])*i/(xNum-1) - imgW*0.5/xNum,
yStart = (yLimit[1])*j/(yNum-1) - imgH/yNum;
addPiece(xStart,yStart,i,j);
}
}
}
함수 addPiece(xStart,yStart,xEnd,yEnd) {
var obj = addDiv(wrap),
w = 이미지W/xNum,
h = imgH/yNum,
오파 = 0,
xPos = xEnd*w,
yPos = yEnd*h;
슬라이드투();
함수 SlideTo() {
변수 a = 0.2,
toScale = 1,
toX = 왼쪽+xPos,
toY = 상단+yPos,
toOpa = 1,
타이머 = window.setInterval(move,20);
숫자타이머++;
함수 이동() {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
opa += (toOpa - opa)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xStart = toX;
yStart = toY;
opa = toOpa;
window.clearInterval(타이머);
숫자타이머--;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
Wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "위치:절대;왼쪽:"+xStart+"px;상단: "+yStart+"px;너비:"+w+"px;높이:"+h+"px;배경:url("+url+ ") 반복 없음 -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; 불투명도:"+ opa;
}
}
}
}
함수 addDiv(where,attr) {
var obj = document.createElement("div");
if(속성)
for(attr의 var 키) {
if(key == "className") obj.className = attr[key];
else obj.setAttribute(key,attr[key]);
}
where.appendChild(obj);
반환 객체;
}
함수 제거Elem(elem){
var parent = elem.parentNode;
if(부모){
parent.removeChild(elem);
}
}
//객체를 순회
함수 각각(obj,fuc) {
for(obj의 var 키) {
obj[key].index = 키;
fuc.call(obj[키]);
}
}
함수 ranowNum(시작,끝) {
return Math.floor(Math.random()*(end - start)) + start;
}
//스타일 설정
함수 setStyle() {
if(arguments.length == 2 && typeof 인수[1] == "객체") {
for(인수[1]의 var 키) {
인수[0].스타일[키] = 인수[1][키];
}
} else if (arguments.length > 2) {
인수[0].스타일[인수[1]] = 인수[2];
}
}
//요소 찾기
함수 $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
결과 = [문서 감싸기 ||
while(eleExpr.test(s)) {
var 태그 = RegExp.$1,
유형 = RegExp.$2,
내용 = RegExp.$3,
요소 = [];
for(var i=0; i<result.length; i++) {
vartemp;
스위치(유형) {
사례 "#":
temp = [result[i].getElementById(content)];
부서지다;
사례 ".":
temp = getElemsByClassName(content,result[i],tag);
부서지다;
기본:
temp = 결과[i].getElementsByTagName(태그+콘텐츠);
}
for(온도의 var 키) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
결과 = [];
for(요소의 var 키) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? 결과[0] : 결과;
함수 getElemsByClassName(클래스 이름,요소,태그) {
var 결과 = [],
태그 = 태그 ||
allElems = elem.getElementsByTagName(tag) ||
for(var i=0; i<allElems.length; i++){
var list = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(list[j] == 클래스명) result.push(allElems[i]);
}
}
결과 반환;
}
}
</script>
</head>
<본문>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Wander의 공간</a></div>
<ul id="엄지손가락">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ 리>
<li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>
<li url="/articleimg/2009/11/7205/photo03.jpg"><img src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
</ul>
</body>
</html>
클래식 포럼 교환 :
http://bbs.blueidea.com/thread-2952337-1-1.html