Question

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

我已经设法让所有的东西都按照我的意愿工作，但是我被困在了下面。如果您查看此链接（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();
    }
);
});

因为基础4使用的Zepto似乎没有悬停选项，我仍然坚持如何使用基础4做同样的效果。我想过可能会使用Orbit，但不幸的是我可以得到它进行翻车工作。

Answer 1

如果你愿意，你可以跳过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();
    });
});

基础4 - 图像翻转以显示另一个图像

1 个答案: