Jquery-based image hover plug-in

Let's take a look at the usage.
Demo address http://demo.jb51.net/js/jCutter_jquery/demo.htm
Write in the HTML file as follows: CopyCode The Code is as follows: <Div class = "jcutter">

<Div class = "jcutter-content">
This is the content of the opened page.
</Div>
</Div>

You need to write the code as follows:Copy codeThe Code is as follows: $ (document). Ready (function (){
Options = {
'Speedin': 600, // animation speed when the image enters
'Splitout': 400, // specifies the animation speed when the image exits.
'Easein': 'easeoutbounce ', // specifies the animation effect when the image enters. The easing library is required for this effect.
'Easeout': ''// specifies the animation effect when the image exits.
}
$ ('. Jcutter'). jcutter (options );
})

Of course, you must reference this plug-in. The following describes how to compile the plug-in.
I. jquery plug-in Compilation Method
To write a jquery plug-in, you first need some necessary structures, as shown below:Copy codeThe Code is as follows: (function ($ ){
$. FN. jcutter = function (o ){
O = $. Extend ({
Speedin: 300,
Speedout: 300,
Easein :'',
Easeout :''
}, O | {});
};
}) (Jquery );

this structure is somewhat different from our final results, but the structure of the jquery plug-in is basically the same.
first, you need to write a closure form without interrupting the namespace, and then write it according to the interface provided by jquery. Here, the jcutter can be changed to your own plug-in name. $. Extend is a very interesting function. It combines the first and second parameters. For values in both parameters, replace the former with the latter.
2. Start to compile
in this example, because the selector is used, we make some modifications and change the structure to the following. copy Code the code is as follows: (function ($) {
$. 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) {
return this. each (function (I) {
$. jcutter (this, O);
});
};
}) (jquery);

$. The meaning of jcutter is to add a class to jquery, which makes it easier to operate. We can see clearly through the above structureProgramLogic, INIT () is used for initialization tasks, generate () is used to generate the required structure, and cutter () is used to complete the animation and event effect.
3. initialization program
The main parameters to be initialized are some parameters. Then, find the image to be modified and render it. Are some relatively simple operations.Copy codeThe Code is as follows: That. init = function (){
That. node = $ (node );
That. IMG = That. node. Find ('img ');
That. speedin = O. speedin;
That. speedout = O. speedout;
That. easein = O. easein;
That. easeout = O. easeout;
That. Generate ();
That. Cutter ();
};

4. generate the required structure
The principle of this effect is: copy the image to the four layers, locate the four layers, and then combine the image to achieve the animation effect. Copy code The Code is as follows: 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.imgapolici2.16.css ({
'Position': 'absolute ',
'Z-Index': '2 ',
'Width': W,
'Height': H,
'Background': 'url ("'+ that. IMG. ATTR (" src ") +'") No-repeat'
});
$ (That. node). append (that. imga [I]);
}
That.imga%0%.css ({
'Left': '0px ',
'Top': '0px'
});
That.imga1_12.16.css ({
'Right': '0px ',
'Top': '0px ',
'Background-position': '-' + W + 'px '+ '0px'
});
That.imga%2%.css ({
'Left': '0px ',
'Bottom': '0px ',
'Background-position': '0px '+'-'+ H + 'px'
});
That.imga%32.16.css ({
'Right': '0px ',
'Bottom': '0px ',
'Background-position': '-' + W + 'px '+'-'+ H + 'px'
});
That. IMG. Remove ();
};

The code here is also relatively simple. First, we get the width and height of the outer layer, calculate the code, and then generate four layers to write the corresponding location code to the four layers. Note that, the position attribute of the outer layer must be set to relative, or the layer inside cannot be accurately located. In fact, the corresponding HTML code can be written directly here, but in order to be clear, we adopt a clear writing method, which is a div and then assigned some CSS attributes to it.
5. Add an animation effect and register an event handler.
After the structure task is completed, the next step is to add the animation effect to it. We only need to remove the four layers from the outer layer when the mouse passes, when the mouse leaves, you can reset it again. It is also very simple to write. Check the Code: Copy code The Code is as follows: 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,
'Bottom ':'-'+ H
}, That. speedout, that. easeout );
That. imga [3]. Stop (). animate ({
'Right': '-' + W,
'Bottom ':'-'+ H
}, That. speedout, that. easeout );
}, Function (){
That. imga [0]. Stop (). animate ({
'Left': 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 ({
'Left': 0,
'Bottom ': 0
}, That. speedin, that. easein );
That. imga [3]. Stop (). animate ({
'Right': 0,
'Bottom ': 0
}, That. speedin, that. easein );
})
};

The. Stop () function is used to terminate an animation if the last animation is still in progress when the event starts again. The effect is more natural. That. easein and that. the easeout parameter is used to set the animation mode. The default jquery library has only two simple linear libraries. You can download jquery. easing library to add more brilliant results.
This completes the compilation of this plug-in. The complete code is as follows: Copy code The Code is as follows: (function ($ ){
$. Jcutter = function (node, O ){
O = $. Extend ({
Speedin: 300,
Speedout: 300,
Easein :'',
Easeout :''
}, O | {});
VaR that = this;
That. init = function (){
That. node = $ (node );
That. IMG = That. node. Find ('img ');
That. speedin = O. speedin;
That. speedout = O. speedout;
That. easein = O. easein;
That. easeout = O. easeout;
That. Generate ();
That. Cutter ();
};
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.imgapolici2.16.css ({
'Position': 'absolute ',
'Z-Index': '2 ',
'Width': W,
'Height': H,
'Background': 'url ("'+ that. IMG. ATTR (" src ") +'") No-repeat'
});
$ (That. node). append (that. imga [I]);
}
That.imga%0%.css ({
'Left': '0px ',
'Top': '0px'
});
That.imga1_12.16.css ({
'Right': '0px ',
'Top': '0px ',
'Background-position': '-' + W + 'px '+ '0px'
});
That.imga%2%.css ({
'Left': '0px ',
'Bottom': '0px ',
'Background-position': '0px '+'-'+ H + 'px'
});
That.imga%32.16.css ({
'Right': '0px ',
'Bottom': '0px ',
'Background-position': '-' + 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,
'Bottom ':'-'+ H
}, That. speedout, that. easeout );
That. imga [3]. Stop (). animate ({
'Right': '-' + W,
'Bottom ':'-'+ H
}, That. speedout, that. easeout );
}, Function (){
That. imga [0]. Stop (). animate ({
'Left': 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 ({
'Left': 0,
'Bottom ': 0
}, That. speedin, that. easein );
That. imga [3]. Stop (). animate ({
'Right': 0,
'Bottom ': 0
}, That. speedin, that. easein );
})
};
That. INIT ();
};
$. FN. jcutter = function (o ){
Return this. Each (function (I ){
$. Jcutter (this, O );
});
};
}) (Jquery );

Very simple and interesting results, clear logic, and simple code.
Packaging http://www.jb51.net/jiaoben/26031.html