用jQuery完成页面滑出盒的结尾

有一天，我在《纽约时报》上读到一篇文章，我真的很喜欢阅读文章最后一部分的那个盒子。它显示了同一类别的另一篇文章，我认为它可能是任何博客或网站的有趣的东西。

这个想法是在页面中有一个元素(这里是最后一段)，从而触发该框出现。例如，你可以用它来显示相关文章或解释你在文章中使用的某个术语。

好的,让我们开始吧!

标记

首先，我们需要一个带有id“last”的页面的某个段落:

Some paragraph text

然后，我们需要下面的html框:

More in Technology & Science (4 of 23 articles)

The Social Impact of Scientific Research and new Technologies

Read More »

类“close”的链接元素将给用户关闭该框的选项，它不会再次出现。

CSS

好的，让我们以纽约时报的方式给这个盒子一些风格:

#slidebox{ width:400px; height:100px; padding:10px; background-color:#fff; border-top:3px solid #E28409; position:fixed; bottom:0px; right:-430px; -moz-box-shadow:-2px 0px 5px #aaa; -webkit-box-shadow:-2px 0px 5px #aaa; box-shadow:-2px 0px 5px #aaa; }

我们给这个盒子一个固定的位置，让它跟随用户滚动。初始的正确值将使盒子被隐藏;我们会用jQuery来实现。

这个盒子将会有一个很好的CSS3框阴影，而且不会在IE浏览器中运行(可能只有IE9除外)。

如果你想看看如何创建一个阴影:box - shadow，这是CSS3最好的新特性之一

文本元素和更多的链接将有以下风格:

#slidebox p, a.more{ font-size:11px; text-transform:uppercase; font-family: Arial,Helvetica,sans-serif; letter-spacing:1px; color:#555; } a.more{ cursor:pointer; color:#E28409; } a.more:hover{ text-decoration:underline; } #slidebox h2{ color:#E28409; font-size:18px; margin:10px 20px 10px 0px; }

您可能想要调整这些元素的样式以适应您的网站。小关闭交叉的风格看起来如下:

a.close{ background:transparent url(../images/close.gif) no-repeat top left; width:13px; height:13px; position:absolute; cursor:pointer; top:10px; right:10px; } a.close:hover{ background-position:0px -13px; }

现在，让我们为效果添加一些JavaScript。

JavaScript

首先，我们将jQuery库包含在body结束标签之前:

然后我们将添加两个函数。一个是确定我们是否在滚动时到达了触发器元素，如果是这样，则使这个框滑出。当点击小的关闭十字时，另一个函数使这个方框消失。在jQuery库和正文结束标记之前添加这个内容:

这是它!我希望你喜欢这个教程，并且可以使用它!

尽情享受吧!