Home > Web Front-end > JS Tutorial > jQuery code to realize the function of clicking on the picture to jump to the previous or next picture_jquery

jQuery code to realize the function of clicking on the picture to jump to the previous or next picture_jquery

WBOY
Release: 2016-05-16 18:32:35
Original
1749 people have browsed it
Copy code The code is as follows:















Copy code The code is as follows:

/*
* Tooltip script
* powered by 淅淅码雨
*
* written by Wany
*
*
*/
this.tooltip = function(){
var xOffset = 10;// Define the offset of x
var yOffset = 20; //Define the offset of y
$("img").mousemove(function(e){
var positionX=e.originalEvent.x -$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//Get the x coordinate of the current mouse relative to img
var positionY=e .originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//Get the y coordinate of the current mouse relative to img, (below If not needed, you can delete it)
var tipTitle;//Define the tip title
if(positionX<=$(this).width()/2)//When the current relative x coordinate of the mouse is less than half the width of the picture Execute
{
$('p').remove();//Remove the p tag
$('a').attr('href','http
//www. google.cn');//Modify the href attribute of the a tag to change the link
tipTitle='Google';
}
else
{
$('p').remove( );
$('a').attr('href','http
//www.baidu.com');
tipTitle='Baidu';
}
$ ("body").append("

" tipTitle "

");//Add this p tag to the body tag to implement the prompt function
$(" #tooltip").css("top",(e.pageY - xOffset) "px")//Set css style for the element with id tooltip
.css("left",(e.pageX yOffset) " px")
.fadeIn("fast");//Add animation effect
},
function(){
$("#tooltip").remove();//Mouse movement Remove the tooltip when the tooltip is removed, so that the relative position of the tip and the mouse remains unchanged
});
$("img").mouseout(function(e){
$("#tooltip").remove( );//The tooltip will no longer be displayed when the mouse moves out of the img tag, use the remove function to remove it
});
};
$(document).ready(function(){
$ ('img').css('border','none');
tooltip();
});
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