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 相关文章推荐
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 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数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python实现简单五子棋游戏
2019/06/18 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
Python的collections模块真的很好用
2021/03/01 Python
大学生标准推荐信范文
2013/11/25 职场文书
英语简历自我评价
2014/01/26 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
幼师辞职信范文
2015/02/27 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript