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 ...
随机推荐
- MySQL 5.5.35 单机多实例配置详解
一.前言 二.概述 三.环境准备 四.安装MySQL 5.5.35 五.新建支持多实例的配置文件(我这里配置的是四个实例) 六.初始化多实例数据库 七.提供管理脚本 mysqld_multi.serv ...
- ORACLE 11g 用Duplicate恢复Data Guard 备库详细过程
1.先查找备库控制文件路径 先在备库上找出控制文件的路径,通过和主库一样,不过为了以防万一,还是check为好. SQL> select name from v$controlfile; NA ...
- Xcode 7安装KSImageNamed失败解决方法
## How do I use it? Build the KSImageNamed target in the Xcode project and the plug-in will automati ...
- shell之脚本片断
16. 以下是平台信息 CentOS Linux release 7.1.1503 (Core) Linux mysql-dev1 3.10.0-229.el7.x86_64 #1 SMP Fri M ...
- WCF Client is Open Source
WCF Client is Open Source Wednesday, May 20, 2015 Announcement New Project WCF We’re excited to anno ...
- Android Afinal框架(二)
框架地址:https://github.com/yangfuhai/afinal 对应的源码: net.tsz.afinal.annotation.view.* FinalActivity Final ...
- Ext is not defined
最近由于项目设计到Extjs所以也准备研究一下,可是谁知道刚写好一个demo,运行的时候死活出不来界面,于是用firebug看了一下,出现:Ext is not defined,因为刚开始学也不知道是 ...
- 网站首页title 里显示ico图标
有两种实现方式 图片尺寸大小 第一种:直接做一个favicon.ico 图标放在项目的根目录里就行 第二种:在网页HEAD标记中添加如下代码:<HEAD> <LINK REL=”SH ...
- 读取Config文件工具类 PropertiesConfig.java
package com.util; import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io ...
- 【linux】 linux 查看系统信息
1.输入"uname -a ",可显示电脑以及操作系统的相关信息. 2.输入"cat /proc/version",说明正在运行的内核版本. 3.输入" ...