Jquery实现图片上下一张
注:调试的时候发现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实现图片上下一张的更多相关文章
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
- 20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 超酷的jQuery百叶窗图片滑块实现教程
原文:超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flas ...
- jQuery百叶窗图片滑块
超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flash ...
- 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
随机推荐
- PHP与jquery前后台交互的小程序
1 <!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <scrip ...
- redis数据库使用测试
注:java spring data redis内置了几种redis序列化机制.JdkSerializationRedisSerializer最高效.有关序列化更详细的介绍-http://www.my ...
- 更改EBS APPS 密码流程
更改EBS APPS 密码流程 (更改完后重启APP 和DB)2008-1-4 在EBS11.5.10.2环境应用成功! 参考metalink Note:160337.1 How To Manual ...
- 夺命雷公狗---node.js---8url模块和util模块
我们先到手册上看看: 上面很明显就写着返回一个对象. 再来看看util模块, 废话不哦多说,先上一点代码: /** * Created by leigood on 2016/8/13. */ var ...
- json转化为java实体
import net.sf.json.JSONObject; Map<String, Object> classMap = new HashMap<String, Object> ...
- linux更新系统之后,删除多余的开机启动项
实验环境是centos7,采用uefi的引导方式,启动管理软件是grub2 1. 进入 /boot 目录,应该可以发现许多文件的文件名是以 vmlinuz 开头,后面跟着版本信息,这些就是内核.我们要 ...
- 【python】python环境的安装与配置
安装配置pip / easy_install / virtualenv 在ubuntu 10.10之后的版本中,要这样安装 sudo apt-get install python-pip python ...
- springmvc简述
Spring Web MVC 是一种基于 Java 的实现了 Web MVC 设计模式的请求驱动类型的轻量级 Web 框架,即使用了 MVC 架构模式的思想,将 web 层进行职责解耦,基于请求驱动指 ...
- nodejs和mongodb实践
首先,当然是都安装了nodejs 和mongodb了.这必须是前提条件. 现在我们要用nodejs连接mongodb数据库了.我这里只是一个非常非常简单是实践,初学嘛.更深入的学习之后,我会仔细写笔记 ...
- dom4j读写XML文件
XML文件格式: <?xml version="1.0" encoding="UTF-8"?> <company> <employ ...