用CSS3制作令人印象深刻的产品展示图片切换效果
用CSS3制作令人印象深刻的产品展示图片切换效果
产品页面是在您的网站上的任何页面展示产品。它必须描述产品的特点，给点截图展示。当然，这是你让访问者对你的产品感兴趣的地方，但它越来越难以抓住他们的注意力源头何在。幸运的是，一个新的紧凑的JavaScript库，可以帮助你做出轰动用户的页面。
impress.js是一个小的，独立的库，可以很容易地配合高级CSS3设计抢眼的效果。但是，如果我们用impress.js演示以外的东西？这是今天我们今天所要做的 - 我们将调味一些神奇的CSS3与一个普通的老产品页面！
HTML文件
我们开始用一个简单的HTML5的文件，这将是今天的例子骨干。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="impress" class="impress-not-supported">
<!-- The Slides Will Go Here -->
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
<!-- JavaScript includes -->
<script src="http://web0752.com/js/jquery-1.7.1.min.js"></script>
<script src="http://web0752.com/assets/js/impress.js"></script>
<script src="http://web0752.com/assets/js/script.js"></script>
</body>
</html>
这里没有什么不寻常。头部包含谷歌Webfonts，加上我们的主要样式表（我们将回到它在下一节）还有一些js源文件。
这#impress div将放幻灯片。ID是必需的，以确保impress.js对div的识别。在此之后，我们有箭头，启动幻灯片切换。
页面底部放我们的JavaScript源文件。impress.js是独立的，不需要jQuery的工作，但我们必须把script.js包含进来。
我们展示的幻灯片，每一个都包含三个要素 - 一个标题，一段文字，一个智能手机的形象。我们为每张幻灯片设独特的定位。宣传片在这个例子中的图像和文字，是来自Google的Nexus网站。
使用impress.js
有这个小js库，我们可以顺利创建CSS3图片切换。要做到这一点，我们有如何引导impress.js启动图片切换。这是很容易做到 - 我们将使用上一步div的数据属性。这些属性转化为真正的CSS3转换库，根据当前的浏览器，并影响到幻灯片。
impress.js支持一些属性：
数据-X-Y数据，数据-Z将在三维空间中的屏幕上移动的幻灯片;
数据，数据移位-Y旋转，数据移位-X绕指定轴（度）的元素;
数据规模 - 放大或缩小幻灯片。
你可以看到下面的幻灯片的标记：
<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br />
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect & Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes ..</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and..</p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
幻灯片开始时，impress.js将弥补这些转变，并应用反向规则＃impress 顺利切换。当然，这个代价是你必须手动调整为每张幻灯片的数据属性，f才能得到最好的结果。
CSS文件
想让它工作，我们将不得不编写新CSS规则。第一步是风格演示容器，并宣布为默认样式的幻灯片元素。
assets/css/style.css
/*----------------------------
Styling the presentation
-----------------------------*/
#impress:not(.impress-not-supported) .step{
opacity:0.4;
}
#impress .step{
width:700px;
height: 600px;
position:relative;
margin:0 auto;
-moz-transition:1s opacity;
-webkit-transition:1s opacity;
transition:1s opacity;
}
#impress .step.active{
opacity:1;
}
#impress h2{
font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
color:#444648;
position:absolute;
z-index:10;
}
#impress p{
font: normal 18px/1.3 'Open Sans', sans-serif;
color:#27333f;
position:absolute;
z-index:10;
}
#impress img{
position:absolute;
z-index:1;
}
正如你可以看到在上面的规则，并在本教程开头的HTML片段，＃impress是一个不支持类的容器。如果当前的浏览器只支持库,要成功运行所需的功能的类镜被删除。
现在我们需要的个人风格的幻灯片。我把只包含第一张幻灯片的类包含进来，你可以在assets/ CSS /styles.css找到。
/*----------------------------
Slide 1 - Intro
-----------------------------*/
#impress #intro{
width: 500px;
}
#intro h2{
text-align: center;
width: 100%;
}
#intro p{
font-size: 22px;
left: 290px;
line-height: 1.6;
top: 220px;
white-space: nowrap;
}
#intro img{
top: 120px;
}
jQuery文件
我们需要调用的名称相同的方法来初始化的印记库。这也将返回一个新的对象，显示上一个/下一个幻灯片的方法。
script.js
$(function(){
var imp = impress();
$('#arrowLeft').click(function(e){
imp.prev();
e.preventDefault();
});
$('#arrowRight').click(function(e){
imp.next();
e.preventDefault();
});
});
到这里我们的产品展示完成了！
完成了！
产品和登陆页，专题展示和一些别的，你甚至可以变成图片库，都可以使用这个例子。