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. DRL之:策略梯度方法 (Policy Gradient Methods)

    DRL 教材 Chpater 11 --- 策略梯度方法(Policy Gradient Methods) 前面介绍了很多关于 state or state-action pairs 方面的知识,为了 ...

  2. ps调整图层

    自然饱和度:自然饱和度命令和色相饱和度命令里的饱和度相比最大的区别是自然饱和度只增加未达到饱和的颜色的饱和度,而饱和度命令则增加整个图像的饱和度,可能会导致图像颜色过于饱和,而自然饱和度不会出现这种问 ...

  3. lua堆栈操作常用函数学习二

    /* ** basic stack manipulation */ LUA_API int  <strong> (lua_gettop) (lua_State *L);  </str ...

  4. Android TextView内容过长加省略号,点击显示全部内容

    在Android TextView中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中:android:ellipsize="end"    省略号在结尾an ...

  5. Navicat导入数据时发生了报错 --- 1153 - Got a packet bigger than 'max_allowed的处理办法

    今天我在使用Navicat导入.sql文件数据时,发现本来是80万条的数据,结果只导入了10万条左右,而且在其错误信息日志中,我发现了这样一条错误:1153 - Got a packet bigger ...

  6. RESTful架构

    RESTful架构 1.什么是RESTful API设计原则 REST是Representational State Transfer的简写,意为“表现层状态转换” 是一种对资源状态进行操作的设计规则 ...

  7. C++多继承

    1.继承的三种方式: 公有继承(public),私有继承(private),保护继承(protected)三种继承方式的说明,如下表所示: 特征 公有继承 保护继承 私有继承 公有成员变成 派生类的公 ...

  8. DMZ区域

    DMZ是英文"demilitarized zone"的缩写,中文名称为"隔离区",也称"非军事化区".它是为了解决安装防火墙后外部网络不能访 ...

  9. mfs-管理员

    http://www.moosefs.org/http://moosefs.com/download.html 两个手册于2015/03/05阅完 moosefs-installation moose ...

  10. 虚拟化之vmware-vsphere概念,原理,功能

    080-login-back.vmx .encoding = "UTF-8"config.version = "8"virtualHW.version = &q ...