可以使用javascript创建静态边框/使网页在彼此之间滑动

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

你好,

我正在为一个电视节目建立一个网站，我和我的朋友每天都会打电话给我

在这里，您可以看到我目前拥有的模型：

到目前为止，我使用的图像只是我用Photoshop切片的一张大图像

我的目标是，使用某种脚本使外部电视保持静态，电视中的web内容将在不重新加载最外部电视的情况下转换

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

我已经画好了所有的图片并进行了切片，现在我所需要的就是找到我要寻找的图片的确切方向

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

库珀·里德

用

创建单独的HTML页面，该页面只包含电视中所需内容的HTML

用于在不刷新页面的情况下获取页面的HTML

e、 g.您的“单个”图像位于ID为“rightframe”的

中。因此，当单击rightframe时，您可能希望获取名为single.html的页面的html，并将其放入电视中（假设您的

或

具有代码的

具有ID
内容
）：

编辑：对于滑动部分，必须并排创建两个单独的表/div，一个用于当前页面，另一个用于正在加载的页面。然后，您可以使用类似Slidy的jQuery插件在它们之间进行转换

就我个人而言，如果你能在加载页面时在电视上放一个电视白噪声的动画GIF，那会酷得多：）
下面的内容：
编辑5:（显示添加内容。）


编辑4：

此演示包括平移到特定帧

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);
    }
});

var h=$（'.clickable div'）.height（）//单个内容DIV的高度
var divCount=0；
$（'.clickable div'）。每个（函数（）{divCount++；}）//计算内容div的数量
$（'.pan'）。单击（函数（e）{
e、 preventDefault（）；//防止默认操作（共

好的，请查看此演示。单击电视右侧（您可以在其中放置一些按钮）将滚动屏幕中的内容。当您到达最后一个内容部分时，下一次单击将返回到第一个内容部分。我将内容分层，以便背景div滚动到电视图像后面，内容滚动到上面（所以你可以点击它。这里有一些其他的技巧，但是仔细看一下，你应该会有这个想法


编辑2：（单击电视以查看过渡。它具有内容div，而不仅仅是背景图像）

编辑：查看此演示：


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

然后，您可以添加一个背景图像，并使用jQuery设置该图像的动画，以滑入您想要显示的部分

我*个人不会使用任何切片，这是一种老式的技术，适用于大多数人没有高速连接的情况。
嘿，非常感谢，这真的很有帮助，我希望最终在每台电视中都有一个gif，它是白噪声，直到你鼠标移过，然后它将成为电视节目的快速gif：）您能否详细说明如何并排创建两个单独的表/div？这必须在同一个html文件中，还是可以让它链接到一个单独的html文件？您能否告诉我如何初始化第一个内容，使我能够单击链接#“rightframe”？您的最后一个问题：在您的html
部分，放置
$（function（）{**YOUR CODE HERE**}）；，$（function（）{}）；是一个特殊的jQuery构造，它说“在加载窗口时执行此操作”。第一个问题：这并不简单。如果你想使用白噪声，那就忘了滑动过渡，因为这只是一个工作量，你以后将不得不撤销。切割图像的最新技术是什么？我喜欢手绘我的网站，所以我一直认为这几天将其分割是一个好方法在需要时y剪切图像，如用于布局。查看我发布的演示链接。电视只是一个DIV中的一个图像集。我在Photoshop中剪切屏幕，并将其保存为.png，具有透明度，以便您可以通过屏幕区域查看。然后我使用了长背景（使用CSS设置）并使用了一点jQuery来设置背景位置的动画。@cooper查看我发布的第二个演示链接。向您展示了如何不仅使用背景图像，还使用内容div来实现这一点。这真是太好了。我是否可以将其与WaitingForTrain使用ajax的想法结合使用。在不刷新的情况下加载网页？@cooper Wh您将加载哪种内容？我认为这里不需要ajax，除非您有大量内容或非常大的文件大小。
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);
    }
});