Jquery实现背景图淡入淡出效果

下面写代码

html结构：

 代码如下 复制代码

<a id="logo" href=""><span>网页教程网</span></a>

css代码：

 代码如下 复制代码

 #logo{
  margin:0 auto;
  position:relative;/*相对定位,为了下面hover的绝对定位*/
  background:url(fatkun.png) left top no-repeat;/*设置背景图*/
  width:150px;
  height:40px;/*注意这里高度*/
  display:block;
  text-indent:-9999px;
 }
 #logo .hover{/*为JQ准备*/
  background:url(fatkun.png) left bottom no-repeat;/*background-position和上面不同*/
  position:absolute;/*为了使两张图片重叠在一起*/
  top:0;
  left:0;
  height:40px;
  width:150px;
 }

最后最重要的JQuery代码出现了

 代码如下 复制代码

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
  $("#logo").append("<span class='hover'></span>");//添加一个标签用来和灰图重叠起来
  $(".hover").css('opacity', 0);//先不显示
     $(".hover").parent().hover(
  function(){
   $(".hover").stop().animate({opacity: '1'},1000);
  },
  function(){
   $(".hover").stop().animate({opacity: '0'},1000);
  });
    </script>

完整实例

 代码如下 复制代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 背景图渐显</title>
<style type="text/css">
 body{
  padding-top:100px;
  text-align:center;
 }
 #logo{
  margin:0 auto;
  position:relative;/*相对定位,为了下面hover的绝对定位*/
  background:url(fatkun.png) left top no-repeat;/*设置背景图*/
  width:150px;
  height:40px;/*注意这里高度*/
  display:block;
  text-indent:-9999px;
 }
 #logo .hover{/*为JQ准备*/
  background:url(fatkun.png) left bottom no-repeat;/*background-position和上面不同*/
  position:absolute;/*为了使两张图片重叠在一起*/
  top:0;
  left:0;
  height:40px;
  width:150px;
 }
</style>
</head>

<body>
 <a id="logo" href="http://111cn.net"><span>111cn.net</span></a>
    111cn.net
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
  $("#logo").append("<span class='hover'></span>");//添加一个标签用来和灰图重叠起来
  $(".hover").css('opacity', 0);//先不显示
     $(".hover").parent().hover(
  function(){
   $(".hover").stop().animate({opacity: '1'},1000);
  },
  function(){
   $(".hover").stop().animate({opacity: '0'},1000);
  });
    </script>
</body>
</html>
时间： 2025-01-21 03:23:14

Jquery实现背景图淡入淡出效果的相关文章

jQuery实现首页图片淡入淡出效果的方法_jquery

本文实例讲述了jQuery实现首页图片淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: <div id="carousel"> <div id="ca

jQuery实现图片文字淡入淡出效果_jquery

本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

基于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>  <meta http-equiv=

jQuery实现首页图片淡入淡出效果的方法

 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div id="carousel"> <div id=&

jquery插件tooltipv顶部淡入淡出效果使用示例_jquery

  内部使用 复制代码 代码如下: <head>    <title></title>    <link href="base.css" rel="stylesheet" type="text/css" />    <link href="jquery.tooltip.less" rel="stylesheet/less" type="text

slide-焦点图淡入淡出效果，第一个图片怎么没有效果呢？？

问题描述 焦点图淡入淡出效果,第一个图片怎么没有效果呢?? $(document).ready(function(){ var ali=$('#lunbonum li'); var aPage=$('#lunhuanback li'); var aslide_img=$('.lunhuancenter .focus'); var iNow=0; ali.each(function(index){ $(this).mouseover(function(){ slide(index); }) });

jQuery入门(6) 淡入淡出效果

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn() 实现淡入效果,其基本语法如下 : $(selector).fadeIn(speed,callback); 可选参数speed给出了淡入效果的时间,可以 使用 "slow","fast" 或是数值(微秒) 第二个可选参数为回调函数,在fadeIn()方法结束后调 用. $("b

原生js和jquery实现图片轮播淡入淡出效果

  原生js和jquery实现图片轮播淡入淡出效果          本文给大家分享的是使用原生的js和jQuery2种方法,分别实现图片轮播的淡入淡出效果的代码,非常实用,也方便小伙伴们对比分析,希望对大家学习js和jq能够有所帮助. 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个

jquery淡入淡出效果简单实例_jquery

本文实例讲述了jquery淡入淡出效果实现方法.分享给大家供大家参考,具体如下: 之前理解有一些误区,以为淡入淡出是删除该元素,其实只是把该元素隐藏起来 和 显示出来罢了. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml