0

编辑：我不想只从不同页面获取内容并将其加载到当前页面中。我真正想做的是加载将在电视中交互的不同 html 文件。我发现这样做很困难，因为您无法将 html 文件加载到 DIV 中，并且您无法通过透明的 png 文件单击链接。

你好，

我正在为我和朋友制作的名为 Every Single Day 的电视节目建立一个网站。

在这里你可以看到我到目前为止的模型： http ://www.uvm.edu/~areid/cs195/final/S/S.html

截至目前，我使用的图像只是我用 Photoshop 切片的一张大图像。

我的目标是使用某种脚本来制作它，以便外部电视将静态保持在原位，并且电视内的网络内容将在不重新加载最外面的电视的情况下进行转换。

我想将此技术与类似于 fss 滑块脚本的东西结合起来，以允许站点上的每个页面滑动，使其看起来像是房间的延续。- 也许这甚至不是达到我想要的结果的最佳方式。

我已经绘制和切片了所有图像，我现在需要的是一些方向，以找到我正在寻找的片段。

非常感谢，很高兴加入这个社区，

库珀·里德

4

3 回答 3

0
  1. 将外部电视内的所有东西都包裹在一个<div>
  2. 创建单独的 HTML 页面，其中仅包含您想要在电视中显示的内容的 HTML。
  3. 使用jQuery 的 AJAX get 方法来获取页面的 HTML 而不刷新它。

例如，您的“单个”图像位于<td>ID 为“rightframe”的图像中。因此，当单击 rightframe 时，您可能希望获取名为 single.html 的页面的 html 并将其放入电视中（假设您的<div>或<table>具有代码的或具有 ID 的页面content）：

$('#rightframe').click(function() {
    $.get('single.html', function(data) {
      $('#content').html(data);
    });
});

编辑：对于滑动部分，您必须并排创建两个单独的表/div，一个用于当前页面，一个用于正在加载的页面。然后你可以使用像 Slidy http://www.wbotelhos.com/slidy/这样的 jQuery 插件在它们之间进行转换。

就个人而言，我认为如果您可以在页面加载时将电视白噪声的动画 GIF 放在电视上会更酷:)

于 2011-05-01T22:03:14.713 回答
0

以下内容：http: //jsfiddle.net/Vzdu7/

于 2011-05-01T22:19:57.240 回答
0

编辑 5： http: //jsfiddle.net/wdm954/pqAJK/10/（显示添加内容。）

编辑 4：http: //jsfiddle.net/wdm954/pqAJK/7/

此演示包括平移到特定帧。

var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs

$('.pan').click(function(e) {    
    e.preventDefault(); //prevent default action (of <a>)
    if ($('.content div').is(':animated')) return false; //disable click while animating
    var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
    $('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});

$('#tv-right').click(function() {

    if ($('.content div').is(':animated')) return false; //disable click while animating
    $('.content div').animate({top: '-='+h+'px'}, 2000); //animation

    //if last div then go back to the start
    if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
        $('.content div').stop().animate({ top: '0px' }, 1000);
    }
});

编辑 3：http: //jsfiddle.net/wdm954/pqAJK/5/

好的，看看这个演示。单击电视右侧（您可以在其中放置一些按钮）将滚动屏幕中的内容。当您到达最后一个内容部分时，下一次单击将返回到第一个内容部分。我对内容进行了分层，因此背景 div 在电视图像后面滚动，内容在上方滚动（因此您可以单击它。还有一些其他技巧，但仔细看一下，您应该明白了。

编辑 2： http: //jsfiddle.net/wdm954/pqAJK/3/（单击电视查看过渡。这有内容 div 而不仅仅是背景图像）。

编辑：看看这个演示：http: //jsfiddle.net/wdm954/pqAJK/

我会先剪掉电视的屏幕部分，然后将其保存为具有透明度的 .png，以便您可以看到电视屏幕部分后面的内容。

然后，您可以添加背景图像并使用 jQuery 对其进行动画处理，以滑入您想要显示的部分。

我*个人不会使用任何切片，当大多数人没有高速连接时，这是一种老式的技术。

于 2011-05-01T23:17:06.067 回答