展示柜是向访问者展示您最近添加到您的投资组合或展示最新产品或文章的好方法。 许多站点使用此技术将信息塞入某个区域，以使访问者不会错过您的消息。
本教程将向您展示如何利用jQuery创建这样的展示柜。
jQuery使动画变得容易。 本教程将指导您完成HTML，CSS和关联的jQuery代码的设置，以创建展示柜。
HTML
视口div是我们希望显示给用户的内容的窗口。 稍后我们将使用CSS来确保视口仅显示所需的内容。 在div内，我们将封闭另外两个div； 一个用于各部分，另一个用于标签，当视口滚动到视图中时将弹出标签。 这两个都将在另一个div内：scrollable，这是我们用来将其中所有内容滚动到视图中的元素。 div部分将包含另外四个div，分别代表我们的部分，标签div将包含另外四个div，分别代表我们的标签。 最后，我们将创建一行简单的按钮，以便我们可以选择将某个部分滚动到视图中。
<div id="viewport">
<div id="scrollable">
<div id="sections">
<div id="section1" class="section">
<h1>Uluru</h1>
</div>
<div id="section2" class="section">
<h1>The Eiffel Tower</h1>
</div>
<div id="section3" class="section">
<h1>Empire State Building</h1>
</div>
<div id="section4" class="section">
<h1>The Great Wall of China</h1>
</div>
</div>
<div id="label">
<div class="label">
<p>Also known as Ayre's rock</p>
</div>
<div class="label">
<p>In the world's most romantic city</p>
</div>
<div class="label">
<p>Site of the last hour of King Kong's life</p>
</div>
<div class="label">
<p>This can be seen from space</p>
</div>
</div>
</div>
</div>
<div id="menu">
<div id="scroll1" class="button"></div>
<div id="scroll2" class="button"></div>
<div id="scroll3" class="button"></div>
<div id="scroll4" class="button"></div>
</div>CSS
我们将从视口本身开始。 我们要设置视口的尺寸，确保其中的任何内容都不会流出，我们将添加一个5px的粗实线。
#viewport
{
overflow:hidden;
border:5px solid;
height:300px;
width:600px;
}这些部分和标签div非常相似。 宽度将由您要分割的部分数乘以每个部分的宽度来确定。 在此示例中，我们的部分为600px宽，我们将使用其中的四个，因此#content和#label div的宽度为2400px（4 x 600px）。 宽度和高度是我们为div分区设置样式所需的全部。
#sections
{
width:2400px;
height:300px;
}标签div略有不同，因为当我们单击按钮时我们要求它滑出视图，并且它不必为300px，因为当它进入视图时，这会遮盖整个视口。 我们将其设置为100px高。 我们还需要确保标签在首次加载页面时出现，因此我们将bottom属性设置为100px，以使其在其所驻留的div底部上方100px处出现。 我们还需要将位置设置为相对，以便可以使用bottom属性。
#label
{
position:relative;
width:2400px;
height:100px;
bottom:100px;
} 内容和标签都包裹在另一个标识为可滚动的div中，这将是我们用来在其中移动所有内容的元素。 这需要设置为内容div的尺寸，因为它包含所有将在视口中可见的内容。 我们需要设置相对位置，因为我们将通过jQuery利用left属性来将内容滚动到视图中。
现在，我们将对各个部分的div进行样式化以达到我们的目的。 每个分类为div的div都需要彼此左移，否则内容将从包含div的内容中流出并进入下一行。 我们需要它们彼此相邻，以便当我们更改#scrollable的左侧位置时，将看到相关部分。 我们的部分将为600px宽x 300px高，但我们将添加一些10px的填充，以便所有内容都不会与视口的侧面齐平。 我们的高度和宽度将需要减少20px，以适应此情况。
.section
{
float:left;
padding:10px;
width:580px;
height:280px;
}各个标签div的宽度为600px，高度为100px，填充值为10px。 我们还需要将它们向左浮动，以使它们彼此相邻出现并且不会堆叠在一起。 我们还将标签的背景色设置为灰色，将文本的颜色设置为白色。
.label
{
float:left;
padding:10px;
height:80px;
width:580px;
background-color:#777;
color:white;
}我们将一些图像添加到背景中。 我使用了来自Wikimedia Commons的一些图像，将它们缩小为600px x 300px，并将它们设置为背景图像。
#section1
{
background-image:url('../image/uluru.jpg');
}
#section2
{
background-image:url('../image/eiffeltower.jpg');
}
#section3
{
background-image:url('../image/empirestate.jpg');
}
#section4
{
background-image:url('../image/greatwall.jpg');
}我们需要做的最后一个样式是菜单部分，它将允许我们滚动到各个部分。 您可以按照任何想要的方式进行操作，但在本示例中，我们将使用一些简单的div，将div设置为30px x 30px，背景颜色为灰色，并通过设置5px的边距将其彼此隔开5px。 这些按钮将全部包装在另一个div中，我们不需要设置样式，但包含所有按钮。
.button
{
height:30px;
width:30px;
background-color:#777;
float:left;
margin:5px;
}这样就完成了所有的CSS，现在我们准备好使用jQuery。
jQuery的
排队事件
首先，我们将研究展示小工具“ widget”的作用。 当我们单击一个按钮时，我们希望我们的标签从视图中下拉出来，新的部分出现在视图中，然后再次弹出该标签。 我们将滚动可滚动的div，因此我们只需要担心滚动它–其中的所有内容都会被拖动。
因此，事件的顺序为：
- 隐藏标签
- 滚动视口
- 显示标签
有多种方法可以实现此功能，但我们将介绍jQuery提供的队列功能。 排队是将事件添加到对象，然后使它们出队或执行它们的原理。 我们将创建一个函数，该函数将三个函数排队，以隐藏标签，滚动视口然后显示标签。 排队事件需要将事件附加到DOM中的对象。 您可以创建自定义队列，或者，如果未指定，则可以使用默认队列（称为“ fx”）。 在fx中将事件排队后，第一个函数将执行。 但是，需要显式调用下一个函数才能执行。
主要功能导航将设置排队的事件。 我们还将添加一个清除队列的功能，以便事件不会备份，这将导致队列变大并且需要更长的时间才能完成。 如果没有参数，则clearQueue（）将清除默认fx队列上的事件。
function navigate(position)
{
$('#scrollable').clearQueue();
$('#scrollable').queue(hideLabel);
$('#scrollable').queue(scroll(position));
$('#scrollable').queue(showLabel);
}动画元素
接下来，我们将使用animate（）方法定义这些函数，并利用回调使下一个事件出队。
要隐藏标签，我们需要将标签的底部位置移至0px，使其从视口中消失，然后指定这需要四分之一秒或250毫秒。 我们还需要确保执行队列中的下一个事件，因此我们创建了一个内联函数以使下一个事件出队。
function hideLabel()
{
$('#label').animate(
{bottom:'0px'},
250,
null,
function()
{
$('#scrollable').dequeue();
});
}接下来，我们需要将可滚动div滚动到相关位置。 由于每个部分的像素均为600像素，因此我们需要将每个部分的div移至左侧600像素。 要在视口中显示第一部分，left属性必须为0px，这是加载页面时的默认状态；要查看第二部分，我们需要将left设置为-600px，第三部分； -1200px等。 此过渡将花费500毫秒或半秒。 我们还需要使队列中的下一个事件出队，因此再次创建一个匿名函数来执行此操作：
function scroll(position)
{
position = position + "px";
$('#scrollable').animate(
{left:position},
500,
null,
function()
{
$('#scrollable').dequeue();
});
}最后一个函数需要再次显示标签，因此我们将底部css属性设置回100px，并确保此过程持续250毫秒以上。 我们不需要触发队列中的下一个事件，因为这是序列中的最后一个。
function showLabel()
{
$('#label').animate(
{bottom:'100px'},
250);
}绑定事件
我们需要做的下一件事是将Navigation事件附加到页面上的相关元素。 在我们的例子中，这就是我们前面定义的四个按钮。 附加这些事件的最好方法是通过jQuery完成。 在执行此操作之前，文档需要完全加载，因此我们使用ready（）函数来包装代码。
我们使用jQuery的click函数来实例化一个匿名函数，该匿名函数又以适当的position值触发导航函数。
$(document).ready(function()
{
$('#scroll1').click(function()
{
navigate(0);
}
);
$('#scroll2').click(function()
{
navigate('-600');
}
);
$('#scroll3').click(function()
{
navigate('-1200');
}
);
$('#scroll4').click(function()
{
navigate('-1800');
}
);
}
);因此，这就是创建滚动展示“ widget”所需的全部，但是我们将仅添加几行jQuery以为标签添加一些不透明度，并在鼠标悬停在标签上时使其淡入，而在标签上时使其淡出。鼠标移出它。 可以将此代码简单地添加到ready（）函数中，以确保在文档完全加载之前不执行该代码。 我们将绑定该事件，因为如您稍后将看到的，在某些情况下我们将需要取消绑定该事件。 淡入和淡出两个功能定义为：
function fadeOut()
{
$('#label').stop().fadeTo(250,0.7);
}
function fadeIn()
{
$('#label').stop().fadeTo(250,1);
}我们还将添加一段代码，将不透明度最初设置为0.7。 这就是jQuery真正擅长的地方。 具有css opacity属性的浏览器之间存在许多不一致之处，但我们不必为此担心。 我们需要做的就是指定W3C标准不透明度属性。 jQuery完成其余的工作。 同样，可以将其添加到ready（）函数中。
$('#label').css("opacity", "0.7");整理
您会注意到，使用按钮选择新部分时，如果将鼠标快速移至标签，动画将突然停止。 这是因为我们已将事件绑定到label元素，并使用stop（）来阻止事件排队并使UI无法使用。 滚动完成后，我们可以分离此事件并重新附加它，以免造成中断。 在导航功能中，我们将在创建队列之前取消绑定事件：
function navigate(position)
{
$('.label').unbind('mouseover', fadeIn);
$('.label').unbind('mouseout', fadeOut);
$('#scrollable').clearQueue();
$('#scrollable').queue(hideLabel);
$('#scrollable').queue(scroll(position));
$('#scrollable').queue(showLabel);
}现在事件已分离，如果鼠标进入标签区域，动画将不会停止。 所有动画制作完成后，我们将需要重新附加它。 这样做的明智之举是在showLabel（）函数中调用匿名回调函数，因为这是队列中的最后一个，并且仅在完成后才执行。
function showLabel()
{
$('#label').animate(
{bottom:'100px'},
250,
function()
{
$('.label').bind('mouseover', fadeIn);
$('.label').bind('mouseout', fadeOut);
});
}我们要做的最后一件事是，如果我们试图选择一个已经存在的部分，则确保没有动画被调用。 我们可以通过字符串变量来做到这一点，该变量指示我们所在的页面，然后在navigation（）函数中对其进行测试，以确定是否应执行转换。 我们将创建一个超出任何函数范围的变量，以便任何地方都可以访问它，称为currentPage，并将其设置为1。 我们将更改navigation（）函数以使用第二个参数； 页面，该页面将通知函数正在调用哪个部分。 可以针对currentPage测试此值，以查看动画是否应该发生。 如果当前页面没有被调用，我们可以设置动画，然后将currentPage设置为被调用的页面。 navigation（）函数应更新为此（请注意，我们在此上方声明了currentPage变量）：
var currentPage;
function navigate(position, page)
{
if(page != currentPage)
{
currentPage = page;
$('.label').unbind('mouseover', fadeIn);
$('.label').unbind('mouseout', fadeOut);
$('#scrollable').clearQueue();
$('#scrollable').queue(hideLabel);
$('#scrollable').queue(scroll(position));
$('#scrollable').queue(showLabel);
}
}还需要更改与按钮的绑定，以便将页面值发送到navigation（）：
$(document).ready(function()
{
$('#scroll1').click(function()
{
navigate(0,1);
}
);
$('#scroll2').click(function()
{
navigate('-600',2);
}
);
$('#scroll3').click(function()
{
navigate('-1200',3);
}
);
$('#scroll4').click(function()
{
navigate('-1800',4);
}
);
$('.label').bind('mouseover', fadeIn);
$('.label').bind('mouseout', fadeOut);
$('#label').css("opacity", "0.7");
}
);摘要
在本教程中，您学习了如何创建简单的展示窗口小部件。 您使用了HTML和CSS对其进行样式设置，最重要的是使用了overflow属性来限制视口的视图。 使用jQuery对事件进行排队和出队可以使您异步执行事件，而绑定和取消绑定事件可以使您对UI施加更多控制，以防止不必要的动画。 可以轻松扩展此示例以创建更多部分。 您只需要确保将＃content，＃scrollable和#label div的宽度扩展到包括所需的额外部分（记住-每部分600像素），当然，就可以在#content div和#labels div中的相关标签。
您可以在此处下载本教程的源代码。
From: https://www.sitepoint.com/how-to-create-a-showcase-with-jquery/
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
