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


Posted in Javascript onMarch 12, 2010
<!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> 
<div><a href="" class="tooltip"><img src="image/wife.jpg" /></a></div> 
</body> 
</html>
/* 
* 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(); 
});
Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
javascript的函数作用域
Nov 12 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 #Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 #Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 #Javascript
jquery 简单的进度条实现代码
Mar 11 #Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 #Javascript
Javascript 入门基础学习
Mar 10 #Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 #Javascript
You might like
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP类型约束用法示例
2016/09/28 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
分析javascript原型及原型链
2018/03/18 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
使用python模拟高斯分布例子
2019/12/09 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
区域销售经理职责
2013/12/22 职场文书
考察现实表现材料
2014/05/19 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
Python Parser的用法
2021/05/12 Python