用CSS3制作令人印象深刻的产品展示图片切换效果

最新推荐文章于 2023-06-05 21:35:44 发布

0307wgj

最新推荐文章于 2023-06-05 21:35:44 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/seo68/article/details/7480587

版权

用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>

        
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        
    </head>

    <body>

       <div id="impress" class="impress-not-supported">

           

       </div>

       <a id="arrowLeft" class="arrow"><</a>
       <a id="arrowRight" class="arrow">></a>

        
       <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绕指定轴（度）的元素;
    数据规模 - 放大或缩小幻灯片。

你可以看到下面的幻灯片的标记：

<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>


<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>


<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();
   });

});

到这里我们的产品展示完成了！

完成了！

产品和登陆页，专题展示和一些别的，你甚至可以变成图片库，都可以使用这个例子。