묻고답하기
따라다니는 레이어 (장바구니 같은..)
2009.07.09 10:53
안녕하세요..
간단하게 말씀드리면 제가 따라다니는 레이어 소스를 사용하는데
보통 html에서는 작동하지만,
제로보드 1.2.4에서 아무 동작이 하지 않습니다..
사용한 소스는 아래의 긴 부분을 Css에 추가 하였고,
레이아웃 html 파일에 <script>StickerManager.add("레이어아이디");</script> 을 추가 했는데도 안되네요..
혹시 이유아시는 분은 답변 부탁드립니다.
-------------------------------------------------------------
var StickerAnimation = function(){};
StickerAnimation.prototype = {
duration : null,
obj : null,
from : null,
to : null,
timer : 0,
step : 0,
start : function(obj, from, to, duration, type){
var self = this;
this.obj = obj;
this.from = from;
this.to = to;
this.now = new Date;
this.duration = duration || 1000;
this._delta = this['_delta' +(type || 'Elastic')];
if(this.timer)
this.stop();
this.timer = setInterval(function(){self.run();}, 10);
},
run : function(){
var time = ((new Date) - this.now) / this.duration;
var delta = this._delta(time);
var step = Math.pow(2, this.step);
var dep_x = (this.to.x - this.from.x) * delta;
var dep_y = (this.to.y - this.from.y) * delta;
if(time > 1){
this.stop();
this.end();
}else{
this.obj.style.marginLeft = this.from.x + dep_x + "px";
this.obj.style.marginTop = this.from.y + dep_y + "px";
}
},
end : function(){
this.obj.style.marginLeft = (this.to.x) + "px";
this.obj.style.marginTop = (this.to.y) + "px";
},
stop : function(){
clearInterval(this.timer);
this.timer = 0;
},
_deltaBounce : function(pos){
var p = 1 - pos;
var value;
for (var a = 0, b = 1; 1; a += b, b /= 2){
if (p >= (7 - 4 * a) / 11){
value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
break;
}
}
return 1 - value;
},
_deltaExpo : function(pos){
var p = 1 - pos;
return 1 - Math.pow(2, 8 * (p - 1));
},
_deltaElastic : function(pos){
var p = 1 - pos;
return 1 - Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * 1 / 3);
},
_deltaStatic : function(pos){
return 1;
}
}
var StickerManager = {
init : false,
stickers : [],
opts : [],
add : function(id, duration, type){
if(!this.init){
var self = this;
var init_event = function(){self.oninit();};
var scroll_event = function(){self.onscroll();};
if(window.attachEvent){
window.attachEvent('onload', init_event);
window.attachEvent('onscroll', scroll_event);
}else{
window.addEventListener('load', init_event, false);
document.addEventListener('scroll', scroll_event, false);
}
this.init = true;
}
this.stickers.push(id);
this.opts.push({duration:duration,type:type});
},
oninit : function(){
var sticker;
for(var x = 0, len = this.stickers.length; x < len; x++){
sticker = document.getElementById(this.stickers[x]);
if(!sticker){
alert(this.stickers[x] + ' is bad id.');
this.stickers[x] = null;
continue;
}
this.stickers[x] = sticker;
sticker.style.marginLeft = sticker.style.marginTop = "0px";
}
},
onscroll : function(){
var left = parseInt(document.body.scrollLeft);
var top = parseInt(document.body.scrollTop);
var sticker;
for(var x = 0, len = this.stickers.length; x < len; x++){
sticker = this.stickers[x];
if(!sticker)
continue;
if(!sticker.animation){
sticker.animation = new StickerAnimation();
}else{
sticker.animation.stop();
}
sticker.animation.start(
sticker,
{x:parseInt(sticker.style.marginLeft), y:parseInt(sticker.style.marginTop)},
{x:left, y:top},
this.opts[x].duration,
this.opts[x].type
);
}
}
}
-------------------------------------------------------------
var StickerAnimation = function(){};
StickerAnimation.prototype = {
duration : null,
obj : null,
from : null,
to : null,
timer : 0,
step : 0,
start : function(obj, from, to, duration, type){
var self = this;
this.obj = obj;
this.from = from;
this.to = to;
this.now = new Date;
this.duration = duration || 1000;
this._delta = this['_delta' +(type || 'Elastic')];
if(this.timer)
this.stop();
this.timer = setInterval(function(){self.run();}, 10);
},
run : function(){
var time = ((new Date) - this.now) / this.duration;
var delta = this._delta(time);
var step = Math.pow(2, this.step);
var dep_x = (this.to.x - this.from.x) * delta;
var dep_y = (this.to.y - this.from.y) * delta;
if(time > 1){
this.stop();
this.end();
}else{
this.obj.style.marginLeft = this.from.x + dep_x + "px";
this.obj.style.marginTop = this.from.y + dep_y + "px";
}
},
end : function(){
this.obj.style.marginLeft = (this.to.x) + "px";
this.obj.style.marginTop = (this.to.y) + "px";
},
stop : function(){
clearInterval(this.timer);
this.timer = 0;
},
_deltaBounce : function(pos){
var p = 1 - pos;
var value;
for (var a = 0, b = 1; 1; a += b, b /= 2){
if (p >= (7 - 4 * a) / 11){
value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
break;
}
}
return 1 - value;
},
_deltaExpo : function(pos){
var p = 1 - pos;
return 1 - Math.pow(2, 8 * (p - 1));
},
_deltaElastic : function(pos){
var p = 1 - pos;
return 1 - Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * 1 / 3);
},
_deltaStatic : function(pos){
return 1;
}
}
var StickerManager = {
init : false,
stickers : [],
opts : [],
add : function(id, duration, type){
if(!this.init){
var self = this;
var init_event = function(){self.oninit();};
var scroll_event = function(){self.onscroll();};
if(window.attachEvent){
window.attachEvent('onload', init_event);
window.attachEvent('onscroll', scroll_event);
}else{
window.addEventListener('load', init_event, false);
document.addEventListener('scroll', scroll_event, false);
}
this.init = true;
}
this.stickers.push(id);
this.opts.push({duration:duration,type:type});
},
oninit : function(){
var sticker;
for(var x = 0, len = this.stickers.length; x < len; x++){
sticker = document.getElementById(this.stickers[x]);
if(!sticker){
alert(this.stickers[x] + ' is bad id.');
this.stickers[x] = null;
continue;
}
this.stickers[x] = sticker;
sticker.style.marginLeft = sticker.style.marginTop = "0px";
}
},
onscroll : function(){
var left = parseInt(document.body.scrollLeft);
var top = parseInt(document.body.scrollTop);
var sticker;
for(var x = 0, len = this.stickers.length; x < len; x++){
sticker = this.stickers[x];
if(!sticker)
continue;
if(!sticker.animation){
sticker.animation = new StickerAnimation();
}else{
sticker.animation.stop();
}
sticker.animation.start(
sticker,
{x:parseInt(sticker.style.marginLeft), y:parseInt(sticker.style.marginTop)},
{x:left, y:top},
this.opts[x].duration,
this.opts[x].type
);
}
}
}
-------------------------------------------------------------
댓글 2
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| 용의눈물 | 이게 무슨 펑션인가요? [1] | 2011.08.16 by enzoy |
| 강과장 | 회원 가입폼에 파일첨부가 필요합니다... | |
| 서얼리 | 첨부파일다운에 관한 질문..제발해결첵좀부탁 | |
| 연정이 | 로그인에서~ [1] | 2011.08.16 by 송동우 |
| 박종선862 | 소스 위치 알려주시면 안될까요 [2] | 2011.08.16 by 하늘종 |
| 연정이 |
[다시봐주세요]게시판 아무리봐도 모르겠어요,
[2]
 | 2011.08.16 by 송동우 |
| 열심히살자!!! | XE기본보드에 갤러리 기능을 쓰고 있습니다. 가로픽셀 고정방법 문의드립니다. [1] | 2011.08.16 by 송동우 |
| 영무니 | 메뉴 추가수정이 안됩니다. [4] | 2011.08.16 by 투제이 |
| 수, 서 | 제발 가르쳐 주셔요.... [1] | 2011.08.16 by 송동우 |
| 곰돌이. | 이런 위젯 찾아주세요 ㅠㅠㅠ [1] | 2011.08.16 by 송동우 |
| djaos |
로그인에서 회원가입 부분지우는 방법좀 알려주세요
| |
| Snow[K] | 파일첨부시 IO에러가 나옵니다. [1] | 2011.08.16 by 스켈링턴 |
| djaos | 모바일에서는 쪽지확인 및 보내기가 안되나요? | |
| 최영석222 | 도메인 다른곳으로 옮기는것 얼마나 걸려요? [1] | 2011.08.16 by 송동우 |
| ohmyvkpop | 운영자님 이곳의 이미지 액박을 좀 해결 해주세요 [1] | 2011.08.16 by 송동우 |
| 박용한 | 게시판 목록에서 첨부파일 다운로드 바로하기 [1] | 2011.08.16 by 송동우 |
| 미래파 | 글작성후 특정페이지로 이동하려면? [2] | 2011.08.16 by 송동우 |
| ohmyvkpop | 꼭 좀 도와 주세요 [1] | 2011.08.15 by 송동우 |
| smartset | 홈페이지 접속하면 로그인페이지 먼저 뜨게 하기... [1] | 2011.08.15 by 송동우 |
| 정은미915 | 위젯 사라지는 현상..(운영중인 홈페이지 도움주세요~) [2] | 2011.08.15 by 송동우 |