注:调试的时候发现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. 侧菜单栏的实现SlidingPaneLayout

    SlidingPaneLayout分为两部分,上面的 左划出部分和没划出的时候 <?xml version="1.0" encoding="utf-8"? ...

  2. struts_22_xwork校验器列表使用说明

    系统提供的校验器列表如下: required (必填校验器,要求field的值不能为null) requiredstring (必填字符串校验器,要求field的值不能为null,并且长度大于0,默认 ...

  3. JQuery获取和设置Select选项常用方法总结

    1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&quo ...

  4. zw版【转发·台湾nvp系列Delphi例程】HALCON AffineTransRegion

    zw版[转发·台湾nvp系列Delphi例程]HALCON AffineTransRegion unit Unit1;interfaceuses Windows, Messages, SysUtils ...

  5. 「ruby」使用rmagick处理图像

    安装rmagick gem A new release 2.13.2 of RMagick is now available on github as well as rubygems. This r ...

  6. 【rails3教材】博客构建过程

    构建rails项目--blog $ rails new blog --skip-bundle $ cd blog $ bundle --local $ bundle install #安装需要的包 $ ...

  7. 【linux】xx is not in the sudoers file 解决办法

    原帖地址:http://blog.sina.com.cn/s/blog_4ef045ab0100j59t.html 我用的是redhat5.4,在一般用户下执行sudo命令提示llhtiger is ...

  8. 【cruch bang】中切换成左手鼠标

    在“右键”菜单->settings->Edit autostart启动的geany编辑器中,最后加内容: xmodmap -e 'pointer = 3 2 1'

  9. 六、Java基础---------equals 与 ==深入讲解

    在我们写程序时经常会去比较两个变量是否相等,一般我们有两种方式去比较:equals与==,但是很多情况是不明就里,最后得出错误的结论.本文详解了equals与==. Java程序中测试两个变量是否的两 ...

  10. 不允许调用库函数,也不允许使用任何全局或局部变量编写strlen函数

    不允许调用库函数,也不允许使用任何全局或局部变量编写strlen函数. 这是一道面试题,可以使用递归的方式解答,答案如下: #include <stdio.h> int mylen(cha ...