DHTML zoomBox
페이지 정보
작성자 서방님 댓글 0건 조회 176회 작성일 07-02-03 14:13본문
nhn사 관련된 홈페이지에는 재미있는 스크립트가 정말 많습니다.
예전에 서핑하다가 하나 발견한건데, 응용해서 다른걸로 사용해보려고 연구중인 스크립트입니다.
'지식iN에 묻습니다' 라는 코너에서 사용중인 스크립트입니다.
http://event.naver.com/2007/01/kin
특정한곳에 마우스를 올렸을 경우 스르륵 네모박스가 나타납니다. 그곳에 들어갈내용은 맞춰서 작업하시면 됩니다.
<html>
<head>
<title>연습</title>
</head>
<body onload="zoomObj.Initialize()">
<script>
/*
╊━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
>> WEBZoom
* Ajax Team [ilzzang,YuIlSang,ulog@naver.com]
* 2007/01/08 (0.01)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┩
*/
var NHNWidget$WebZoom=function() {
if (typeof(Function.prototype.apply)=="undefined") {
Function.prototype.apply = function(object, parameters) {
var parameterStrings = new Array();
if (!object) object = window;
if (!parameters) parameters = new Array();
for (var i = 0; i < parameters.length; i++) parameterStrings[i] = 'parameters[' + i + ']';
object.__apply__ = this;
var result=eval('object.__apply__('+ parameterStrings.join(', ') +')');
object.__apply__ = null;
return result;
}
}
if(typeof([].push) == "undefined") Array.prototype.push = function(v){return this[this.length] = v}
if(typeof(Function.prototype.bind)=="undefined") {
Function.prototype.bind = function(object) {
var __method = this;
return function() {
return __method.apply(object, arguments);
}
}
}
var __U2base_version__=0.2;
var __U2base_use__=(typeof(U2)=="undefined" ? true : (__U2base_version__>U2.version ? true : false));
if(__U2base_use__==true) {
var U2={
version : __U2base_version__,
_Class : {},
_Event : {},
_Element : {},
_Package : {}
};
U2._Class={
Create : function() {
var Methods=arguments[0];
var Extends=arguments;
var returnObj=function(){
if(this.Constructor) this.Constructor.apply(this,arguments);
}
if(Extends.length>1) {for (var i=1;i<Extends.length;i++){returnObj=this.Extend(returnObj,Extends[i]);}}
returnObj=this.Extend(returnObj,Methods);
return returnObj;
},
Extend : function(returnObj/*, Define Method */) {
var Methods=arguments[1];
var methodName=null;
if(typeof returnObj!="function") {throw new Error("[_Class Function] Arguments[0] is not Function");}
if(typeof Methods!="object") {throw new Error("[_Class Function] Arguments[1] is not Object");}
for(var methodName in Methods) {returnObj.prototype[methodName]=Methods[methodName];}
return returnObj;
}
};
U2._Event={
addEvent : function(element, name, observer, useCapture) {
useCapture=useCapture || false;
if(element.addEventListener) {
element.addEventListener(name, observer, useCapture); // FF
}else if(element.attachEvent) {
element.attachEvent("on"+name, observer); // IE
}
},
removeEvent : function(element, name, observer, useCapture) {
if(element.removeEventListener) {
element.removeEventListener(name, observer, useCapture); // FF
}else if(element.detachEvent) {
element.detachEvent("on"+name, observer); // IE
}
},
clearEvent : function(element, name) {
var func=function() {};
element["on"+name]=func;
},
stopEvent : function() {
var event=window.event || arguments[0];
if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault(); else event.returnValue=false;
}
};
U2._Element={
getBadBrowser : function() {
if(navigator.userAgent.toLowerCase().indexOf("msie 5.0")>0 || navigator.userAgent.toLowerCase().indexOf("msie 5.5")>0) {return true;}else{return false;}
},
getBrowser : function() {
if(navigator.userAgent.toLowerCase().indexOf("msie")>=0) {
return "ie";
}else if (navigator.userAgent.toLowerCase().indexOf("firefox")>=0) {
return "ff";
}else if (navigator.userAgent.toLowerCase().indexOf("opera")>=0) {
return "op";
}else if (navigator.userAgent.toLowerCase().indexOf("safari")>=0) {
return "sf";
}
},
getClassName : function(obj,className) {
if(!obj) obj=document;
if(this.getBadBrowser()==true) {
var _e=["div","span","table","textarea","tr"];
var tag=[];
for (var i in _e) {
for (var j=0;j<obj.getElementsByTagName(_e[i]).length ;j++){
tag.push(obj.getElementsByTagName(_e[i])[j]);
}
}
}else{
var tag = obj.getElementsByTagName('*');
}
var tagLength=tag.length;
var array=[];
for (i=0;i<tagLength;i++) {
if(tag[i].className==className) {
array.push(tag[i]);
}
}
return array;
},
getOffset : {
Left : function(obj) {
var nid=obj;
var s=0;
while(nid.offsetParent) {
s +=nid.offsetLeft;
nid=nid.offsetParent;
}
return s;
},
Top : function(obj) {
var nid=obj;
var s=0;
while(nid.offsetParent) {
s +=nid.offsetTop;
nid=nid.offsetParent;
}
return s;
}
},
getStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
},
setStyle : function(element, styles,sw) {
var e;
if(!sw) { // ie 5.0
if(this.getBadBrowser()==true) {
e=element.id!="" ? document.getElementById(element.id) : element;
}else{
e=element;
}
}else{
e=element;
}
for(var styleName in styles) {
if(this.getBadBrowser()==true) {if(styleName=="cursor") styleName="hand";}
e.style[styleName]=styles[styleName];
}
},
setStyles : function() {
var aAs=arguments;
for (var i=0;i<aAs.length;i++) {
var sVarguments=aAs[i];
U2._Element.setStyle(sVarguments[0],sVarguments[1]);
}
}
};
U2._Package={
setup : function(e,path) {
var a=path.split('.');
var o=e;
for (var i=0;i<a.length;i++) {
var name=a[i];
if(typeof(o[name])==="undefined") {o[name]={};}
o=o[name];
}
}
};
};
var MotionClass=U2._Class.Create({
Constructor : function() {
this.oObj=arguments[0];
this.iSpeed=0.15;
this.oTid=null;
this.iTarget=30;
this.iNTarget=0;
},
onStarted : function() {},
onIng : function() {},
onFinished : function() {},
doMotion : function() {
this.onStarted();
clearInterval(this.oTid);
this.oTid=setInterval(this._doMotion.bind(this),13);
},
_doMotion : function() {
this.iNTarget +=this.iSpeed*(this.iTarget-this.iNTarget);
this.onIng();
if(this.iTarget==Math.ceil(this.iNTarget) || this.iTarget==Math.ceil(this.iNTarget)-1) {
clearInterval(this.oTid);
this.iNTarget=this.iTarget;
this.onFinished();
}
},
doStop : function() {
clearInterval(this.oTid);
this.onFinished();
}
});
var MouseClass=U2._Class.Create({
Constructor : function() {
this._xmouse=0;
this._ymouse=0;
this._layer_xmouse=0;
this._layer_ymouse=0;
},
getCoordinatesEvent : function() {
if(U2._Element.getBrowser()=="ie") {
this._xmouse=document.body.scrollLeft+event.clientX; //documentElement
this._ymouse=document.body.scrollTop+event.clientY;
this._layer_xmouse=event.offsetX;
this._layer_ymouse=event.offsetY;
}else{
this.event = arguments[0];
this._xmouse=document.body.scrollLeft+this.event.clientX;
this._ymouse=document.body.scrollTop+this.event.clientY;
this._layer_xmouse=this.event.layerX;
this._layer_ymouse=this.event.layerY;
}
},
getChk : function() {
var oObj=arguments[0];
return (this._xmouse>=oObj.x1 && this._xmouse<=oObj.x2 && this._ymouse>=oObj.y1 && this._ymouse<=oObj.y2 ? true : false);
}
});
/**
* WEBZoom
*/
var WebZoom=U2._Class.Create({
Constructor : function() {
var options=arguments[0];
this._def={
oBody : {
obj : document.body,
bStart : false
},
oZoom : {
oFrame : {
obj : null,
iWidth : 0,
iHeight : 0
},
oInnerFrame : {
obj : null
},
oWhiteFrmae : {
obj : null
},
oTmpFrame : {
obj : null
}
},
oLink : {
oLi : {
obj : null,
centerX : 0,
centerY : 0
}
},
oTid : null,
iMotionCount : 0
} // _def
this._opt={
name : null,
href : null,
image : null,
contents : null
}
this._conf={
width : options.width,
height : options.height
}
this.oMotionW1=new MotionClass(); // Motion Class
this.oMotionH1=new MotionClass(); // Motion Class
this.oMouse=new MouseClass(); // Mouse Class
},
Initialize : function() {
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
this.setDraw("zoomFrame");
},
doRun : function() {
var oLiObj=this._def.oLink.oLi.obj=arguments[0];
var options=arguments[1];
this._opt={
name : options.name,
href : options.href,
image : options.image,
contents : options.contents
}
this._def.oZoom.oFrame.iWidth=191;
this._def.oZoom.oFrame.iHeight=240;
this.doOut();
this._def.oTid=setTimeout(function(){
this.setDraw("zoomCreate");
this.setDraw("zoomSmoothMotion");
this.setEvent("zoomMouseChk");
}.bind(this),300);
},
doOut : function() {
clearTimeout(this._def.oTid);
},
setDraw : function() {
var s=arguments[0];
var o=arguments[1];
switch(s) {
case "zoomCreate" :
var x1=U2._Element.getOffset.Left(this._def.oLink.oLi.obj);
var y1=U2._Element.getOffset.Top(this._def.oLink.oLi.obj);
var width=this._def.oLink.oLi.obj.offsetWidth;
var height=this._def.oLink.oLi.obj.offsetHeight;
var centerX=parseInt(x1+(width/2));
var centerY=parseInt(y1+(height/2));
U2._Element.setStyle(this._def.oZoom.oFrame.obj,{
display : "block",
top : y1+"px",
left : x1+"px",
width : width+"px",
height : height+"px"
});
this._def.oLink.oLi.centerX=centerX;
this._def.oLink.oLi.centerY=centerY;
break;
case "zoomSmoothMotion" :
/* Width++ Motion */
this.oMotionW1.iSpeed=0.2;
this.oMotionW1.iTarget=this._def.oZoom.oFrame.iWidth;
this.oMotionW1.iNTarget=this._conf.width;
this.oMotionW1.onStarted=function() {
}.bind(this);
this.oMotionW1.onIng=function() {
this.oMotionW1.bRunning=0;
var _inTarget=parseInt(this.oMotionW1.iNTarget);
U2._Element.setStyle(this._def.oZoom.oFrame.obj,{width : _inTarget+"px"});
var x1=U2._Element.getOffset.Left(this._def.oLink.oLi.obj);
var width=this._def.oLink.oLi.obj.offsetWidth;
var centerX=parseInt(x1+(width/2));
var left=centerX-parseInt(_inTarget/2);
U2._Element.setStyle(this._def.oZoom.oFrame.obj,{left : left+"px"});
}.bind(this);
this.oMotionW1.onFinished=function() {
this.setEvent("zoomMotionChk");
}.bind(this);
/* Height++ Motion */
this.oMotionH1.iSpeed=0.2;
this.oMotionH1.iTarget=this._def.oZoom.oFrame.iHeight;
this.oMotionH1.iNTarget=this._conf.height;
this.oMotionH1.onStarted=function() {}.bind(this);
this.oMotionH1.onIng=function() {
var _inTarget=parseInt(this.oMotionH1.iNTarget);
U2._Element.setStyle(this._def.oZoom.oFrame.obj,{height : _inTarget+"px"});
var y1=U2._Element.getOffset.Top(this._def.oLink.oLi.obj);
var height=this._def.oLink.oLi.obj.offsetHeight;
var centerY=parseInt(y1+(height/2));
var top=centerY-parseInt(_inTarget/2);
U2._Element.setStyle(this._def.oZoom.oFrame.obj,{top : top+"px"});
}.bind(this);
this.oMotionH1.onFinished=function() {
this.setEvent("zoomMotionChk");
}.bind(this);
/* Motion Running */
this.oMotionW1.doMotion();
this.oMotionH1.doMotion();
break;
case "zoomFrame" :
// 본문에 보이지 않는 ZoomFrame 를 미리생성해놓음
var cZoomFrame=this._def.oZoom.oFrame.obj=document.createElement("div");
var cZoomInnerFrame=this._def.oZoom.oInnerFrame.obj=document.createElement("div");
var cZoomWhiteFrame=this._def.oZoom.oWhiteFrmae.obj=document.createElement("div");
var cZoomTmpFrame=this._def.oZoom.oTmpFrame.obj=document.createElement("div");
U2._Element.setStyles([cZoomFrame,{
display : "none",
position : "absolute",
width : this._conf.width+"px",
height : this._conf.height+"px"
}],[cZoomInnerFrame,{
position : "relative",
width : "100%",
height : "100%",
background : "url('img/zoom_bg01.gif') #55A905 repeat-x",
padding : "27px 4px 3px 4px"
}],[cZoomWhiteFrame,{
position : "relative",
width : "100%",
height : "100%",
backgroundColor : "#fff"
}],[cZoomTmpFrame,{
display : "none"
}]);
cZoomInnerFrame.appendChild(cZoomWhiteFrame);
cZoomFrame.appendChild(cZoomInnerFrame);
this._def.oBody.obj.appendChild(cZoomFrame);
this._def.oBody.obj.appendChild(cZoomTmpFrame);
this._def.oBody.bStart=true;
break;
case "zoomContentsChange" :
this._def.oZoom.oTmpFrame.obj.appendChild(this._def.oZoom.oInnerFrame.obj);
var htmlContents="";
htmlContents +="<div style='text-align:left;position:relative;width:191px; height:241px; background:url(http://static.naver.com/event/kin/070110/large_bg.gif) left top no-repeat;'>";
htmlContents +=" <div style='text-align:center;position:relative;padding:7px 0 0 0; font-size:13px; color:#FFF; font-weight:bold;'>"+this._opt.name+"</div>";
htmlContents +=" <div style='position:relative;margin:4px 0 0 0px; padding:10px 0 0 0;'>";
htmlContents +=" <div style='text-align:center;position:relative;display:block'><a href=""+this._opt.href+""><img src=""+this._opt.image+"" width="153" height="148" border='0'></a></div>";
htmlContents +=" <div style='position:relative;display:block;margin-top:9px;'><div style='width:154px;margin-left:15px;text-align:center'><a href=""+this._opt.href+"">"+this._opt.contents+"</a></div></div>";
htmlContents +=" </div>";
htmlContents +="</div>";
this._def.oZoom.oFrame.obj.innerHTML=htmlContents;
break;
case "zoomFrame2" :
this._def.oZoom.oFrame.obj.innerHTML="";
this._def.oZoom.oFrame.obj.appendChild(this._def.oZoom.oInnerFrame.obj);
break;
}
},
setEvent : function() {
var s=arguments[0];
var o=arguments[1];
switch(s) {
case "zoomMouseChk" :
var eMouseCheck=function() {
this.oMouse.getCoordinatesEvent(arguments[0]); // mouse event check start
var Coordi=this.getObjectCoordinate(this._def.oZoom.oFrame.obj);
if(this.oMouse.getChk(Coordi)==false) {
U2._Event.removeEvent(document.body,"mousemove",eMouseCheck);
U2._Element.setStyle(this._def.oZoom.oFrame.obj,{display : "none"});
this.oMotionW1.doStop();
this.oMotionH1.doStop();
this.setDraw("zoomFrame2");
}
}.bind(this);
U2._Event.addEvent(document.body,"mousemove",eMouseCheck);
break;
case "zoomMotionChk" :
this._def.iMotionCount++;
if(this._def.iMotionCount==2) {
this.setDraw("zoomContentsChange");
this._def.iMotionCount=0;
}
break;
}
},
getObjectCoordinate : function() {
var oObj=arguments[0];
var returnVal={};
returnVal.x1=parseInt(U2._Element.getOffset.Left(oObj));
returnVal.y1=parseInt(U2._Element.getOffset.Top(oObj));
returnVal.x2=returnVal.x1+oObj.offsetWidth;
returnVal.y2=returnVal.y1+oObj.offsetHeight;
return returnVal;
},
procEvent : function() {
var s=arguments[0];
var o2=arguments, o=null, os=[];
if(o2.length>2) {for (var i=1;i<o2.length;i++){os[i]=o2[i];}o=os[0];}else{o=os[0]=arguments[1];}
switch(s) {
case "" :
break;
}
}
});
this.WebZoom=WebZoom;
}
</script>
<script>
var zoom=new NHNWidget$WebZoom();
var zoomObj=new zoom.WebZoom({
width : 100,
height : 100
});
</script>
<table cellpadding='0' cellspacing='0' border='0' style='width:100%; height:100%;'>
<tr>
<td align='center'><img src="http://static.naver.com/event/kin/070115/person21.gif" width="113" height="110" onMouseOut="zoomObj.doOut()" onMouseOver="zoomObj.doRun(this,{name : '여기에 제목', image : 'http://static.naver.com/event/kin/070115/person21_l.gif',href : 'http://naver.com',contents : '이곳에 내용'});"></td>
</tr>
</table>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
