基础 4 - 图像滚动以显示另一个图像

Foundation 4 - image roll-over to reveal another image

本文关键字：图像 显示 另一个 滚动 基础      更新时间：2023-09-26

我是Foundation 4的新手，但是我以前确实有一些编码经验。我正在将我当前的摄影博客（www.momentaryawe.com/blog）移动到使用Foundation 4的自定义主题的基于Wordpress的自定义构建主题。

我已经设法让几乎所有事情都按照我想要的方式工作，但我被困在以下方面。如果您查看此链接（http://www.momentaryawe.com/blog/a-blur-of-colours/），您会注意到我目前的工作方式是当有人滚动图像时，将显示另一张图像，这是直接来自相机的原始图像。这两张图片都是在创建帖子时上传的。此滚动更新使用以下 jQuery 代码完成：

$(function() { 
  $("#rolloverOriginal ul li").hover(
    function() { 
        $(this).find('p').fadeIn(); 
    },
    function() { 
        $(this).find('p').fadeOut();
    }
);
});
因为Foundation 4

使用的是似乎没有悬停选项的Zepto，所以我被困在如何使用Foundation 4做同样的效果上。我想过也许为此使用 Orbit，但不幸的是，我可以让它在翻转时工作。

如果你愿意，你可以跳过zepto并使用jQuery。如果您使用此代码，则只需将其更改为包含jquery文件或使用CDN：

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><'/script>');
</script>

成为：

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/jquery.js><'/script>');
</script>

或 CDN 版本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

由于缺乏对zepto的浏览器支持，我倾向于使用jquery。

更新：我已经包含了jquery v1.10.1，但不支持hover，所以改为将该代码更改为使用mouseenter和mouseleave。

$(function() { 
  $("#rolloverOriginal ul li")
    .on('mouseenter', function() { 
        $(this).find('p').fadeIn(); 
    })
    .on('mouseleave', function() { 
        $(this).find('p').fadeOut();
    });
});
相关文章：