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

来源:互联网 时间:1970-01-01

背景图淡入淡出的原因是否:通过一个两张不同的图片,两个不同的层重叠在一起,顶层暂时透明,当鼠标移上去时,顶层由透明变成不透明,鼠标离开反之。

下面写代码

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://php100.com"><span>php100.com</span></a>
    php100.com
    <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>




相关阅读:
Top