灵武网站建设服务:使用css和jQuery创建光滑的滑动框

在这里，我们将创建一些用jQuery和一些CSS构建的滑动框效果。在本教程中，我将详细解释每一行使用过的代码，希望您能轻松地理解它。

如果您灵武网站建设服务想跟随源文件，可以单击此处(*.zip存档)下载它们。您也可以在这里查看演示。

步骤1：准备HTML、CSS和JS文件

1. 创建一个根文件夹并为其选择一个名称，我的是SlidingBox。
2. 在根文件夹中创建一个HTML文件和名称index.html、一个CSS文件和一个js文件。
3. 而不是创建一个文件夹并将其命名为图像(此文件夹将包含所需的图像)。

现在我们准备好了第二步。

步骤2：准备html文件结构

首先，我们需要将我们在前一步中创建的文件包含到HTML的标题部分中。

让我们从CSS文件开始：

现在，我们将从Google的Ajax库中附加最新版本的jQuery：

现在最后一件事是我们的JavaScript文件：

现在，我们的标题应该如下所示：

现在我们将从我们的身体要素开始：

我们将创建6个div，因为我们将应用6个不同的动画。

解释:

我使用了6个div和不同的id(每个id表示动画开始的位置)和同一个类(环绕类)，这样我们就可以用CSS向每个类添加一些样式。每个div包含两个图像：正面和背面图像。下面是我使用的图像：

Front.jpg和back.jpg。

第3步：让我们添加一些CSS！

现在转到您的CSS文件，我们将从WORE类开始：

.wrap
{
  float:left;
  position:relative;
  width:300px;
  height:150px;
  margin:20px;
  overflow:hidden;
}

为了让我们的图像下一个位置，另一个，我们必须使用浮动左技术。我使用了20 px的边距来在我们的图像之间留出一些空间，然后我将宽度设置为300 灵武网站建设服务px，高度设置为150 px。此外，您必须将该元素的位置设置为相对溢出和隐藏溢出，因此任何低于或高于我们放置的高度的内容都将被隐藏。

图像CSS：

img
{
 top:0;
 left:0;
 position:absolute;
}

我灵武网站建设服务们将图像设置为绝对图像，其顶部和左边位置设置为0。

步骤4：jQuery

我们将从jQuery的主要功能开始：

$(document).ready(function(){
 // animation code will be written here
});

现在，我们将为第一个div(#左上角)添加动画：

$(document).ready(function(){
$('#top-left').hover(function(){
$(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);
 },function(){
$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 });

解释:
When the top-left div is hovered ( in this case $(this) refers to #top-left ) we are going to seek for the front class situated in this div and we’re going to animate it ( We have to set the top to 150px and the left to 300px so our front image can move with a nice effect), the 500 refers to duration. And when the div is not hovered we’re going to set back the top and left positions to 0.

要获得其他效果，你灵武网站建设服务必须改变左边和顶部的位置。

以下是我所使用的所有效果：

$(document).ready(function(){
 $('#top-left').hover(function(){
 $(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);
}, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#top-center').hover(function(){
 $(this).children('.front').stop().animate({'top' : '150px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#bottom-center').hover(function(){
 $(this).children('.front').stop().animate({'top' : '-150px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#left').hover(function(){
 $(this).children('.front').stop().animate({'left' : '300px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#right').hover(function(){
 $(this).children('.front').stop().animate({'left' : '-300px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#top-right').hover(function(){
 $(this).children('.front').stop().animate({'top' : '150px','left' : '-300px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
});

就这样！

感谢您收听本教程。我希望你喜欢它，并能一步地遵循它。如果你一切都做对了，你就应该得到这样的结果。