jquery - jquery 图片幻灯片

Question

这是测试页面

http://www.studioteknik.com/html/test-portfolio.html

我没有错误，但没有悬停滑动效果......

任何线索任何人？

---

更新，molf 已经解决了这个问题，那是绝对位置的伎俩.. 但是，现在，当文本出现时，下面的链接是不可点击的

---

更正的页面在这里： http: //www.studioteknik.com/html/test-portfolio3.html

Answer 1

您应该更新您的 CSS，确保.image img绝对定位：

.image img {
    position: absolute; // added
    height: 100%;
    width: 100%;
}

这将使幻灯片工作。但是，图像将显示在周围环境之外div。要解决此问题，请将overflow: hidden属性添加到.image：

.image {
    // ...
    overflow: hidden; // added
}

---

更新：考虑到在上面的解决方案中，您最终会看到后面的文本.image div（即带有不可点击的链接），您最好滑动它而不是图像。代替上述方法，请执行以下操作：

.box {
    // ...
    overflow: hidden; // added
}

在你的 javascript 中：

$('div.box').hover(function() {
    $(this).find(".image").animate({top:'200px'},{queue:false,duration:500});
}, function() {
    $(this).find(".image").animate({top:'0px'},{queue:false,duration:500});
});

请注意，我们现在正在跟踪 上的hover事件div.box，并向下滑动div.image。

Answer 2

它适用于

position:relative;

也可以，但您需要将 JS 更改为：

$('div.webpreview').hover(....);

因为您的页面中没有“图像”类的 div :)

对于可点击的链接：

风格：

.webpreview  img {
    height: 100%;
    position:relative;
    overflow:hidden;
    width: 100%;
    z-index:100;//note this
}

.box .linkDiv{
       top:-300px;
       position:absolute;
       overflow:hidden;
       z-index:200;
}

JS：

$(document).ready(function() {
$('div.box').hover(
        function(){
             $('div.webpreview',$(this)).find("img").animate(
                      {top:'200px'},{queue:false,duration:1000});
            $("div.linkDiv", $(this)).animate({top:'0px'},
                      {queue:false, duration:500});
        },

        function(){
            $('div.webpreview',$(this)).find("img").animate(
                         {top:'0px'},{queue:false,duration:1000});
            $("div.linkDiv",$(this)).animate({top:'-300px'},
                         {queue:false, duration:500});
        }
        );
});

HTML：

<div class="box">
 <div class="linkDiv">
    <strong>Client :</strong> Sous le charme des érables<strong><br>
      Manda : </strong>Conception et réalisation<br>
      <strong>Adresse : <a href="http://www.souslecharme.ca/" 
           target="_blank">www.souslecharme.ca</a></strong>
</div>
  <div class="webpreview"><img src="test-portfolio_files/souslecharme.jpg"></div>
</div>

您也可以通过更改包含链接的 div 的z-index来做到这一点：

       $('div.box').hover(
        function(){
            $('div.webpreview',$(this)).find("img").animate(
                        {top:'200px'},{queue:false,duration:1000});
            $("div.linkDiv", $(this)).css("z-index","200");
        },

        function(){
            $('div.webpreview',$(this)).find("img").animate(
                       {top:'0px'},{queue:false,duration:1000});
            $("div.linkDiv", $(this)).css("z-index","50");
        });