Let's take a look at the use method first.
Demo Address http://demo.jb51.net/js/jCutter_jquery/demo.htm
This is written in the HTML file:
Copy Code code as follows:
<div class= "JCutter" >
<div class= "Jcutter-content" >
This is the content of the page after the point opened
</div>
</div>
The call needs to be written like this:
Copy Code code as follows:
$ (document). Ready (function () {
options={
' Speedin ': 600,//The animation speed when the picture enters
' Speedout ': 400,//Picture exit animation speed
' Easein ': ' easeoutbounce ',//The animation effect when the picture enters, this effect needs easing library
' Easeout ': '//The animation effect when the picture exits
}
$ ('. JCutter '). JCutter (options);
})
Of course, you have to refer to this plugin. Let's explain how to write this plugin.
One, the jquery plug-in method of writing
To write a jquery plugin, you first need some necessary structure, as follows:
Copy Code code 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 plugin is generally the case.
The first thing to do is to write a closure form that does not pollute the namespace and then writes according to the interface provided by jquery, where the jcutter can be changed to the name of your own plug-in. $.extend is a very interesting function, he will merge the first and second parameters, for the two parameters appear in the value of the latter in place of the former.
Ii. commencement of the preparation
In this example, because we want to use the selector, we make some changes, and the structure changes to look like the following.
Copy Code code 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 so that we are easier to operate. Through the above structure we can clearly see the logic of the program, Init () used to do some initialization tasks, and then use Generate () to generate the required structure, and finally use Cutter () to complete the animation and event effects.
Third, initialization of the program
The main thing to initialize is some parameters, then find the picture that needs to be modified, and finally render. Are some of the more simple operations.
Copy Code code 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 ();
};
IV. structure needed to generate
The principle of this effect is: we copy the picture to four layers inside, and then the four layers relative positioning, and then put the figure together, so that the animation effect can be achieved.
Copy Code code 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.imga[i].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.imga[1].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[3].css ({
' Right ': ' 0px ',
' Bottom ': ' 0px ',
' Background-position ': ' + w + ' px ' + '-' + H + ' px '
});
That.img.remove ();
};
The code here is also relatively simple, first get the width and height of the outer layer, then calculate, and then generate four layers, to four layers to write the corresponding position code, it should be noted that the outer layer of the position attribute to be set to relative, or the inside layer can not be accurately positioned. In fact, we can write directly to the corresponding HTML code, but in order to perform clearly, we adopted a more clear wording, Sir into a Div, and then assign him some CSS properties.
Add animation effect, register event handler
Completed the structure of the task, the next step is to add animation effect to him, we just need to move the four layers in the mouse when the outside of the layer, and then the mouse away when the reset can be, it is very simple to read, look at the code:
Copy Code code 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 purpose of the Stop () function is to terminate the animation if the last animation is still in progress when the event starts again, which is more natural. That.easein and That.easeout parameters are used to set the mode of animation, the default jquery library has only two simple linear libraries, you can download the Jquery.easing library to add more gorgeous effects.
This completes the plugin's writing, complete the code as follows:
Copy Code code 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.imga[i].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.imga[1].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[3].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 effect, logic is very clear, the code is also simple, is practicing good dongdong.
Package Download Address http://www.jb51.net/jiaoben/26031.html
