jQuery 淡出一个图像到另一个图像的实现代码

jQuery 淡出一张图片到另一张图片，例如有下边的 html：

代码如下:

<div class="fade">
<img src="1.jpg" />
</div>

首先，确保 div 的大小和图片大小一样，这个 div 有另一个背景图，如下：

css代码：

代码如下:

.fade
{
background-image:url('images/2.jpg');
width:300px;
height:225px;
}

jQuery 代码如下:

代码如下:

$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});

完整实现代码：

代码如下:

<div class="fade"><img src="1.jpg" /></div>
<style type="text/css">
.fade
{
background-image:url('2.jpg');
width:300px;
height:225px;
margin:0 auto 15px;
}</style>
<script type="text/javascript">
$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});
</script>

作者：jQuery学习

赞 (0)

相关推荐

  • jQuery的animate函数实现图文切换动画效果

    在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <

  • jQuery实现企业网站横幅焦点图切换功能实例

    本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • 13 款最热门的 jQuery 图像 360 度旋转插件推荐

    13 款最热门的 jQuery 图像 360 度旋转插件推荐

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏. 在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示.希望大家能从中找到自己喜欢的,并应用在自己的网站上. 1

  • jquery图片切换实例分析

    本文实例讲述了jquery图片切换实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jquery实现图片左右切换的方法

    本文实例讲述了jquery实现图片左右切换的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jquery仿百度经验滑动切换浏览效果

    jquery仿百度经验滑动切换浏览效果 $(function() { wordStrong(); $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length); $("#header .top_right .vote").hover(function() { $(this).children(".hover-t

  • jquery实现多屏多图焦点图切换特效的方法

    本文实例讲述了jquery实现多屏多图焦点图切换特效的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • jQuery实现的多屏图像图层切换效果实例

    本文实例讲述了jQuery实现多屏图像图层切换效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • jQuery 淡出一个图像到另一个图像的实现代码

    jQuery 淡出一张图片到另一张图片,例如有下边的 html: 复制代码 代码如下: <div class="fade"> <img src="1.jpg" /> </div> 首先,确保 div 的大小和图片大小一样,这个 div 有另一个背景图,如下: css代码: 复制代码 代码如下: .fade { background-image:url('images/2.jpg'); width:300px; height:225

  • jQuery如何跳转到另一个网页 就这么简单

    jQuery如何跳转到另一个网页 就这么简单

    平时我们在Javaweb的开发的过程中,现在还是大都使用jQuery,毕竟当时红极一时,虽然现在有点跟不上时代了,但毕竟还是很主流的.程序员最爱的一张图. 所以了,今天我们就来说一说如何在jQuery中跳转到另外一个网页HTML. 其实下面我列举的几种方法也不一定都是用jQuery,也有的使用了Javascript的原生的方法,所以也算是前端跳转的一个总结吧. 我们可以利用http的重定向来跳转 window.location.replace("http://www.jb51.net"

  • jQuery将表单序列化成一个Object对象的实例

    验证表单的时候经常需要获取表单中name='***'的元素的值,然后加以判断.jQuery中提供了jQuery.serizlizeArray来将表单序列化成一个数组.尽管如此,数组还是不方便我们操作,我需要讲表单序列化成一个对象.这样更方便于我们操作.   下面是代码: /** * @author gaohuia */ (function($){ $.fn.extend({ serializeObject:function(){ if(this.length>1){ return false;

  • 使用jquery判断一个元素是否含有一个指定的类(class)实例

    在jquery中可以使用2种方法来判断一个元素是否包含一个确定的类(class).两种方法有着相同的功能. 2 种方法如下: 1. is('.classname') 2. hasClass('classname') 以下是一个div元素是否包含一个redColor的例子: 1. 使用is('.classname')的方法 $('div').is('.redColor') 2. 使用hasClass('classname')的方法(注意jquery的低版本可能是hasClass('.classna

  • jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div

  • jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

    本文实例讲述了jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法.分享给大家供大家参考.具体分析如下: jQuery通过load()方法载入另外一个网页文件内的指定标签内容到div标签,如果我们可以加载网页b.html中的id为p1的标签内容到网页a.html的div标签内 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> <

  • Python OpenCV读取png图像转成jpg图像存储的方法

    如下所示: import os import cv2 import sys import numpy as np path = "F:\\ImageLib\\VRWorks_360_Video _SDK_1.1\\footage14\\" print(path) for filename in os.listdir(path): if os.path.splitext(filename)[1] == '.png': # print(filename) img = cv2.imread(

  • Python OpenCV处理图像之滤镜和图像运算

    本文实例为大家分享了Python OpenCV处理图像之滤镜和图像运算的具体代码,供大家参考,具体内容如下 0x01. 滤镜 喜欢自拍的人肯定都知道滤镜了,下面代码尝试使用一些简单的滤镜,包括图片的平滑处理.灰度化.二值化等: import cv2.cv as cv image=cv.LoadImage('img/lena.jpg', cv.CV_LOAD_IMAGE_COLOR) #Load the image cv.ShowImage("Original", image) grey

  • python 实现从高分辨图像上抠取图像块

    我就废话不多说了,直接上代码吧! #coding=utf-8 import cv2 import numpy as np import os # 程序实现功能: # 根据patch在高分辨率图像上的索引值,crop出对应区域的图像 # 并验证程序的正确性 ''' 对于当前输入的3328*3328的高分辨率特征图,首先resize到640*640 然后根据当前的patch文件名(包含了patch在高分辨率图像上的行索引和列索引) 这个索引值是将高分辨率图像划分成多个没有overlap的256*25

  • django在保存图像的同时压缩图像示例代码详解

    假设我们有一个非常简单的Post模型,它将是一个图像及其描述, from django.db import models class Post(models.Model): text = models.TextField() image = models.ImageField(upload_to='images/') 但是我们要优化图像大小,这将由我们Post的image字段指出. 这样做有充分的理由-它有助于更快地加载网站/应用程序并减少我们的服务器存储. 在使用Django之前,首先让我们简

随机推荐