Jquery 交叉衰落图像_Jquery_Css

Jquery 交叉衰落图像

jquery css

Jquery 交叉衰落图像,jquery,css,Jquery,Css,我有一张照片： Clown%20Fish 在MouseOver上，我必须显示另一个图像： image.jpeg 在图像上方： energy.jpeg （使用webkit转换显示：不透明度1s ease in-out属性）我在这里得到了第一个代码表：不起作用这是现场演示：代码如下： <!DOCTYPE html> <html> <head> <style> #cfnormal { position:relati

我有一张照片：

 Clown%20Fish

在MouseOver上，我必须显示另一个图像：

 image.jpeg

在图像上方：

 energy.jpeg

（使用webkit转换显示：不透明度1s ease in-out属性）

我在这里得到了第一个代码表：

不起作用

这是现场演示：

代码如下：

 <!DOCTYPE html>
 <html>
 <head>
 <style>

 #cfnormal {
   position:relative;
   height:281px;
   width:450px;
   margin:0 auto;
 }

 #cf {
   position:relative;
   height:10px;
   width:450px;
   margin:0 auto;
 }


 #cf img {
   position:absolute;
   left:0;
   width:450px;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
 }


 </style>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
 </script>

 <script>
 function change(x)
 {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
 }
 </script>
 </head>

 <body>

 <div id="cf">
   <img id="imgbott" class="bottom" src="./image.jpeg" />
   <img id="imgtop" class="top" src="./energy.jpeg" />
 </div>

 <div id="cfnormal">
   <img onmouseover="change(this)" src="./Clown%20Fish.jpg" />
 </div>

 </body>
 </html>


#cfnormal{
位置：相对位置；
高度：281px；
宽度：450px；
保证金：0自动；
}
#碳纤维{
位置：相对位置；
高度：10px；
宽度：450px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
宽度：450px；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
功能改变（x）
{
var元素=document.getElementById（'imgtop'）；
element.style.opacity=“0”；
}

当第三个图像触发鼠标上方的事件时，我必须显示一个图像覆盖另一个图像

以下是正确的代码：

  <!DOCTYPE html>
  <html>
  <head>
  <style>

  #cfnormal {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cfnormal img {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cf {
    position:relative;
    height:10px;
    width:450px;
    margin:0 auto;
  }


  #cf img {
    position:absolute;
    left:0;
    width:450px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }


  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>

  <script>
  function change(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
  }
  function normalImg(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "1";
  }
  </script>
  </head>

  <body>

  <div id="cf">
    <img id="imgbott" class="bottom" src="http://youngsskatingcenter.com/nss-            folder/pictures/Many_colors.gif" />
  <img id="imgtop" class="top"       src="http://freepages.genealogy.rootsweb.ancestry.com/~genphotos2/jwline.jpg" />
  </div>

  <div id="cfnormal">
    <img onmouseover="change(this)"  onmouseout="normalImg(this)"       src="http://www.vmapas.com/maps/2748-2/Immagine_Satellitare_Mondo_Occidentale.jpg" />
  </div>

  </body>
  </html>


#cfnormal{
位置：相对位置；
高度：281px；
宽度：450px；
保证金：0自动；
}
#正常img{
位置：相对位置；
高度：281px；
宽度：450px；
保证金：0自动；
}
#碳纤维{
位置：相对位置；
高度：10px；
宽度：450px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
宽度：450px；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
功能改变（x）
{
var元素=document.getElementById（'imgtop'）；
element.style.opacity=“0”；
}
函数normalImg（x）
{
var元素=document.getElementById（'imgtop'）；
element.style.opacity=“1”；
}

你能说得更清楚一点吗，我看不出你遇到的问题是什么？比如，正在发生什么，应该发生什么，或者预期会发生什么，以及为什么你觉得不应该是这样。你能展示一个，这样我们就可以看到发生了什么，你能解释清楚这个问题吗？那么问题是什么？不起作用我看不到被显示的图像隐藏的图像…被设置为关闭。当第三个图像触发鼠标上的事件时，我必须显示一个在另一个图像上的图像好吗？