交叉褪色图像javascript

我有一张图片:

 Clown%20Fish

onmouseover我必须显示另一个图像:

 image.jpeg

在图像上方:

 energy.jpeg

(show with webkit-transition: opacity - 1 ease-in-out property)

我在这里得到了第一个代码形式:http://css3.bradshawenterprises.com/cfimg/#comments

不工作…

这是现场演示:http://liveweave.com/6EgbYH

下面是代码:

 <!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>

当鼠标悬停在第三个图像上时触发事件时，我必须显示一个图像位于另一个图像之上

下面是正确的代码:

  <!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>

相关内容

最新更新

热门标签：