Some time ago I wrote an article about the effect of the next link on the image. Later I saw the jquery plug-in encapsulation, which was itchy in my hand. I used this example as ex.
Encapsulated JS source code:
Copy codeThe Code is as follows:
/*
* Imageupdown 1.0
* Copyright (c) 2009
* Date: 2010-04-20
* Move the image to the next special effect
*/
(Function ($ ){
$. Fn. imageupdown = function (options ){
Var defaults = {
UpCursor: "pre. cur ",
UpTitle: "click to view the previous ",
UpUrl: $ (this). attr ('left '),
DownCursor: "next. cur ",
DownTitle: "click to view the next one ",
DownUrl: $ (this). attr ('right ')
}
Var options = $. extend (defaults, options );
This. each (function (){
Var thisImage = $ (this );
$ (ThisImage). bind ("mousemove", function (e ){
Var positionX = e. originalEvent. x | e. originalEvent. layerX | 0;
If (positionX <= $ (this). width ()/2 ){
This. style. cursor = 'url ('+ options. upCursor +'), auto ';
$ (This). attr ('title', ''+ options. upTitle + '');
$ (This). parent (). attr ('href ', ''+ options. upUrl + '');
} Else {
This. style. cursor = ''+ options. downCursor + '';
$ (This). attr ('title', ''+ options. downTitle + '');
$ (This). parent (). attr ('href ', ''+ options. downUrl + '');
}
});
});
};
}) (JQuery );
Html page call method:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Rootclass"). imageupdown ();
});
</Script>
There may be doubts:
(1) What does function (e) e mean?
It should be the corresponding event.
$ (). Click (function (e) {}); // here e is the click Event
$ (). Focus (function (e) {}); // here e is the focus event