requireJS、r.js基础知识问答
2016-11-04 本文已影响110人
该帐号已被查封_才怪
一、问答
（一）、如下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">-->
<!--</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
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
