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
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn