注:调试的时候发现ff下有兼容性问题,把jquery换成4.4版本就没问题了,问题应该在e.offseX上ff不支持此属性,以图片中间宽度为界限,鼠标移动在左边点击跳转到一个链接,鼠标移动右边点击跳转到另一个链接.

完整代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".rootclass").mousemove(function (e) {
var positionX = e.offsetX || e.layerX || 0;
if (positionX <= $(this).width() / 2) { this.style.cursor = 'url("pre.png"),auto';
$(this).attr('title', 'pre');
$(this).parent().attr('href', $(this).attr('left'));
} else {
this.style.cursor = 'url("next.png"),auto';
$(this).attr('title', 'next');
$(this).parent().attr('href', $(this).attr('right'));
}
});
});
</script>
<style type="text/css">
.rootclass {
border: none;
position: relative;
}
</style>
</head>
<body>
<a href="#">
<img src="http://img1.gtimg.com/finance/pics/hv1/161/22/1562/101574821.jpg" class="rootclass" left="baicu.com" right="g.cn" />
</a>
</body>
</html>

  

Jquery实现图片上下一张的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  4. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

  5. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  6. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 超酷的jQuery百叶窗图片滑块实现教程

    原文:超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flas ...

  8. jQuery百叶窗图片滑块

    超酷的jQuery百叶窗图片滑块实现教程   今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flash ...

  9. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

随机推荐

  1. event对象的属性

    事件类型: bubbles:布尔值,表示事件是否通过DOM以冒泡形式触发. 事件发生时,反应当前环境信息的属性: button: 表示(如果有)鼠标所按下的按钮 ctrlKey: 布尔值,表示Ctrl ...

  2. sql case when 速记

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  3. Oracle Savepoint

    1.目的: Use the SAVEPOINT statement to identify a point in a transaction to which you can later roll b ...

  4. 夺命雷公狗---node.js---18之项目的构建在node+express+mongo的博客项目3头尾左侧分离法

    在实际的开发中我们的项目往往都是需要头尾分离开来的,居然是后台管理界面当然也不能错过这么好的这步.. 首先我们将我们要分离的部分代码先剪切出来,如下所示: 将他们都弄出来... 这部分的内容分别对应的 ...

  5. CDC

    CDC中最重要的问题是metastability问题. 加入Synchronizer来进行异步时钟的同步,两级的Sync,第二级仍然会出现亚稳态的概率由MTBF决定. MTBF:mean time b ...

  6. ASP.NET MVC(三)

    ASP.NET Routing 模块的责任是将传入的浏览器请求映射为特有的MVC controller actions. 请求 URL 当我们不使用路由的时候 请求 http://server/app ...

  7. android提示框

    // 对话框 AlertDialog.Builder builder = new Builder(MainActivity.this); builder.setMessage("是否确认删除 ...

  8. OBD 14230 Slow, Addr激活

    const u8 LinkCmd14230[6] = { 0xC2, 0x33, 0xF1, 0x01, 0x00, 0xE7 }; u8 ISO14230ADDR_Check(){          ...

  9. ubuntu安装最新版本的node.js

    下面的方法适用于最新版本的Ubuntu.Ubuntu 12.04 LTS.Ubuntu 12.10.Ubuntu 13.04等版本.它可以帮助开发者在Ubuntu上安装Node.js,无需从头编译安装 ...

  10. Mac OX 隐藏文件夹,文件,应用,磁盘的2种方法 hide finder folder, file, application, volume in 2 ways

    经常需要主目录下隐藏一些文件夹之类的, 第一想到的当然就是:在要隐藏的文件夹前面加『.』(leading dot),这个用法当然可以的了 用习惯了Linux/GNU系统的,基本习惯使用这种办法 但是, ...