20180116-20180123 学习日记

在慕课网中，进行了案例学习，学习案例为七夕主题，主要学习的是JavaScript的控制和CSS3的动画制作

部分CSS3代码：

* {
margin: 0;
padding: 0;
}


ol,
ul,
li {
list-style-type: none;
}


#content {
width: 100%;
height: 100%;
/*top: 20%;
left: 20%;*/
overflow: hidden;
position: absolute;
}


.content-wrap {
position: relative;
}


.content-wrap > li {
background: #CAE1FF;
color: red;
float: left;
overflow: hidden;
position: relative;
}


.charector {
width: 151px;
height: 291px;
background: url(../img/boy.png) -0px -291px no-repeat;
position: absolute;
left: 0%;
top: 55%;
}


/*人物暂停*/
.pauseWalk{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}


.boyOriginal{
background-position: -150px -0px;
}


/*填入动画样式规则*/


.slowWalk {
/*规定@keyframes动画的名称*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的时间（s或者ms）,默认是0*/
-webkit-animation-duration: 950ms;
/*规定动画被播放的次数，默认是1，infinite（循环播放）*/
-webkit-animation-iteration-count: infinite;
/*动画的切换方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start);
}


.slowFlowerWalk{
-webkit-animation-name: person-flower-slow;
-webkit-animation-duration: 950ms;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-timing-function: step-start;
-moz-animation-name: person-flower-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: step-start;
}


/*普通慢走*/
@-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}


@-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}


/*带花*/
@-webkit-keyframes person-flower-slow{
0% {
background-position: -435px -0px;
}
25% {
background-position: -904px -0px;
}
50% {
background-position: -451px -0px;
}
75% {
background-position: -753px -0px;
}
100% {
background-position: -300px -0px;
}
}


@-moz-keyframes person-flower-slow{
0% {
background-position: -435px -0px;
}
25% {
background-position: -904px -0px;
}
50% {
background-position: -451px -0px;
}
75% {
background-position: -753px -0px;
}
100% {
background-position: -300px -0px;
}
}


/*男孩转身*/
.boy-rotate{
-webkit-animation-name: boy-rotate;
-webkit-animation-duration: 850ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: step-start;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: boy-rotate;
-moz-animation-duration: 850ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: step-start;
-moz-animation-fill-mode: forwards;
}


@-webkit-keyframes boy-rotate{
0% {
background-position: -603px -291px;
}
16.7% {
background-position: -150px -0px;
}
33.4% {
background-position: -453px -291px;
}
50.1% {
background-position: 0px 0px;
}
66.8% {
background-position: -903px -291px;
}
83.5% {
background-position: -753px -291px;
}
100% {
background-position: -603px -291px;
}
}


@-moz-keyframes boy-rotate{
0% {
/*background-position: -603px -291px;*/
}
16.7% {
background-position: -150px -0px;
}
33.4% {
background-position: -453px -291px;
}
50.1% {
background-position: 0px 0px;
}
66.8% {
background-position: -903px -291px;
}
83.5% {
background-position: -753px -291px;
}
100% {
background-position: -603px -291px;
}
}

部分JavaScript代码：

/////////
//页面滑动 //
/////////


/**
 * [Swipe description]
 * @param {[type]} container [页面容器节点]
 * @param {[type]} options   [参数]
 */
function Swipe(container) {
//获取第一个子节点
var element = container.find(":first");


//滑动对象
var swipe = {};


//li页面数量
var slides = element.find(">");


//获取容器尺寸
var width = container.width();
var height = container.height();


//设置li页面总宽度
element.css({
width: (slides.length * width) + 'px',
height: height + 'px'
});


//设置每一个页面li的宽度
$.each(slides, function(index) {
var slide = slides.eq(index); //获取到每一个li元素    
slide.css({
width: width + 'px',
height: height + 'px'
});
});


//监控完成与移动
swipe.scrollTo = function(x, speed) {
//执行动画移动
element.css({
'transition-timing-function': 'linear',
'transition-duration': speed + 'ms',
'transform': 'translate3d(-' + x + 'px,0px,0px)'
});
return this;
};


return swipe;
}

静态效果图：