1

我有一个大问题。我在我的投资组合中加入了一个“淡入淡出脚本”，它使用 jQuery 和 CSS 在我的投资组合中的缩略图之间淡入淡出。不幸的是，它基于我无法链接的 2 个 img 类。

换句话说，我喜欢将图像 green.jpg 链接到一个 URL（在这种情况下是一个灯箱中的 youtube 剪辑）。

有谁知道如何解决这个问题？

HTML：

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

CSS：

#cf {
  position:relative;
  height:200px;
  width:310px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
  cursor:pointer;
}

#cf img.top:hover {
  opacity:0;
}

非常感谢！如果有任何帮助，您可以查看http://www.axeltagg.com/test/上的页面

最好的祝福！/阿克塞尔

4

3 回答 3

0 
// Get image URLs
var current_image_top = $('div#cf').children('img.top').attr('src');

var current_image_bottom = $('div#cf').find('a').children('img.bottom').attr('src');

//Set image URLs
$('div#cf').children('img.top').attr('src', 'new_image.jpg');

$('div#cf').find('a').children('img.bottom').attr('src', 'new_image.jpg');
于 2013-06-23T18:44:00.063 回答
0

尝试将此代码保存为 html 并在浏览器中打开：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" 

title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

<button>Fade Image with top class</button>
<button>Fade Image with bottom class</button>
<script>
$("button:first").click(function() {
  $('div#cf').children('img.top').fadeToggle("slow", "linear");
});

$("button:last").click(function () {
  $('div#cf').find('a').children('img.bottom').fadeToggle("slow", "linear");
});
</script>
</body>
</html>
于 2013-06-23T18:55:57.167 回答
0

您需要将锚标记添加到两个图像。或者将绿色图像设置为更高的 z-index。

第一个解决方案：

改变这个：

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

对此：

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              <img class="top" src="img/a_childish_letter.jpg" />
              </a>
            </div>
</div>

第二种解决方案：

.bottom{
    z-index: 1;/* Try Higher numbers if it doesn't work or add !important */
}

我在谷歌浏览器中测试了它，它可以工作！

于 2013-06-23T19:49:58.433 回答