javascript 图片上一张下一张链接效果代码

贴个实现方法：
代码


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
.rootclass{ border:none;position:relative;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".rootclass").mousemove(function(e){
var positionX=e.originalEvent.x||e.originalEvent.layerX||0;
if(positionX<=$(this).width()/2){
this.style.cursor='url("pre.cur"),auto';
$(this).attr('title','点击查看上一张');
$(this).parent().attr('href',$(this).attr('left'));
}else{
this.style.cursor='url("next.cur"),auto';
$(this).attr('title','点击查看下一张');
$(this).parent().attr('href',$(this).attr('right'));
}
});
});
</script>
</head>
<body>
<a href="#" >
<img src="11.bmp" alt="" class="rootclass" left="http://www.google.cn" right="http://www.baidu.cn" />
</a>
</body>
</html>

说明：1.需要调用Jquery。
2.这里获取鼠标在图片的位置用了个投机的方法，设置图片的position:relative
直接使用 var positionX=e.originalEvent.x||e.originalEvent.layerX||0; 来获取。
3. 为了方便直接在图片上添加left="http://www.google.cn" right="http://www.baidu.cn" 为其上一张，下一张链接地址。记得给<img />套上<a href="#" ></a>
在线演示代码:http://demo.jb51.net/js/img_left_right/jquery_img_lr.htm

打包下载地址 http://www.jb51.net/jiaoben/25129.html

相关文章:
clientX,pageX,offsetX,x,layerX,screenX,offsetLef
JS在IE和FireFox之间常用函数的区别小结
javascript offsetX与layerX区别
jQuery 点击图片跳转上一张或下一张功能的实现代码

赞 (0)

相关推荐

  • C语言中的链接编写教程

    C语言中的链接编写教程

    链接   链接就是将不同部分的代码和数据收集和组合成为一个单一文件的过程,这个文件可被加载或拷贝到存储器执行.   链接可以执行与编译时(源代码被翻译成机器代码时),也可以执行与加载时(在程序被加载器加载到存储器并执行时),甚至执行与运行时,由应用程序来执行.在现代系统中,链接是由链接器自动执行的.   链接器分为:静态链接器和动态链接器两种. 静态链接器   静态链接器以一组可重定位目标文件和命令行参数作为输入,生成一个完全链接的可以加载和运行的可执行目标文件作为输出. 静态链接器主要完成两个

  • Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox

    一把情况下模拟点击一般两个方面,模拟点击超级连接事件firefox的兼容的函数为对HTMLAnchorElement 加入onclick事件 复制代码 代码如下: try { // create a element so that HTMLAnchorElement is accessible document.createElement('a'); HTMLElement.prototype.click = function () { if (typeof this.onclick == 'f

  • jquery 图片 上一张 下一张 链接效果（续篇）

    前段时间写了篇图片 上一张 下一张 链接效果,后来看到 jquery插件封装,手里痒痒的,拿这个例子做ex. 封装后的JS源码: 复制代码 代码如下: /* * imageupdown 1.0 * Copyright (c) 2009 * Date: 2010-04-20 * 图片移动上一张 下一张特效 */ (function($){ $.fn.imageupdown = function(options){ var defaults = { upCursor:"pre.cur",

  • vue实现简易图片左右旋转,上一张,下一张组件案例

    项目需求,嵌到elementUi里的小组件,写得不好,不喜勿喷,谢谢 父组件代码 <template> <div> <see-attachment :filesLists='files' :file='imgFile' v-if="showmask" @hideMask='showmask=false'></see-attachment> </div> </template> <script> impo

  • 键盘上一张下一张兼容IE/google/firefox等浏览器

    复制代码 代码如下: < script language = "javascript" > document.onkeydown = chang_page; function chang_page(event) { var event = event ? event : (window.event ? window.event : null); var key = event.keyCode || event.which; if (key == 37 || key == 3

  • JavaScript图片上传并预览的完整实例

    JavaScript图片上传并预览的完整实例

    目录 一.前端界面是通过jqgrid展示的 二.jqgrid特性 三.代码实例 1.jqgrid页面展示 2.模块页面 3.ajax实现异步请求 五.效果展示 总结 一.前端界面是通过jqgrid展示的 jqgrid是典型的B/C架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示. jqGrid是用ajax实现对请求和响应的处理,支持局部实时刷新. 二.jqgrid特性 通过配置url地址数据显示格式 支持行编辑,列搜索过滤 支持分页 添加表单支持文件上传 链式调用 三

  • js实现上一页下一页的效果【附代码】

    Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: 复制代码 代码如下: <a href="javascript:history.go(-1);">向上一页</a> response.Write(&quo

  • Spring Boot实现图片上传/加水印一把梭操作实例代码

    Spring Boot实现图片上传/加水印一把梭操作实例代码

    概述 很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现从 图片上传 → 图片加水印 的一把梭操作! 本文内容脑图如下: 本文内容脑图 搭建 Spring Boot基础工程 过程不再赘述了,这里给出 pom中的关键依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId>

  • 基于jQuery实现的向下滑动二级菜单效果代码

    基于jQuery实现的向下滑动二级菜单效果代码

    本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • javascript 图片上一张下一张链接效果代码

    贴个实现方法: 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title&g

  • 点图片上一页下一页翻页效果

    <script language="javascript" defer> var zhang=2 function next(){ if(zhang==7){ alert("这已经是最后一张了!") zhang=6 } document.getElementById("tu").src=zhang+".jpg" text.innerHTML="当前是第"+zhang+"张图片"

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

随机推荐