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图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
随机推荐
- 从C#的Singleton设计模式
近来,我在学习如何在C#语言中使用设计模式中读到一些资料,其中有关Singleton设计模式引起了我的注意. 学过设计模式的开发者都知道Singleton模式.我想简要地解释一下这个设计模式是为那些尚 ...
- Windows服务安装异常:System.Security.SecurityException: 未找到源,但未能搜索某些或全部事件日志。不可 访问的日志: Security
Windows服务安装异常:System.Security.SecurityException: 未找到源,但未能搜索某些或全部事件日志.不可 访问的日志: Security 2种方法处理: 一.右键 ...
- Junit单元测试-环境配置
JUnit是Java单元测试框架,已经在Eclipse中默认安装.目前主流的有JUnit3和JUnit4.JUnit3中,测试用例需要继承TestCase类.JUnit4中,测试用例无需继承TestC ...
- 夺命雷公狗---DEDECMS----4快速入门之栏目页报错之快速解决
我们dedecms是分3级或者3层的,如下图所示: 点击“玄幻小说”后发现出了错,如下图所示: 我们的dedecms是分3层的,他们分别是: 网站首页 网站的栏目页面(多级)--->栏目页面是需 ...
- 一段OpenGL的简单代码
这是基于OpenGL的代码,把它放进draw中即可.渲染出来的效果还不错 #define PI 3.14159 #define N 100 void test::Draw() { glClearCol ...
- Openstack的HA解决方案【haproxy和keepalived】
1. 安装haproxy,keepalived, httpd,3台机器一致. yum install haproxy keepalived httpd -y 2. 修改httpd的默认页面. 在/va ...
- 批处理命令——echo 和 @
[1]echo 命令简介 echo 命令的常见用法(必须掌握)分为以下几种情况: 一.无参数 作用:显示当前echo的状态:处于打开或关闭状态. 新建一个文本文件,命名为echo,修改类型为bat,用 ...
- stc89c52开发板遥控器解码 红外线发射 内置 eeprom 存储 串口显示编码
单片机,大概三年前,就买了一本 <爱上单片机> 最后就学会,用面包板了,编程书上基本没讲. 看原理图,看时序图,看数据手册, 都没讲. 而且书上自带的代码写的很烂. 1,缩近控制不好 2, ...
- ASP开发入门+实战电子书共50本 —下载目录
小弟为大家整理50个ASP电子书籍,有入门,也有实战电子书,做成了一个下载目录,欢迎大家下载. 资源名称 资源地址 ASP.NET开发实战1200例_第I卷 http://down.51cto.com ...
- javax.xml.ws.soap.SOAPFaultException: 没有Header,拦截器实施拦截
客户端代码: client.getOutInterceptors().add(new AuthInterceptor("zhangsan", "123456") ...