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

代码如下:

<!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();
});

赞 (0)

相关推荐

  • jQuery实现延迟跳转的方法

    本文实例讲述了jQuery实现延迟跳转的方法.分享给大家供大家参考.具体实现方法如下: function delayer(){ window.location = "http://www.jb51.net/"; } jQuery(document).ready(function(){ setTimeout('delayer()', 5000); //这里实现延迟5秒跳转 }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

    jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

    对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转! 效果如图:  而所封装的代码如下: 复制代码 代码如下: // boxy对话框扩展 var Boxy_Extensions = { options: { title: '艺吧提示', closeText: 'x' }, //弹出后N秒后隐藏 alertDelayFun: function

  • jQuery实现页面内锚点平滑跳转特效的方法总结

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实

  • jQuery实现倒计时跳转的例子

    实现代码: 复制代码 代码如下: <html>   <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    <title>跳转页面</title>      <script src="jquery.js"></script>    <script la

  • JQuery.get提交页面不跳转的解决方法

    代码如下: 复制代码 代码如下: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"     CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID=&quo

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

    复制代码 代码如下: <!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=&qu

  • jquery.uploadView 实现图片预览上传功能

    jquery.uploadView 实现图片预览上传功能

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src=&quo

  • C# 文件上传下载(Excel导入,多线程下载)功能的实现代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: //打开Excel文件,转换为DataTable DataTable dtExcel; private void OpenFile() { OpenFileDialog dialog = new OpenFileDialog(); dialog.Filter = "Microsoft Excel files(*.xls)|*.xls;*.xlsx"; //筛选打开文件类型 :图片 *.jpg|*.jpg|*.bmp|*.bmp ;&q

  • Vue实现上拉加载下一页效果的示例代码

    Vue实现上拉加载下一页效果的示例代码

    之前从来没有单独的做过手机端的网页.当然,之前我也没有独立的从切图到写代码交互做过前端的页面. 这里边的分页还是和响应电脑端的数字分页.但是,其实独立做一个手机端的网站,而不是响应式的网站的时候,这种数字分页看起来可能是不太好. 手机端网站嘛,还是仿照着APP或者是微信小程序那种上拉触底分页比较好.但是,这个玩意怎么实现呢? 第一种想法,监听滚动条,滚动条滚动到页面底部,触发方法,请求接口加载下一页的数据.嗯,应该是可行的,我们来尝试一下: 监听滚动条所在位置的方法如下: /** * @name

  • Android自定义listview布局实现上拉加载下拉刷新功能

    Android自定义listview布局实现上拉加载下拉刷新功能

    listview实现上拉加载以及下拉刷新的方式有很多.下面是我写的一种自定义的布局,复用性也比较的强.首先就是继承的listview的自定义view.   AutoListView.Java: package com.example.mic.testdemo.view; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.os.Bu

  • Vue uni-app框架实现上拉加载下拉刷新功能

    目录 实现上拉加载更多 优化 实现下拉刷新 实现上拉加载更多 打开项目根目录中的pages.json配置文件,为subPackages分包中的商品goods_list页面配置上拉触底的距离: "subPackages": [ { "root": "subpkg", "pages": [ { "path": "goods_detail/goods_detail", "style&

  • Vue vant-ui框架实现上拉加载下拉刷新功能

    目录 知识点速记 基本用法 下拉刷新 代码实现 1.页面布局 2.样式 3.方法 下拉刷新效果: 知识点速记 基本用法 List通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true.此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可.若数据已全部加载完毕,则直接将finished设置成true即可. 下拉刷新 List 组件可以与PullRefresh组件结合使用,实现下拉刷新的效果.

  • Android实现让图片在屏幕上任意移动的方法(拖拽功能)

    本文实例讲述了Android实现让图片在屏幕上任意移动的方法.分享给大家供大家参考,具体如下: public class DragExampleActivity extends Activity { Bitmap mBitmap; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst

  • Android通过XListView实现上拉加载下拉刷新功能

    本文实例为大家分享了XListView实现上拉加载下拉刷新的具体代码,供大家参考,具体内容如下 ## 导入XListVIew第三方库文件.通过LinkedList将刷新数据插入到集合头部,将加载的数据放入集合尾部 ## private Context context; private View view; private String path; private XListView xlv; private LinkedList<Data> listData; private Handler

  • iOS实现scrollview上拉显示Navbar下拉隐藏功能详解

    iOS实现scrollview上拉显示Navbar下拉隐藏功能详解

    本文主要介绍的是关于iOS中scrollview上拉显示Navbar下拉隐藏的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 动画效果: 关于下拉隐藏Nabbar,上拉显示,有三种方式:推崇第一种,但是做的还是没简书.知乎那样流畅,第一种是对navbar做了平移,第二种,第三种都是隐藏.. 方法如下: 第一种,和第二种处理时机一样,但是效果更好,并没有处理Navbar 的隐藏. -(void)scrollViewWillBeginDragging:(UIScrollView *)scr

随机推荐