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调色技能
色相/饱和度: 色相->当你看到一种颜色,你会很快的辨别他为什么颜色,比如说红色,绿色,黄色.选中某种颜色然后调整色相. 饱和度->色彩艳丽程度. 明度->调整图片暗亮 曲线:暗亮调 ...
- Linux dbg debugging
http://h41379.www4.hpe.com/doc/84final/4538/4538pro_contents.html https://kgdb.wiki.kernel.org/index ...
- Sklearn库例子2：分类——线性回归分类（Line Regression ）例子
线性回归:通过拟合线性模型的回归系数W =(w_1,…,w_p)来减少数据中观察到的结果和实际结果之间的残差平方和,并通过线性逼近进行预测. 从数学上讲,它解决了下面这个形式的问题: Lin ...
- 如何用Transformer+从PDF文档编辑数据
ABBYY PDF Transformer+是一款可创建.编辑.添加注释及将PDF文件转换为其他可编辑格式的通用工具,可使用该软件从PDF文档编辑机密信息,然后再发布它们,文本和图像均可编辑,本文将为 ...
- sqlite-dbeaver-heidisql
http://www.sqlite.org/ http://www.sqliteexpert.com/ gui工具 这个网站的大部分信息在2015-10-9阅读完毕,下一步是阅读软件自带的帮助文档 将 ...
- #linux包之psmisc之fuser命令
概述 [root@localhost ~]# rpm -qf /sbin/fuserpsmisc-22.6-15.el6_0.1.x86_64 先说 fuser的作用,fuser能识别出正在对某个文件 ...
- OpenJudge计算概论-鸡尾酒疗法
/*===================================== 鸡尾酒疗法 总时间限制: 1000ms 内存限制: 65536kB 描述 鸡尾酒疗法,原指“高效抗逆转录病毒治疗”(HA ...
- Dom选择器及操作文本内容
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- android 如何让文本中某个关键字高亮显示？
TextView tv = (TextView) findViewById(R.id.hello);SpannableString s = new SpannableString(getResourc ...
- 类找不到异常 Caused by: java.lang.NoClassDefFoundError
错误原因:在部署应用的时候,服务器报错,Caused by: java.lang.ClassNotFoundException: org.quartz.impl.JobDetailImpl,某个类找不 ...