jquery_jquery를 기반으로 한 그림 호버 플러그인

$(document).ready(function(){
options={
'speedIn':600, //그림이 들어갈 때 애니메이션 속도
'speedOut ':400, //그림이 종료될 때의 애니메이션 Speed
'easeIn':'easeOutBounce', //그림이 들어갈 때의 애니메이션 효과 이 효과에는 easing 라이브러리가 필요합니다
'easeOut':'' //애니메이션 그림이 종료될 때 효과
}
$('.jcutter').jCutter(options)
})

(function($){
$.fn.jCutter = function(o){
o = $.extend({
speedIn: 300,
speedOut: 300,
easeIn: '',
easeOut: ''
}, o || {}); };
})(jQuery );


이 구조는 최종 결과와 약간 다르지만 일반적으로 jQuery 플러그인의 구조는 다음과 같습니다.

$.jCutter = function(node, o){
o = $.extend({
speedIn: 300,
speedOut: 300,
easeIn: '',
easeOut: ''
}, o || {});
var that = this;
that.init = function(){
}
that.generate = function(){
};
that.cutter = function(){
};
that.init()
};
$.fn.jCutter = function(o){
this.each(function(i){
$.jCutter(this,o);
})
}
})(jQuery); $.jCutter 좀 더 편리하게 작업할 수 있도록 jQuery에 클래스를 추가한다는 의미입니다. 위의 구조를 통해 프로그램의 논리를 명확하게 볼 수 있습니다. init()는 일부 초기화 작업을 수행하는 데 사용되고, generate()는 필요한 구조를 생성하는 데 사용되며, 마지막으로 Cutter()는 애니메이션과 이벤트를 완료하는 데 사용됩니다. 효과.
3. 초기화 절차
초기화해야 할 것은 주로 일부 매개 변수이며, 수정해야 할 그림을 찾아서 최종적으로 렌더링합니다. 그것들은 모두 비교적 간단한 작업입니다.

that.speedOut; ;
that.easeIn = o.easeIn;
that.generate()

}; 🎜>
4. 필요한 구조 생성
이 효과의 원리는 그림을 4개의 레이어로 복사한 다음 4개의 레이어를 상대적으로 배치한 다음 그림을 합치는 것입니다. 달성 .




코드 복사

that.generate = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2;
that.imga = [];
for (var i = 0; i < 4; i ) {
that.imga[i] = document.createElement('div');
that.imga[i] = $(that.imga[i]);
that.imga[i].css({
'위치': '절대',
'z-index': '2',
'너비': w,
' 높이': h,
'배경': 'url("' that.img.attr("src") '") 반복 없음'
});
$(that.node).append(that.imga[i]);
}
that.imga[0].css({
'왼쪽': '0px',
'top': '0px'
});
that.imga[1].css({
'right': '0px',
'top': '0px',
'Background-position': '-' w 'px ' ' 0px'
});
that.imga[2].css({
'왼쪽': '0px',
'하단': '0px',
'배경 위치': '0px' ' -' h 'px'
});
that.imga[3].css({
'오른쪽': '0px',
'하단': '0px',
'배경 위치': '-' w 'px ' '-' h 'px'
});
that.img.remove();
};

that.cutter = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2;
that.node.hover(function(){
that.imga[0].stop().animate({
'left': '-' w,
'top': ' -' h
}, that.speedOut, that.easeOut)
that.imga[1].stop().animate({
'right': '-' w,
' top': '-' h
}, that.speedOut, that.easeOut)
that.imga[2].stop().animate({
'left': '-' w,
'하단': '-' h
}, that.speedOut, that.easeOut)
that.imga[3].stop().animate({
'right': ' -' w,
'bottom': '-' h
}, that.speedOut, that.easeOut)
}, function(){
that.imga[0].stop( ).animate({
'왼쪽': 0,
'top': 0
}, that.speedIn, that.easeIn)
that.imga[1].stop(). animate({
'right': 0,
'top': 0
}, that.speedIn, that.easeIn)
that.imga[2].stop().animate( {
'왼쪽': 0,
'하단': 0
}, that.speedIn, that.easeIn)
that.imga[3].stop().animate({
'오른쪽': 0,
'하단': 0
}, that.speedIn, that.easeIn)
})
};

(함수($){
$.jCutter = 함수(노드, o){
o = $.extend({
speedIn: 300,
speedOut: 300,
easeIn: '',
easeOut: ''
}, o || {})
var that = this
that.init = function(){
that .node = $(노드);
that.img = that.node.find('img');
that.speedIn = o.speedIn;
that.speedOut
that.easeIn = o.easeIn;
that.easeOut;
that.generate()
that.cutter()
that.generate = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2
that.imga = []
; (var i = 0; i < 4; i ) {
that.imga[i] = document.createElement('div')
that.imga[i] = $(that.imga[i ]);
that.imga[i].css({
'위치': '절대',
'z-index': '2',
'너비': w,
'높이': h,
'배경': 'url("' that.img.attr("src") '") 반복 없음'
})
$(that. node).append(that.imga[i]);
}
that.imga[0].css({
'왼쪽': '0px',
'top': '0px '
})
that.imga[1].css({
'right': '0px',
'top': '0px',
'배경 위치' : '-' w 'px' ' 0px'
});
that.imga[2].css({
'왼쪽': '0px',
'하단': '0px',
'배경 위치': '0px' ' -' h 'px'
});
that.imga[3].css({
'오른쪽': '0px',
'하단': '0px',
'배경 위치': '-' w 'px ' '-' h 'px'
});
that.img.remove();
};
that.cutter = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2;
that.node.hover(function(){
that.imga[0].stop().animate({
'left': '-' w,
'top': ' -' h
}, that.speedOut, that.easeOut)
that.imga[1].stop().animate({
'right': '-' w,
' top': '-' h
}, that.speedOut, that.easeOut)
that.imga[2].stop().animate({
'left': '-' w,
'하단': '-' h
}, that.speedOut, that.easeOut)
that.imga[3].stop().animate({
'right': ' -' w,
'bottom': '-' h
}, that.speedOut, that.easeOut)
}, function(){
that.imga[0].stop( ).animate({
'왼쪽': 0,
'top': 0
}, that.speedIn, that.easeIn)
that.imga[1].stop(). animate({
'right': 0,
'top': 0
}, that.speedIn, that.easeIn)
that.imga[2].stop().animate( {
'왼쪽': 0,
'하단': 0
}, that.speedIn, that.easeIn)
that.imga[3].stop().animate({
'오른쪽': 0,
'하단': 0
}, that.speedIn, that.easeIn)
})
};
that.init();
};
$.fn.jCutter = function(o){
return this.each(function(i){
$.jCutter(this,o);
});
};
})(jQuery);