jQuery 点击图片跳转上一张或下一张功能的实现代码

【 tulaoshi.com - Web开发 】

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
script type="text/javascript" src="jquery-1.3.2.js"/script!--包含jQuery库文件--
script type="text/javascript" src="jquery.tooltip.js"/script!--包含jQuery库的tooltip插件文件--
style
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}


/* tooltip的样式 */

#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
/style
/head
body
diva href=""img src="image/wife.jpg" //a/div
/body
/html

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
/*
* Tooltip script
* powered by 淅淅代码雨
*
* written by Wany
*
*
*/
this.tooltip = function(){
var xOffset = 10;//定义x的偏移量
var yOffset = 20;//定义y的偏移量
$("img").mousemove(function(e){
var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//获取当前鼠标相对img的x坐标
var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//获取当前鼠标相对img的y坐标，（以下用不着，可删除）
var tipTitle;//定义提示标题
if(positionX=$(this).width()/2)//当当前鼠标相对x坐标小于图片宽度的一半时执行
{
$('p').remove();//移除p标签
$('a').attr('href','http
//www.google.cn');//修改a标签的href属性以改变链接
tipTitle='谷歌';
}
else
{
$('p').remove();
$('a').attr('href','http
//www.baidu.com');
tipTitle='百度';
}
$("body").append("p id='tooltip'"+tipTitle+"/p");//在body标签里添加这个p标签，实现提示功能
$("#tooltip").css("top",(e.pageY - xOffset) + "px")//为id为tooltip的元素设置css样式
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");//添加动画效果
},
function(){
$("#tooltip").remove();//鼠标移动时移除tooltip，实现提示和鼠标的相对位置不变
});
$("img").mouseout(function(e){
$("#tooltip").remove();//鼠标移出img标签时不再显示tooltip，用remove函数将其移除
});
};
$(document).ready(function(){
$('img').css('border','none');
tooltip();
});