requireJS、r.js基础知识问答

一、问答

（一）、如下requirejs配置中, baseUrl 有什么作用？以什么作为基准? paths 的作用和用法是什么?

        requirejs.config({
          baseUrl: "src/js",  
          paths: {
            'jquery': 'lib/bower_components/jquery/dist/jquery.min'
          }
        });

baseUrl的作用是设置基路径（参照路径），例如上面的例子中就是以src/js路径作为参照路径，然后在该目录下的lib/bower_components/jquery/dist/文件夹中放有jquery.min.js的文件；
paths的作用是指定各个模块的加载路径，当然该路径也可以是网址。用法就是前面是一个模块名，后面是一个路径或网址。

例如：

　　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

或者：

　　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

（二）、如下 r.js 的打包配置中 baseUrl 是什么? name 是什么

({
    baseUrl: "./src/js",
    paths: {
        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"
})

baseUrl 是指设置当前配置文件下的src/js路径为基准路径；
name是指模块的入口文件，即其在当前配置文件同一目录的main.js。

需要指出的是：
1、r.js的配置文件中的baseUrl的路径是相对其自身的，而
requirejs配置文件中的baseUrl的路径是相对html文件的；
2、这两个配置文件中的索引的文件必须是同一个（当然文件路径名不一定相同）。

二、代码

（一）、使用 requirejs 完善任务15，包括如下功能：

1、首屏大图为全屏轮播
2、有回到顶部功能
3、PORTFOLIO 使用瀑布流布局（图片高度不一），下部有加载更多按钮，
4、点击加载更多会加载更多数据(数据在后端 mock)
5、About 每个时间区块默认隐藏，曝光渐变展示
6、使用 r.js 打包应用

html源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-2</title>
    <link rel="stylesheet" href="./css/font-awesome/css/font-awesome.css">
    <style>
        html,body,h2,ul,li{
            margin: 0px;
            padding: 0px;
            box-sizing:border-box;

        }

        body{
            position: relative;
        }
        a{
            text-decoration: none;
        }
        .ct{
            margin: 0px auto;
            width: 1140px;

        }
        h1,h2,h3,h4,h5,h6{
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 700;
            color: #333;
        }
        ul,li{
            list-style: none;
        }

        .ct-nav{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 70px;
            line-height: 70px;
            background-color: rgba(0,0,0,0.3);
            width: 100%;
            z-index: 99;
            box-shadow:0 0 5px 2px rgba(0, 0, 0, 0.8);

        }
        .ct-nav>a{

            color: #fed136;
            font-family:"Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
            font-size: 2em;
            float: left;
            width: 220px;
            padding-left: 100px;
            padding-right: 420px;

        }
        .ct-nav>.nav>li{
            display: inline-block;
            vertical-align: middle;
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 400;
            padding-right: 10px;
            padding-left: 10px;


        }
        .nav>li>a{
            color: #fff;
            padding: 10px;
            border-radius: 20px;


        }
        .nav>li>a:hover{
            background-color: #fed136;


        }

        .ct-nav>ul.nav{
            display: inline-block;
            vertical-align: middle;
            float: right;
            width: 600px;

        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .ct-services{
            padding-top: 150px;
            padding-bottom: 150px;
            text-align: center;
        }

        .services>li{
            display: inline-block;
            vertical-align: middle;
            width: 350px;
            margin: 50px 10px;
        }
        .fa-shopping-cart,
        .fa-laptop,
        .fa-lock{
            color: #fff;

        }
        .fa-circle{
            color: #fed136;

        }
        .ct-services>h1{
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 700;
            font-size: 40px;
        }

        .services>li>h3{
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 700;
            line-height:1.1;

        }
        .services>li>p{
            color: #777;
            font-size: 14px;
            line-height: 1.75;
            font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;

        }
        .ct-portfolio{
            padding-top: 150px;
            padding-bottom: 150px;
            text-align: center;

        }

        .portfolio>li{
            display: inline-block;
            vertical-align: middle;
            margin: 20px 10px;
            width: 350px;
            position: relative;

        }
        .portfolio-pic{
            width: 350px;
            height: 250px;

        }
        .cover-pic{
            position: absolute;
            background-color: rgba(254,209,54,.9);
            width: 350px;
            height: 250px;
            opacity: 0;
        }
        .fa-plus{
            position: absolute;
            color: #fff;
            top: 104px;
            left: 156px;

        }
        .cover-pic:hover{
            opacity: 1;
        }
        .portfolio>li>h1{
            font-size: 18px;
        }
        .portfolio>li>h3{
            color: #777;
            font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-style: italic;
            font-size: 16px;

        }
        .ct-about{
            padding: 150px 0px;
            text-align: center;
            position: relative;

        }



        .wrap-about1{
            margin-right: 750px;
            text-align: right;
            position: relative;
            height: 200px;
            margin-top: 50px;
            margin-bottom: 150px;


        }
        .wrap-about1>img{
            position: absolute;
            border-radius:50%;
            border: 10px solid #eee;
            left: 460px;
            top: 50%;
            margin-top: -100px;

        }
        .wrap-about2{
            margin-left: 750px;
            text-align: left;
            position: relative;
            height: 200px;
            margin-top: 50px;
            margin-bottom: 150px;


        }
        .wrap-about2>img{
            position: absolute;
            border-radius:50%;
            border: 10px solid #eee;
            top: 50%;
            left: -50%;
            margin-top: -100px;
            margin-left: -95px;


        }
        .about-over{
            position: absolute;
            border-radius:50%;
            border: 10px solid #eee;
            left: 460px;
            top: 50%;
            margin-top: -100px;
            background-color: #fed136;
            width: 220px;
            height: 220px;




        }
        .about-over>h2{
            margin: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            padding: 70px 40px;
            line-height: 100%;
            color: #fff;
            font-size: 25px;



        }
        .center-line{
            position: absolute;
            width: 50%;
            height: 1400px;
            top: 300px;
            left: 50%;
            border-left: 2px solid #eee;
            z-index: -1;
            margin-left: -2px;
        }
        .ct-about p{
            font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
            color: #777;
            font-size: 14px;
            line-height: 1.75;
        }
        .ct-team{
            padding-top: 100px;
            padding-bottom: 150px;
            text-align: center;
        }
        .team>li{
            float: left;
            width: 380px;
        }
        .team>li>img{
            border-radius: 50%;
            width: 200px;
            height: 200px;
        }

        .team>li .fa{
            color: #fff;
        }

        .team>li .fa-circle{
            color: #222;
        }
        .team{
            margin: 50px 0px;
        }

        .ct-team,.ct-contact p{
            font-size: 14px;
            line-height: 1.75;
            font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
            color: #777;
        }
        .ct-team>p{
            font-size: 16px;
            width: 750px;
            margin: 0 auto;

        }
        .ct-friendly-link>a{
            float: left;
            width: 285px;
        }
        .ct-friendly-link>a>img{
            margin-top: 50px;
        }
        .contact-bg{
            margin:50px 0px;
            background: url(./img/map-image.png) center center no-repeat;
            background-size: cover;
            background-color: #222;
            padding: 150px 0px;
        }
        .ct-contact{
            text-align: center;
        }
        .ct-contact>h1{
            color: #fff;

        }
        .contact-input{
            display: block;
            width: 513px;
            padding: 20px;
            border-radius: 4px;
            color: #555;
            margin: 20px;
            border: 1px solid #ccc;
            font-size: 14px;
        }
        .contact-textarea{
            float: right;
            width: 513px;
            padding: 20px;
            height: 174px;
            border: 1px solid #ccc;
            color: #555;
            font-size: 14px;
            border-radius: 4px;
        }
        .contact-submit{
            background-color: #fed136;
            color: #fff;
            font-size: 18px;
            padding: 20px 40px;
            border-radius: 4px;
            font-style: 700;
            border-color: #fed136;
            cursor: pointer;

        }
        .contact-submit:hover{
            background-color: #fec503;
        }

        .ct-footer{
            text-align: center;
            margin-top: 20px;
            margin-bottom: 30px;

        }
        .footer>li{
            width: 380px;
            float: left;

        }
        .footer>li .fa{
            color: #fff;
        }

        .footer>li .fa-circle{
            color: #222;
        }
        .footer>li>span{
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            color: #333;
            line-height: 40px;
        }
        li.more-about>a{
            color: #fed136;
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            line-height: 40px;

        }
        li.more-about>a:hover{
            color: #fec503;
        }
        .ct>h3{
            font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 16px;
            font-style: italic;
            font-weight: 400;
            color: #777;

        }
        .portfolio-bg,
        .team-bg{
            background-color: #f7f7f7;
        }
        /* 首页轮播代码*/

        body,html,.wrap,.ct-bg{
            width: 100%;
            height: 100%;
        }
        .wrap{
            position: relative;
            overflow: hidden;

        }
        .ct-bg{
            position: absolute;

        }

        .ct-bg>li{
            float: left;
            height: 100%;
            width: 100%;
            text-align: center;
            position: relative;
        }
        .bg{
            background-image:url("./img/lunbo1.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            height: 100%;
            width: 100%;
            position: absolute;

        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }

        .ct-bg .ct-text{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .ct-text>h1{
            padding-bottom: 20px;
        }

        .ct-bottom{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .ct-bottom>li{
            border-bottom: 5px solid #555;
            float: left;
            cursor: pointer;
            width: 20px;
            margin: 0 5px;
            border-radius: 2px;
        }


        a.change{
            text-decoration: none;
            font-size: larger;
            font-weight: 900;
            background-color: #666;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            padding: 15px;
            width: 10px;
            height: 10px;
            line-height: 10px;
            border-radius: 25px;
            opacity: 0.7;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        a.pre{
            left: 50px;
        }
        a.next{
            right: 50px;
        }
        a.change:hover{
            background-color: #444;
        }
        .goTop{
            position: fixed;
            top: 80%;
            left: 90%;
            cursor: pointer;
            display: none;
            color: #fed136;
            opacity:0.8;
        }
        .goTop:hover{
            opacity:1;
            color: #fec503;
        }


        .hide{
            display: none;
        }
        .loadMore{
            background-color: #fed136;
            width: 130px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            font-size: 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 auto;
            padding:  10px ;
            font-weight: 700;
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        }
        .loadMore:hover{
            background-color: #fec503;
        }

        .portfolioLi{
            border: 1px solid #ccc;
            width: 265px;
            padding-bottom: 10px;
            margin: 10px;
            text-align: center;
            position: absolute;

        }
        .portfolioUl{
            position: relative;
        }
        .wrap-about{
            opacity: 0;
        }




    </style>

</head>
<body>
<div id="header">
    <div class="ct-nav clearfix">
        <ul class="nav">
            <li> <a href="#SERVICES">SERVICES</a> </li>
            <li> <a href="#PORTFOLIO">PORTFOLIO</a></li>
            <li> <a href="#ABOUT">ABOUT</a></li>
            <li> <a href="#TEAM">TEAM</a></li>
            <li> <a href="#CONTACT">CONTACT</a></li>
        </ul>
        <a href="#" class="logo">Start Bootstrap</a>
    </div>
</div>

<!--首页轮播代码  -->

<div class="firstPage wrap">
    <ul class="clearfix ct-bg">
        <li>
            <div class="bg" data-bg="./img/lunbo1.jpg"></div>
            <div class="ct-text">
                <h1>我是第一张</h1>
                <h3>我是标题</h3>
            </div>
        </li>
        <li>
            <div class="bg" data-bg="./img/lunbo2.jpg"></div>
            <div class="ct-text">
                <h1>我是第二张</h1>
                <h3>我是标题</h3>
            </div>
        </li>
        <li>
            <div class="bg" data-bg="./img/lunbo3.jpg"></div>
            <div class="ct-text">
                <h1>我是第三张</h1>
                <h3>我是标题</h3>
            </div>
        </li>
        <li>
            <div class="bg" data-bg="./img/lunbo4.jpg"></div>
            <div class="ct-text">
                <h1>我是第四张</h1>
                <h3>我是标题</h3>
            </div>
        </li>

    </ul>
    <ul class="ct-bottom clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <a href="####" class="pre change"> < </a>
    <a href="####" class="next change"> > </a>
</div>

<div id="content">
    <div class="ct ct-services location" id="SERVICES">
        <h1>SERVICES</h1>
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
        <ul class="services">
            <li>
                    <span class="fa-stack fa-4x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-shopping-cart fa-stack-1x"></i>
                    </span>
                <h3>E-Commerce</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </li>
            <li>
                    <span class="fa-stack fa-4x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-laptop fa-stack-1x"></i>
                    </span>
                <h3>Responsive Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </li>
            <li>
                    <span class="fa-stack fa-4x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-lock fa-stack-1x"></i>
                    </span>
                <h3>Web Security</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </li>
        </ul>
    </div>
    <div class="portfolio-bg location" id="PORTFOLIO">
        <div class="ct ct-portfolio">
            <h1>PORTFOLIO</h1>
            <h3>Lorem ipsum dolor sit amet consectetur.</h3>
            <ul class="portfolioUl clearfix">
                <!--<li class="portfolioLi">-->
                <!--<a href="http://www.sinaimg.cn/dy/slidenews/5_t160/2016_42/453_82059_144634.jpg">![pic](http://upload-images.jianshu.io/upload_images/2166980-a1f8db755709d282?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)-->
                <!--</a>-->
                <!--<h4>神舟十一号飞船发射圆满成功</h4>-->
                <!--<p>10月17日7时30分，搭载神舟十一号载人飞船的长征二号F 遥十一运载火箭点火发射。</p>-->
                <!--</li>-->
                <li class="portfolioLi hide"></li>
            </ul>
            <div class="loadMore">正在加载...</div>
         </div>
    </div>
    <div class="ct ct-about location" id="ABOUT">
        <div class="center-line"></div>
        <h1>ABOUT</h1>
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>

        <div class="wrap-about1 wrap-about">
            <h3>2009-2011</h3>
            <h3>Our Humble Beginnings</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>

            [站外图片上传中……(2)]
        </div>
        <div class="wrap-about2 wrap-about">
            <h3>MARCH 2011</h3>
            <h3>An Agency is Born</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
            [站外图片上传中……(3)]
        </div>
        <div class="wrap-about1 wrap-about">
            <h3>DECEMBER 2012</h3>
            <h3>Transition to Full Service</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
            [站外图片上传中……(4)]
        </div>
        <div class="wrap-about2 wrap-about">
            <h3>JULY 2014</h3>
            <h3>Phase Two Expansion</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
            [站外图片上传中……(5)]
        </div>
        <div class="wrap-about1 wrap-about">
            <div class="about-over">
                <h2>
                    BE PART
                    OF OUR
                    STORY!
                </h2>
            </div>
        </div>

    </div>
    <div class="team-bg location" id="TEAM">
        <div class="ct ct-team">
            <h1>OUR AMAZING TEAM</h1>
            <h3>Lorem ipsum dolor sit amet consectetur.</h3>
            <ul class="team clearfix">
                <li>
                    [站外图片上传中……(6)]
                    <h3>Kay Garland</h3>
                    <p>Lead Designer</p>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-twitter fa-stack-1x"></i>
                     </span>
                    </a>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-facebook fa-stack-1x"></i>
                     </span>
                    </a>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-linkedin fa-stack-1x"></i>
                     </span>
                    </a>
                </li>
                <li>
                    [站外图片上传中……(7)]
                    <h3>Larry Parker</h3>
                    <p>Lead Marketer</p>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-twitter fa-stack-1x"></i>
                     </span>
                    </a>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-facebook fa-stack-1x"></i>
                     </span>
                    </a>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-linkedin fa-stack-1x"></i>
                     </span>
                    </a>
                </li>
                <li>
                    [站外图片上传中……(8)]
                    <h3>Diana Pertersen</h3>
                    <p>Lead Developer</p>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-twitter fa-stack-1x"></i>
                     </span>
                    </a>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-facebook fa-stack-1x"></i>
                     </span>
                    </a>
                    <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-linkedin fa-stack-1x"></i>
                     </span>
                    </a>
                </li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
        </div>
        <div class="ct ct-friendly-link clearfix ">
            <a href="#">[站外图片上传中……(9)]</a>
            <a href="#">[站外图片上传中……(10)]</a>
            <a href="#">[站外图片上传中……(11)]</a>
            <a href="#">[站外图片上传中……(12)]</a>
        </div>
    </div>

    <div class="contact-bg location" id="CONTACT">
        <div class="ct ct-contact">
            <h1>CONTACT US</h1>
            <h3>Lorem ipsum dolor sit amet consectetur.</h3>
            <form class="contact-form" action="./renwu15-2.html" method="get">
                <textarea class="contact-textarea clearfix" name="user-message" id="what-is-id" cols="30" rows="10" placeholder="YOUR MESSAGE *"></textarea>
                <input class="contact-input" type="text" name="user-name" placeholder="YOUR NAME *">
                <input class="contact-input" type="text" name="user-email" placeholder="YOUR EMAIL *">
                <input class="contact-input" type="text" name="user-phone" placeholder="YOUR PHONE *">

                <input class="contact-submit" name="name-submit" type="submit" value="SEND MESSAGE" >
            </form>
        </div>
    </div>
</div>
<div id="footer">
    <div class="ct ct-footer">
        <ul class="footer clearfix">
            <li>
                <span>Copyright © Your Website 2014</span>

            </li>
            <li>
                <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-twitter fa-stack-1x"></i>
                     </span>
                </a>
                <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-facebook fa-stack-1x"></i>
                     </span>
                </a>
                <a href="#">
                     <span class="fa-stack fa-2x">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-linkedin fa-stack-1x"></i>
                     </span>
                </a>
            </li>
            <li class="more-about">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Use</a>
            </li>
        </ul>

    </div>
</div>




    <script src="./js/lib/requirejs.js" data-main="indexjs.js" ></script>





    <!--<script>-->
        <!--requirejs.config({-->
            <!--baseUrl:"./js"-->
        <!--});-->
        <!--requirejs(["../main"])-->

    <!--</script>-->
</body>
</html>

2、曝光效果js源码如下：

/**
 * Created by lxzd1 on 2016/11/5.
 */
define(["../lib/jquery.min"],function () {

    var baoguang=(function () {
        var  clock;
        // function isVisible($node) {
        //     var scrollH=$(window).scrollTop(),
        //         winH=$(window).height(),
        //         nodeOffset=$node.offset().top;
        //
        //     if ((scrollH+winH)>=nodeOffset){
        //         return true
        //     }
        //     else {return false}
        // }
        function isVisible($node){
            var scrollH=$(window).height()+$(window).scrollTop(),
                selfDoc=$node.offset().top,
                selfH=$node.outerHeight(true);
            if (selfDoc < scrollH && scrollH < selfDoc+selfH ) {
                return true
            }
            else  return false
        }

        $(window).on("scroll",function () {
            if (clock){clearTimeout(clock)};
            clock=setTimeout(function () {
                location();
                showCheck();
            },100)
        })

        function showCheck() {

            $(".wrap-about").each(function () {
                var $cur=$(this);
                if (!isVisible($cur)||$cur.attr("isShowed")){
                    return
                }
                if (isVisible($cur)){
                    $cur.animate({"opacity":"1"},1500)
                    $cur.attr("isShowed",true)
                }
            })
        }
        function location() {
            $(".location").each(function () {
                var $cur1=$(this),
                    num=$cur1.index();
                if (!isVisible($cur1)){
                    $(".nav li").eq(num).find("a").removeAttr("style");
                     return
                }
                if (isVisible($cur1)){
                  $(".nav li").eq(num).siblings().find("a").removeAttr("style");
                  $(".nav li").eq(num).find("a").css("background-color", "#fed136");
                }



            })

        }


    }())
    return {baoguang};
});

3、portfolio区域效果源码如下

/**
 * Created by lxzd1 on 2016/11/5.
 */
define(["../lib/jquery.min"],function () {

    var getPortfolioMore=(function () {
        $(".loadMore").on("click",function () {
            $(".loadMore").text("正在加载...")
            getAndPlaceData();

        });


        var perPageCount=9,
            curPage=1;
        function getAndPlaceData() {
            $.ajax({
                url:"http://platform.sina.com.cn/slide/album_tech",
                dataType: 'jsonp',
                jsonp:"jsoncallback",
                data:{
                    app_key:"1271687855",
                    num: perPageCount,
                    page:curPage
                }
            }).done(function (ret) {
                if (ret && ret.status && ret.status.code === "0"){
                    placeData(ret.data);
                    $(".loadMore").text("点击加载更多");
                }else{alert("调用的新浪后台出现错误，请重试get ajax data error1")}

            })
            .fail(function () {
                    alert("从新浪获取数据失败，请重试get ajax data error2");
                    $(".loadMore").text("点击重试");
                })

        }

        //3、将获取的数据append到ul中 待图片加载完成，使用瀑布流的方式放置元素

        function placeData(nodelist) {
            var $nodes=renderData(nodelist);
            var arr=[];
            $nodes.find("img").each(function () {
                var defer = $.Deferred();
                $(this).load(function () {
                    defer.resolve()
                });
                arr.push(defer)
            });

            $.when.apply(null,arr).done(function () {
                console.log("PORTFOLIO 区域图片加载全部完成！");
                waterFall($nodes)
            })

        }

        function renderData(data) {
            var str="",
                $nodes;
            for (var i=0;i<data.length;i++){
                str+='<li class="portfolioLi">';
                str+='<a href="'+data[i].url+'">[站外图片上传中……(13)]</a>';
                str+='<h4>'+data[i].short_name+'</h4>';
                str+='<p>'+data[i].short_intro+'</p>';
                str+='</li>';
            }
            $nodes=$(str);
            $(".portfolioUl").append($nodes);
            return $nodes;
        }

        var widthNum=parseInt($(".ct").width()/$(".portfolioLi").outerWidth(true)),
            allHeight=[];

        for (var i=0;i<widthNum;i++){
            allHeight.push(0)
        }


        function waterFall($nodes) {

            $($nodes).each(function () {
                var $cur=$(this),
                    indx=0,
                    minAllHeight=allHeight[0];
                for (var j=0;j<allHeight.length;j++){
                    if (allHeight[j]<minAllHeight){
                        minAllHeight=allHeight[j];
                        indx=j;
                    }
                }

                $cur.css({
                    "left":indx*$cur.outerWidth(true),
                    "top":minAllHeight
                });
                allHeight[indx]=minAllHeight+$cur.outerHeight(true);
                $(".portfolioUl").height(Math.max.apply(null,allHeight));
            })
        }
        getAndPlaceData();

    }())



    return{  getPortfolioMore  }
})

4、goTop效果源码如下：

/**
 * Created by lxzd1 on 2016/11/5.
 */
define(["../lib/jquery.min"],function () {

    function goTop(ct) {
        this.ct=ct;
        this.target=$('<i class="fa fa-caret-square-o-up fa-4x goTop" aria-hidden="true"></i>');
        goTopCt=this.ct;
        goTopTr=this.target;
        this.createNode();
        this.bindEvent();
    }
    goTop.prototype={
        bindEvent:function () {
            $(window).on("scroll",function () {
                function canShow() {
                    var windowH=$(window).height(),
                        scrollH=$(window).scrollTop();
                    if (scrollH>windowH){
                        return true;
                    }
                    else {return false}
                }
                if (canShow()){
                    goTopTr.show();
                    $(".ct-nav").css({"background-color":"#333"})
                }
                else {
                    goTopTr.hide();
                    $(".ct-nav").removeAttr("style")
                }
            }) ;
            goTopTr.on('click',function () {
                $('html,body').animate({"scrollTop":"0px"},800)
            });
        },
        createNode:function (){
            $(goTopCt).append(goTopTr)
        }
    };
    var GoTop1= new goTop('body');




    return { GoTop1 };
});

5、首页轮播效果源码如下：

/**
 * Created by lxzd1 on 2016/11/5.
 */
define(["../lib/jquery.min"],function () {
    var Carousel=(function () {
        var bgLiWidth=$(".ct-bg").children().width(),
            clock=false,
            nextClock=false,
            $bgLi=$(".ct-bg").children(),
            bgCount=$bgLi.size();

        $(".ct-bg").append($bgLi.first().clone());
        $(".ct-bg").prepend($bgLi.last().clone());
        bgTrueCount=$(".ct-bg").children().length;
        $(".ct-bg").css({"left":0-bgLiWidth,"width":bgTrueCount*bgLiWidth});
        $(".ct-bg").children().width(bgLiWidth);


        function showMe(num) {
            if (clock){return}
            clock=true;
            if (-1<num<bgCount){
                $(".ct-bottom").children().eq(num).css("border-bottom-color","white");
                $(".ct-bottom").children().eq(num).siblings().css("border-bottom-color","#555");
                $(".ct-bg").animate({left:"-"+bgLiWidth*(num+1)});

                isSetBgUrl();
                function isSetBgUrl() {
                    if ($(".bg").eq(num+1).data("setBgUrl"))  {return;}
                    else {trueBgUrl=$(".ct-bg .bg").eq(num+1).attr("data-bg");
                        $(".bg").eq(num+1).css("background-image",'url('+trueBgUrl+')');
                        $(".bg").eq(num+1).data("setBgUrl",true) ;
                    }
                }



            }
            if (num===bgCount){
                $(".ct-bg").animate({"left":"-"+bgLiWidth*(bgCount+1)},function () {
                    $(".ct-bg").css("left",0-bgLiWidth);
                });
                $(".ct-bottom").children().eq(0).css("border-bottom-color","white");
                $(".ct-bottom").children().eq(0).siblings().css("border-bottom-color","#555");

            }
            if (num===-1){
                $(".ct-bg").animate({"left":"0"},function () {
                    $(".ct-bg").css("left",0-bgLiWidth*bgCount);

                });
                $(".ct-bottom").children().eq(bgCount-1).css("border-bottom-color","white");
                $(".ct-bottom").children().eq(bgCount-1).siblings().css("border-bottom-color","#555");

            }

            myIndex=num;
            clock=false;
            nextClock=false;
            return myIndex;
        }

        function playNext() {
            if (myIndex===bgCount){
                myIndex=0;
                showMe(myIndex+1);
                return ;
            }
            showMe(myIndex+1);

        }

        function playPre() {

            if (myIndex===-1){
                myIndex=bgCount-2;
                showMe(myIndex);
                return ;
            }
            showMe(myIndex-1)
        }


        $(".next").on("click",function () {

            clearTimeout(timing);
            playNext();
            circulate();
        });

        $(".pre").on("click",function () {
            clearTimeout(timing);
            playPre();
            circulate();

        });

        showMe(0);

        circulate();

        function circulate() {
            timing=setTimeout(function () {
                playNext();
                circulate();
            },4000);
        }


        $(".ct-bottom").children().on("click", function () {
            clearTimeout(timing);
            var $cur = $(this),
                indexNum = $cur.index();
            if (indexNum===0){
                showMe(bgCount);
            }
            else   showMe(indexNum);
            circulate();
        });


    }())



    return {Carousel};
});

6、build.js源码如下：

/**
 * Created by lxzd1 on 2016/11/6.
 */
({
    baseUrl:".",
    name:"main",
    out:"indexjs.js"

});

7、main.js源码如下：

/**
 * Created by lxzd1 on 2016/11/5.
 */
define(["./js/div/goTop","./js/div/lunbo","./js/div/getPortfolioMore","./js/div/baoguang"]);

总体预览地址：
https://github.com/have-not-BUG/task/blob/master/renwu/renwu39/renwu39new.html

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

最后编辑于：2017.11.16 11:22:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,519评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,842评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,544评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,742评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,646评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,027评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,513评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,169评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,324评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,268评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,299评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,996评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,591评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,667评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,911评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,288评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,871评论 2赞 341