Question

我一直在研究this website的功能，如果有人知道“fbrd”id标签如何与jquery一起工作，我很好奇吗？我已经研究了几个月，似乎无法复制。我是jquery的新手。

Answer 1

好吧，我查看了代码，并为您准备了一个示例。

你可以找到它HERE。

他们基本上做的是将hover事件与FancyBox插件相结合。

我在演示中使用的jQuery是：

$("#fbrd").hover(function() {
    $(".title").toggle();

});

$("#fbrd").hover(
  function () {
    $(this).addClass('hover');
  }, 
  function () {
    $(this).removeClass('hover');
  }
  );


$("#fbrd").click(function() {

    $("#TheFancybox").html("<p id='display'>C:\>_Is this what you are looking for?</p><iframe width='560' height='315' src='//www.youtube.com/embed/lAl28d6tbko?autoplay=0' frameborder='0' allowfullscreen></iframe>");

    $(".fancyTrigger").fancybox();
    $(".fancyTrigger").trigger('click');
});

我没有完全确实他们在网站上做了什么，但我的演示应该给你一些关于jQuery如何工作以及如何使用这些功能的直觉。您可以根据自己的喜好开始更改设置。如果您不知道为什么某些东西会按照它的方式工作，请在评论中寻求帮助。

祝你好运。

更新

为了展示如何使FancyBox采用另一种尺寸，然后显示它所显示内容的大小，您可以像这样设置FancyBox的参数：

$(".fancyTrigger").fancybox({
   'width':'90%',
   'height':'90%',
   'autoSize' : false,
   'fitToView':  false
});

可以找到此设置的演示here。

可以找到全屏演示here。

祝你好运！

Jquery和id标签无法正常使用fancybox

1 个答案:

更新