灵武网站建设服务:使用css和jQuery创建光滑的滑动框
灵武网站建设服务在这里,我们将创建一些用jQuery和一些CSS构建的滑动框效果。在本教程中,我将详细解释每一行使用过的代码,希望您能轻松地理解它。
如果您灵武网站建设服务想跟随源文件,可以单击此处(*.zip存档)下载它们。您也可以在这里查看演示。
步骤1:准备HTML、CSS和JS文件
- 创建一个根文件夹并为其选择一个名称,我的是SlidingBox。
- 在根文件夹中创建一个HTML文件和名称index.html、一个CSS文件和一个js文件。
- 而不是创建一个文件夹并将其命名为图像(此文件夹将包含所需的图像)。
现在我们准备好了第二步。
步骤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);}); });
就这样!
感谢您收听本教程。我希望你喜欢它,并能一步地遵循它。如果你一切都做对了,你就应该得到这样的结果。