Home >Web Front-end >JS Tutorial >jquery picture previous next link effect (continuation)_jquery

jquery picture previous next link effect (continuation)_jquery

WBOY
WBOYOriginal
2016-05-16 18:28:591207browse

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:

Copy code The code is as follows:

/*
* 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:
Copy code The code is as follows:



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