묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
따라다니는 레이어 (장바구니 같은..)
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 남기남 |
들국화 | 다시 질문드립니다..아시는 고수님들 부탁드려요 [2] | 2009.07.09 by 착한 |
uaful | xe공식홈에 쓰인 스킨들 [5] | 2009.07.09 by 착한 |
글쓴이 | 저~~번에 있던 포토샵강좌 이런건 어디에 갔나요 | |
2001711173 | TEST | |
글쓴이 | 기본 URL을 다시 입력하는 방법 [2] | 2009.07.09 by 글쓴이 |
용바 | 따라다니는 레이어 (장바구니 같은..) [2] | 2009.07.09 by uaful |
uaful | 으 css만지는 도중 (소스 첨부) [3] | 2009.07.09 by uaful |
달구벌 | [재질문] 회원정보보기에서 일부항목 안 나타나게 하는 방법 좀~ | |
글쓴이 | 외부페이지에 만든 파일에 위젯 붙이니까 에러가 --; | |
victoria | apm setup 에서 설치했는데 안돼요~~ [1] | 2009.07.09 by 김경훈229 |
글쓴이 | SOS [3] | 2009.07.09 by 글쓴이 |
세라오빠 | 회원정보관리내 달력 등이 안뜹니다. [1] | 2009.07.09 by 주하니 |
TooliCEO | SSL 사용시 | |
Jiyoung540 | rewrite mode 해제와 도메인 포워딩 문제-섭폴더로 안되네요;;; [1] | 2009.07.09 by 초록사냥 |
글쓴이 | 글씨크기조절 [4] | 2009.07.09 by 글쓴이 |
장단엽 | 글자크기조절 [1] | 2009.07.09 by 글쓴이 |
dusskapark | 확장변수를 계산해서 출력할 수 있나요? [2] | 2009.07.09 by June Oh |
sugarkane | 도움 좀 주세용 - 확장 변수, 글쓰기 관련 | |
폰트수정 | 게시판 리스트에서 폰트 수정하는 방법 좀 알려주세요 [1] | 2009.07.09 by 궁금이2 |
나지롱이지롱 | 게시판에 워닝 이 떠요~ 도와주세요 [2] | 2009.07.09 by 글쓴이 |