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

jquery picture previous next link effect (continuation)_jquery

WBOY
Release: 2016-05-16 18:28:59
Original
1209 people have browsed it

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
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template