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

灵武网站建设服务

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

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

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

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

就这样!

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