Some time ago, I wrote an article about the picture previous and next link effect. Later I saw the jquery plug-in package, and my hands were itchy. I used this example as an ex.
Encapsulated JS source code:
/*
* imageupdown 1.0
* Copyright (c) 2009
* Date: 2010-04-20
* Picture move previous and next special effects
*/
(function($){
$.fn.imageupdown = function(options){
var defaults = {
upCursor:"pre.cur",
upTitle:"Click to view the previous image",
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 calling method:
You may have questions :
(1) function(e) What does e mean?
should be the corresponding event.
$().click(function(e) {}); // e here is the click event
$().focus(function(e) {}); // e here is the focus event