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

먼저 사용법을 살펴보겠습니다.
데모 주소http://demo.jb51.net/js/jCutter_jquery/demo.htm
HTML 파일 내용은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

클릭 후의 내용입니다

전화하려면 다음과 같이 작성해야 합니다.

코드 복사 코드는 다음과 같습니다. 다음:

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

물론 이 플러그인을 인용해야 합니다. 이 플러그인을 작성하는 방법을 설명하겠습니다.
1. jQuery 플러그인 작성 방법
jQuery 플러그인을 작성하려면 먼저 아래와 같은 필수 구조가 필요합니다.

코드 복사 코드는 다음과 같습니다.

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


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

먼저 네임스페이스를 오염시키지 않고 클로저 형식으로 작성한 다음 jQuery에서 제공하는 인터페이스에 따라 작성합니다. 여기서 jCutter는 자신이 만든 플러그인 이름으로 변경할 수 있습니다. $.extend는 첫 번째 매개변수와 두 번째 매개변수를 결합하는 매우 흥미로운 함수입니다. 두 매개변수에 나타나는 값의 경우 후자가 전자를 대체합니다.
2. 작성 시작
이 예에서는 선택기를 사용해야 하므로 일부 수정하고 구조를 다음과 같이 변경합니다.

코드 복사 코드는 다음과 같습니다.

(함수($){

$.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.init = function(){ that .node = $(node); that.img = that.node.find('img')

that.speedIn = o.speedIn

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();
};

这里的代码也比较简单, 首先得到外审层titude and高titude,然后计算,再生成 4个层,给四个层写入应的位置代码，需要注의미있는是， 외부 위치는 상대적인 위치에 있으며, 要么么面的层就无法准确定位了.晰，我们采用了比较明朗的写法，先生成一个div，然后赋给他一些css属性.
5、添加动画效果，注册事件处理程序
完成了结构的任务，下一步就是给他添加动画效果了，我们只需要将这4个图层在鼠标经过的时候移开的时候再复位就可以了，写起来也是不常的简单，看代码：

제조대码 代码如下:

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)
})
};

.stop()函数에 맞는 작업을 수행하는 도구는 다음과 같습니다.更加自然一些。that.easeIn과 that .easeOut은 jQuery를 사용하여 더 많은 정보를 제공합니다.
这样就完成了这个插件的编写，完整的代码如下：

复主代码 代码如下:

(함수($){
$.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);

很简单有趣的效果，逻辑很清楚，代码也简单，是练手的好东东。
打包下载地址
http://www.jb51.net /jiaoben /26031.html

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.