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 ...
随机推荐
- PADS Layout 使用
1.设置板子中心 setup-set origin 1.画板子边框(Board Outline) Board outline and cutout umm设置单位毫米 g 10 设置间隔 右键设置方形 ...
- A Flock Of Tasty Sources On How To Start Learning High Scalability
This is a guest repost by Leandro Moreira. When we usually are interested about scalability we look ...
- linux ascii艺术与ansi艺术
Linux终端下的ASCII艺术 http://zh.wikipedia.org/zh-tw/%E9%9B%BB%E5%AD%90%E9%81%8A%E6%88%B2%E5%8F%B2 电子游戏史 h ...
- maxsdk sample中3dsexp.rc点不开并提示specstrings.h中找不到sal.h解法
在网上下载sal.h文件并拷贝到specstrings.h所在目录(C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Include)即可. sa ...
- Linux-HAproxy+Keepalived
HAproxy+++++++++++++Info+++++++++++VIP:192.168.1.222HA-Master IP:192.168.1.117HA-Backup IP:192.168.1 ...
- Visual Studio 不生成.vshost.exe和.pdb文件的方法
使用Visual Studio编译工程时,默认设置下,即使选择了「Release」时也会生成扩展名为「.vshost.exe」和「.pdb」的文件. 一.先解释一下各个文件的作用: .pdb文件: 程 ...
- (zt)Lua的多任务机制——协程(coroutine)
原帖:http://blog.csdn.net/soloist/article/details/329381 并发是现实世界的本质特征,而聪明的计算机科学家用来模拟并发的技术手段便是多任务机制.大致上 ...
- 关于用phonegap+jquery moblie开发 白屏闪屏的解决方法
前几天自己玩开发android应用,做些页面切换效果时,发现两个页面间切换间有白色闪屏的问题. 在网上找了很久的资料,还是没有解决. 最终,发现同事开发的android应用没有这个问题.对比代码排除发 ...
- C#分析搜索引擎URL得到搜索关键字，并判断页面停留时间以及来源页面
前台代码: var start; var end; var state; var lasturl = document.referrer; start = new Date($.ajax({ asyn ...
- zend studio一些常用配置
zend studio 常用 配置 1.zend中添加注释是ctrl+slash,这个slash在哪里?如何来取消注释 slash是斜杠'/'那个键,就是在,.之后的那个. 进行注释是 ctrl+'/ ...