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);
})
})
jQuery实现的鼠标滑过切换图片代码实例的更多相关文章
- CSS控制当鼠标滑过时更换图片的效果
鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- 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 ...
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- jquery鼠标滑过展示图片时显示详情
jquery: <script src="js/jquery.js" type="text/javascript"></script> ...
- jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)
遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:
- onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法
鼠标移入移出图片切换很常见的,那我们就来说说他的写法 第一种方法,也是最简单的一种,在html:里就可实现 <img class="img" src="img/do ...
- 鼠标滑过切换div显示（鼠标事件）
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- ps互补色
色彩中的互补色有红色与绿色互补,蓝色与橙色互补,紫色与黄色互补.在光学中指两种色光以适当的比例混合而能产生白光时,则这两种颜色就称为“互为补色”. 互补色是相对的混合的白色 互补色:在色环中某种颜色的 ...
- OSGi 的由来和本质特性
OSGi 的由来 随着科技和需求的发展和变化,现在的软件变得越来越庞大.这样,随之而来的最大挑战就是软件在设计上的越来越复杂和维护上的越来越困难.为了解决这个问题,软件架构师将软件切分成比较小的并且易 ...
- 在apache连接多php的时候遇到了问题，怎么切换多个php版本？
PHP 在apache连接多php的时候遇到了问题,怎么切换多个php版本? 我的机器里面有一个apache2.2.22,但是有两个php,5.3.10和5.4.3,5.3.10是mac os x带的 ...
- SET XACT_ABORT ON
SET XACT_ABORT ON时,在事务中,若出现错误,系统即默认回滚事务,但只对非自定义错误有效 SET XACT_ABORT OFF,默认值,在事务中,回滚一个语句还是整个事务视错误的严重程序 ...
- ISV 和SI 是什么
ISV是Independent Software Vendors 的英文缩写,意为"独立软件开发商",特指专门从事软件的开发.生产.销售和服务的企业,如微软(Microsoft). ...
- SET Transaction Isolation Level Read语法的四种情况
转自:http://www.cnblogs.com/qanholas/archive/2012/01/04/2312152.html 存储过程:SET Transaction Isolation Le ...
- 利用Java Service Wrapper将java项目添加到windows服务中
1.web项目,即tomcat/resin添加至window系统服务,步骤如下:第一步:找到tomcat的bin目录,如:D:\apache-tomcat-8.0.26\bin第二步:打开cmd,cd ...
- flume ng 问题点
1. 启动Flume,出现脚本错误 错误如下: bin/flume-ng: line 82: syntax error in conditional expression: unexpected to ...
- PhoneGap原理分析
PhoneGap提供了Native Api的支持(如:重力感应.相机.联系人.文件.地址位置…), 比如要用js获取本机的联系人,可以用: var options = new ContactFindO ...
- image 与 canvas 的相互转化
转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 context 的drawImage方法: // 把image 转换为 canvas对象 func ...