注：调试的时候发现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. jQuery中处理事件冒泡的方法和取消后续内容的方法

    一:事件冒泡的意思是:一个大的容器已经设置了事件,如果这个容器里还包容着一个小的容器也设置了自己的事件,那么因为小容器是在大容器里面的,触发小容器的事件同时也等于触发了大容器的事件,有时这并不是我们想 ...

  2. cannot modify header information 关于实现widget页面跳转的问题

    查找网上解决此问题的方法多是一样的,不过今天又遇到了这样的问题.试过之后发现可行: 在C盘的WINDOWS或者你的PHP文件夹中找到php.ini 这个配置文件,然后查找一项:output_buffe ...

  3. css3实现条纹背景

    <!DOCTYPE HTML><html><head><meta charset='utf-8'/><meta forua="true& ...

  4. mongo自带测试

    benchrun > res = benchRun({ ops:[{ ns:"test.foo", op:"insert", doc:{y:{,]}} } ...

  5. POJ - 2041Unreliable Message

    这里的算法非常简单,就是“模拟”,注意编写每个传令官的算法时先分开测试,放在一起就会混淆. POJ - 2041Unreliable Message Time Limit: 1000MS Memory ...

  6. 关于陈冰、陈良乔以及《我的第一本C++书》【转】

    出处:如何在淘宝上卖出 600 本自己写的 C++ 入门书? 陈冰:<我的第一本C++书> 策划编辑,现为图灵公司副总编,<C程序设计伴侣>策划编辑 陈良乔:<我的第一本 ...

  7. NOIP200503采药

                          NOIP200503采药 [问题描述] 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质, ...

  8. 三层架构与MVC的PK--ASP.NET MVC图解（一）

  9. TI CC2541的串口输出.

    http://blog.csdn.net/feilusia/article/details/47431659 基本上看上面这个博客的. 重点是: 1. 关闭流控, 在npi.h里面, 将 #defin ...

  10. MyBatis的Dao层注入SqlSession

    有点坑爹,以前没用过Mybatis,最近才用,而且一直用Mybatis推荐的接口映射的方式,但是今天有人告诉我接口方式用得少,大多还是采用从配置文件里面读sql的方式,当然接口也是类似的,都是利用ma ...