注：调试的时候发现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. HDU 4063 Aircraft（计算几何）（The 36th ACM/ICPC Asia Regional Fuzhou Site —— Online Contest）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4063 Description You are playing a flying game. In th ...

  2. Demo12SimpleAdapter

    /Users/alamps/AndroidStudioProjects/Demo12SimpleAdapter/Demo12SimpleAdapter/src/main/res/layout/data ...

  3. 1029 C语言文法

    program    -> external_declaration | program external_declaration <程序> ->  <外部声明> ...

  4. spark使用Hive表操作

    spark Hive表操作 之前很长一段时间是通过hiveServer操作Hive表的,一旦hiveServer宕掉就无法进行操作. 比如说一个修改表分区的操作 一.使用HiveServer的方式 v ...

  5. 夺命雷公狗—angularjs—14—$location的作用

    废话不多说看下,我们直接来走代码看下效果如何 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 夺命雷公狗---DEDECMS----22dedecms让A标签进入对应的内容页

    我们的模版里的超链接都是写死的,这都是不符合实际网站的需求的,我们要将他让他边活的,而并非死的.. 我们首先要将前端给我们的内容页面的模版放到目标目录里面,但是我们的内容页的模版名叫啥呢?我们可以来查 ...

  7. [OrangePi] Backup internal EMMC to SD Card

    Boot your Orange PI board from EMMC without SD Card inserted login insert your SD Card Run: sudo ins ...

  8. RMQ（非log2储存方法）

    2016-03-31 RMQ 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 长度为n的数列A,以及q个询问,每次询问一段区间 ...

  9. Openstack的的nova list命令

    nova list用于在shell交互模式下查看当前用户存在的实例数目,但是这里仍然要注意的地方: 没有参数的nova list [root@node-5 newstest-master]# nova ...

  10. 《HTML5高级程序设计》知识点概要（不涉及详细语法）

    不断更新. 说明:主要记录html5中的一些注意点或知识点,尽量不涉及具体语法信息. 一.CANVAS: 检测: try{ document.createElement("canvas&qu ...