jQuery实现的鼠标滑过切换图片代码实例:
有时候网页需要这样的简单效果，那就是当鼠标滑过默认图片的时候，能够实现图片的切换，可能在实际应用中，往往没有这么简单，不过大家可以自行扩展一下，下面简单介绍一下次效果。
html静态代码如下:
<body> 
 <img src="data:images/mayi.jpg" />  
</body>

jquery切换代码:

$(document).ready(function(){
  var newImage=new Image();
  var oldImage=$('img').attr('src');
  newImage.src='images/new.jpg';
  $('img').hover(function(){
    $('img').attr('src',newImage.src);
  },
  function(){
    $('img').attr('src',oldImage);
  })

})

以上代码是实现切换的核心，原理很简单，就是为图片的注册hover事件处理函数，当鼠标悬浮的时候，修改图片的src属性值即可。

jQuery实现的鼠标滑过切换图片代码实例的更多相关文章

  1. CSS控制当鼠标滑过时更换图片的效果

    鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  2. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  3. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  4. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  5. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  6. jquery鼠标滑过展示图片时显示详情

    jquery: <script src="js/jquery.js" type="text/javascript"></script> ...

  7. jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)

    遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:

  8. onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法

    鼠标移入移出图片切换很常见的,那我们就来说说他的写法 第一种方法,也是最简单的一种,在html:里就可实现 <img class="img" src="img/do ...

  9. 鼠标滑过切换div显示（鼠标事件）

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. python主文件判断

    目录结构: myfile1.py.myfile2.py.myfile3.py代码都是打印文件名和__name__变量,如myfile1.py: print("myfile1",__ ...

  2. request.getParameter与request.getAttribute()

    这里就request为例,不去考虑session. request对象是javax.servlet.http.HttpServletRequest接口的一个实例,request表示调用JSP页面的请求 ...

  3. 00-Java 语言简介

    一.开发环境搭建: (一).JAVA语言简介: 1.JAVA语言简介: (1)什么是JAVA:Java是一种计算机编程语言.它是一种计算机编程语言.它是一种软件开发平台.它是一种软件运行平台.它是一种 ...

  4. OSPF(Open Shortest Path First开放式最短路径优先 -链路状态路由协议

    OSPF分为OSPFv2和OSPFv3两个版本,其中OSPFv2用在IPv4网络,OSPFv3用在IPv6网络 思科OSPF的协议管理距离(AD)是110,华为OSPF的协议管理距离是10 通告网络接 ...

  5. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  6. SpringMVC的各种参数绑定方式

    1. 基本数据类型(以int为例,其他类似):2. 包装类型(以Integer为例,其他类似):3. 自定义对象类型:4. 自定义复合对象类型:5. List绑定:6. Set绑定:7. Map绑定: ...

  7. selenium+python自动化之元素定位

    自动化按步骤拆分的话,可以分为四步操作:定位元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇接下来讲基本的八种元素定位方法.说的通俗一点,就是教大家找对象. ...

  8. C语言qsort函数用法

    qsort函数简介 排序方法有很多种:选择排序,冒泡排序,归并排序,快速排序等. 看名字都知道快速排序是目前公认的一种比较好的排序算法.因为他速度很快,所以系统也在库里实现这个算法,便于我们的使用. ...

  9. [Spring] IOC - study

    Spring IOC简单注入例子,本例子使用JUnit进行测试.Spring版本:3.2 项目结构: Spring所需引用的JAR包: Spring XML配置: springContext.xml ...

  10. Angular学习（5）- 数组双向梆定+filter

    示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 5< ...