注：调试的时候发现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. jq 选择器

    基本选择器 1. id选择器(指定id元素)将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () {    ...

  2. u盘安装centos

    1. 下载centos系统2. 使用UltraISO制作u盘启动.制作方法:http://jingyan.baidu.com/article/a378c960630e61b329283045.html ...

  3. Mysql存储过程总结

    1.     关于MySQL的存储过程 存储过程是数据库存储的一个重要的功能,但是MySQL在5.0以前并不支持存储过程,这使得MySQL在应用上大打折扣.好在MySQL 5.0终于开始已经支持存储过 ...

  4. 夺命雷公狗---DEDECMS----24dedecms让网站头部分离

    我们这里来做一个让网站头部分离的工作,我们先看下index.htm的模版, 这里很明显就是用了一个div包围着而已,那么我们在模版目录下创建一个head.htm,如下所示: 然后我们再将刚才div里面 ...

  5. DataGridView 些许事件测试

    原始设计需求:当单元格内容是空白时,鼠标进入之后,显示一些数据 直观的第一感觉必然是用CellClick,细想,如果用户不用鼠标,直接按Tab键切换单元格呢?又或者,用户直接双击涅~ 主要测试的是:  ...

  6. js数组基础知识链接

    http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930499.html 小案例:   <script language=&quo ...

  7. 在Dll中使用 TFDQuery 的 LoadFromStream 方法注意问题

    今天又遇到一怪事,  FDQuery 在服务器 savestream 传回了客户端. 客户端接收后 loadfromstream 接收都正常.  但当我把客户端封装成 dll 时,loadfromst ...

  8. linux设备驱动归纳总结（三）：2.字符型设备的操作open、close、read、write【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59417.html linux设备驱动归纳总结(三):2.字符型设备的操作open.close.rea ...

  9. 【python cookbook】【字符串与文本】16.以固定的列数重新格式化文本

    问题:重新格式化一些很长的字符串,以指定的列数来显示 解决方案:textwrap模块的fill()方法来实现 # A long string s = "Look into my eyes, ...

  10. jQuery DataTable-JavaScript API

    虽然大多数时候你的Javascript交互将通过使用datatable初始化对象作为描述在使用这个网站的部分,有时,你会发现它有用一些外部控制表.可以使用以下函数从jQuery.dataTable对象 ...