个人练习小览---《百度音乐官网仿站》

最新推荐文章于 2018-07-15 10:28:01 发布

Finca_huang

最新推荐文章于 2018-07-15 10:28:01 发布

阅读量180

点赞数

分类专栏：个人练习文章标签： HTML

本文链接：https://blog.csdn.net/qq_35281096/article/details/81041736

版权

个人练习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

这次是网页端的，结合一滚一屏和animate制作了一个打开来就进行动画展示的网站，纯粹观赏性的。

第一次用上了bootstrap

完成时间2016年12月份

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <link rel="stylesheet" href="css/animate.css">

    <title>百度音乐</title>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
</head>
<body>
     <header id="header">
         <div class="main-nav-wrapper">
             <div class="main-nav">
                 <a class="logo"><img src="images/logo.png"></a>
                 <div class="nav">
                     <div class="navbar-item">
                         <a href="#">
                             <span class="inner">手机版</span>
                         </a>
                     </div>
                     <div class="nav-item actived">
                         <a href="#">
                             <span class="inner">PAD版</span>
                         </a>
                     </div>
                     <div class="nav-item">
                         <a href="#">
                             <span class="inner">PC版</span>
                         </a>
                     </div>
                     <div class="nav-item">
                         <a href="#">
                             <span class="inner">社区</span>
                             <!--<i class="iconfont new-func"></i>-->
                         </a>
                     </div>
                 </div>
             </div>
         </div>
     </header>
     <div class="guding">
         <img src="images/qrcode.png" title="二维码" alt="二维码">
         <p class="qrcode-text">扫描二维码下载</p>
     </div>
     <div id="fullpage">
         <div class="section page01">
             <div class="pic">
                <div class="pic_text"></div>
                <div class="pic1"></div>
                <div class="pic2"></div>
             </div>
         </div>
         <div class="section page02">
             <div class="pic">
                <div class="pic3"></div>
                <div class="pic4"></div>
                <div class="pic5"></div>
                <div class="pic6"></div>
                <div class="pic7"></div>
                <div class="pic8"></div>
                <div class="pic9"></div>
                <div class="pic10"></div>
                <div class="pic11"></div>
             </div>
         </div>
         <div class="section page03">
             <div class="pic">
                 <div class="pic12"></div>
                 <div class="pic13"></div>
                 <div class="pic14"></div>
             </div>

         </div>
         <div class="section page04">
             <div class="pic">
                 <div class="pic15">
                     <div class="pic15_1"></div>
                     <div class="pic15_2"></div>
                 </div>
                 <div class="pic16"></div>
             </div>
         </div>
         <div class="section page05">
             <div class="pic">
                 <div class="pic17"></div>
                 <div class="pic18"></div>
             </div>
         </div>
         <div class="section page06">
             <div class="pic">
                 <div class="pic19"></div>
                 <div class="pic20">
                     <img src="images/ipad-qr-code.png" title="二维码" alt="二维码">
                     <p class="qrcode-text">扫描二维码下载</p>
                 </div>
             </div>
         </div>
     </div>



     <script src="js/jquery.min.js"></script>
     <script src="js/jquery.fullPage.js"></script>

     <script>
         $(document).ready(function(){
             $('#fullpage').fullpage({
                 verticalCentered:false,
                 navigation:false,
                 navigationPosition:"left",
                 slidesNavigation:false,
                 afterLoad:function (anchorLink,index) {

                     if(index === 1){
                         $(".page01 .pic1").addClass("animated fadeIn wow")
                         $(".page01 .pic2").addClass("animated fadeInLeft wow")
                     }
                     else if (index === 2)
                     {
                         $(".page02 .pic").addClass("animated fadeInRight wow")
                     }
                     else if (index === 3)
                     {
                         $(".page03 .pic").addClass("animated fadeInUp wow")
                     }
                     else if (index === 4)
                     {
                         $(".page04 .pic15").addClass("animated fadeInLeft wow")
                         $(".page04 .pic16").addClass("animated fadeInRight wow")
                     }
                     else if (index === 5)
                     {
                         $(".page05 .pic17").addClass("animated fadeIn wow")
                         $(".page05 .pic18").addClass("animated fadeIn wow")
                     }
                     else if (index === 6)
                     {
                         $(".page06 .pic20").addClass("animated bounce wow")
                     }
                 }

             });

         });
     </script>
</body>
</html>

图片展示还是蛮好看的，不知道这里博客能不能展示动图，所以我这里就只展示静态图片了。

这里图片的元素都是分开来的，可以看到动态效果的。

Finca_huang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
个人练习小览---《百度音乐官网仿站》

这次是网页端的，结合一滚一屏和animate制作了一个打开来就进行动画展示的网站，纯粹观赏性的。第一次用上了bootstrap完成时间2016年12月份index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&quot
复制链接

扫一扫