2

我一直在尝试实现与该网站类似的效果：http://www.dubstep.net
如果您在任何播放器上单击播放或标题，您将看到一个窗口出现，具有叠加效果。这样的窗口是 iframe。通过查看页面源，我可以理解该data-id=""属性负责 iframe 中显示的内容。我只是不知道怎么做。当用户点击播放按钮时会发生什么？以及如何使用 data-id 属性？

4

3 回答 3

1

这是一个相当简单的过程。他们将 HTML 响应预先构建到对 的请求中www.dubstep.com/track/trackNumber，其中trackNumber是一个参数。所以在服务器端，有一个RewriteRule定义nginx（他们nginx用作服务器，通过curl -V“指纹”判断）。

所以基本上www.dubstep.com/track/4567是等价的www.dubstep.com/track/index.php?trackNumber=4567。

现在 aniframe是一种加载和显示外部页面的方法。他们这样做的方式类似于这个想法：

$('.track').click(function(event) {// assuming track divs have class .track.
    var iframe = document.createElement('iframe');
    iframe.src = "//www.dubstep.com/track/" + event.target.getAttribute("data-id");// this uses the data-id attribute of the clicked item.
    iframe.height = // some computed height;
    iframe.width = // some computed width;
    iframe.name = "whatever";
    iframe.style.display = "none;"
    // or
    iframe.style.visibility = "hidden";

    document.getElementsByTagName('body')[0].appendChild(iframe); // element is inserted somewhere in the DOM.
    // Now some form of transition is applied.
    });

被iframe包裹在两个模态div元素内，用于显示目的。

于 2013-04-22T13:01:01.657 回答
0

您可以使用 jquery 颜色框。这很酷！

http://www.jacklmoore.com/colorbox/

之后包括您的脚本位置和 css 文件

<script src="colorbox_folder/jquery.colorbox.js"></script>
<link rel="stylesheet" href="colorbox_folder/colorbox.css" />

 <a href="http://www.google.com" onclick="callingIframe()">Go to Google</a>

这是javascript函数

function callingIframe()
{
  $(".iframe").colorbox({iframe:true,onClosed:function(){ location.reload(true); },             width:"940", height:"650"});
}
于 2013-04-22T20:18:39.823 回答
0

iFrame 加载外部页面。所有这些数据都是从 .html（或等效）页面中提取的。使用 data-id 属性不会告诉你太多，因为它肯定是在服务器端处理的，作为收集和显示某些曲目或其他任何东西的一种手段（换句话说，这不会告诉你很多关于列出的网站及其方式作品）。

阅读框架：

http://www.w3.org/TR/html4/present/frames.html

于 2013-04-22T12:54:00.130 回答