课程 \
H5+JS+CSS3实现七夕言情
4-3 页面与人物之间形成的视觉差效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
<script type="text/javascript" src="BoyWalk.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
</div>
<div class="button">
<button>开始</button>
</div>
</body>
<script type="text/javascript">
$(function() {
var container = $("#content");
var swipe = Swipe(container);
// 页面滚动到指定的位置
function scrollTo(time, proportionX) {
var distX = container.width() * proportionX;
swipe.scrollTo(distX, time);
}
////////////////////////////////////////////////////////
//=================== 动画处理 =======================//
////////////////////////////////////////////////////////
var boy = BoyWalk();
// 开始
$("button:first").click(function() {
// 开始第一次走路
boy.walkTo(2000, 0.2)
.then(function() {
// 第一次走路完成
// 开始页面滚动
scrollTo(5000, 1);
}).then(function() {
// 第二次走路
return boy.walkTo(5000, 0.5);
});
});
})
</script>
</html>
2016-12-07
查看完整代码
4-2 小男孩部分代码的封装
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<style type="text/css">
button {
width: 80px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
<script type="text/javascript" src="BoyWalk.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
<div class="button">
<button>开始</button>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
var container = $("#content");
var swipe = Swipe(container);
////////////////////////////////////////////////////////
//=================== 动画处理 ====================== //
////////////////////////////////////////////////////////
//////////
// 小孩走路 //
//////////
var boy = BoyWalk();
// 开始
$("button:first").click(function() {
// 开始第一次走路
boy.walkTo(2000, 0.2)
.then(function() {
//第一次走路完成
boy.setColoer('red')
})
.then(function() {
//第二次走
return boy.walkTo(2000, 0.4)
}).then(function() {
//第二次走路完成
boy.setColoer('yellow')
}).then(function() {
//第三次走路
return boy.walkTo(2000, 0.6)
}).then(function() {
//第三次走路完成
boy.setColoer('blue')
});
});
})
</script>
</html>
2015-08-10
查看完整代码
4-1 异步编程的处理
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<style type="text/css">
div {
background-color: yellow;
width: 200px;
height: 200px;
text-align: center;
border: 2px solid red;
margin: 3px;
font-size: 14px;
}
#block3,#block4{
background-color: #CAE1FF;
}
button {
font-size: 14px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<button>点击测试回调处理</button>
<button>点击测试$.Deferred处理</button>
</br>
</br>
<div id="block1">block1执行动画</div>
<div id="block2">block2执行动画</div>
<div id="block3">block3执行动画</div>
<div id="block4">block4执行动画</div>
<script type="text/javascript">
// 回调处理
$('button:first').click(function() {
$("#block1").animate({
width: "50%"
}, 2000, function() { // 嵌套回调
$("#block2").animate({
width: "50%"
}, 2000);
});
});
// jQuery的Deferred处理
$('button:last').click(function() {
function animate1() {
var dtd = $.Deferred(); // 生成Deferred对象
$("#block3").animate({
width: "50%"
}, 2000, function() {
dtd.resolve(); // 改变Deferred对象的执行状态
});
return dtd;
}
function animate2() {
var dtd = $.Deferred(); // 生成Deferred对象
$("#block4").animate({
width: "50%"
}, 2000, function() {
dtd.resolve(); // 改变Deferred对象的执行状态
});
return dtd;
}
var anim = animate1();
anim.then(function() {
$("#block3").text('block3动画动画直接结束');
return animate2();
}).then(function() {
$("#block4").text('block4动画动画直接结束');
});
});
</script>
</body>
</html>
2015-08-10
查看完整代码
3-5 路径动画的处理
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<style type="text/css">
button {
width: 80px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
/*人物暂停*/
.pauseWalk {
animation-play-state: paused;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
</div>
<div class="button">
<button>开始</button>
</div>
</body>
<script type="text/javascript">
$(function() {
// 开始
$("button:first").click(function() {
// 10秒钟 ，走到0.5 也就是页面中间位置
var distX = calculateDist('x', 0.5);
var distY = calculateDist('y', 0.5);
walkRun(10000, distX, distY);
});
})
</script>
<script type="text/javascript" src="Swipe.js"></script>
<script type="text/javascript" src="Qixi.js"></script>
</html>
2015-08-10
查看完整代码
3-4 运动的状态控制
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<style type="text/css">
button{
width: 80px;
height: 50px;
}
.button{
position: absolute;
bottom:0;
}
/* 人物暂停 */
.pauseWalk {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
</div>
<div class="button">
<button>开始</button>
<button>暂停</button>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '')
// 走路的路线坐标
return {
height: $elem.height(),
top: $elem.position().top
};
};
// 路的Y轴
var pathY = function() {
var data = getValue('.a_background_middle');
return data.top + data.height / 2;
}();
var $boy = $("#boy");
var boyHeight = $boy.height();
// 修正小男孩的正确位置
$boy.css({
top: pathY - boyHeight + 25
});
// 开始
$("button:first").click(function() {
$boy.addClass('slowWalk').transition({
'left': $("#content").width() + 'px',
}, 10000);
});
// 暂停
$("button:last").click(function() {
var left = $boy.css('left');
// 强制做了一个改变目标left的处理
// 动画是要运行10秒,所以此时动画还是没有结束的
$boy.css('left',left);
// 增加暂停的样式
$boy.addClass('pauseWalk');
});
</script>
</body>
</html>
2015-08-10
查看完整代码
3-3 走路的实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector slowWalk"></div>
<div class="button">
<button>点击开始走路</button>
</div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '')
// 走路的路线坐标
return {
height: $elem.height(),
top: $elem.position().top
};
};
// 路的Y轴
var pathY = function() {
var data = getValue('.a_background_middle');
return data.top + data.height / 2;
}();
var $boy = $("#boy");
var boyHeight = $boy.height();
// 修正小男孩的正确位置
$boy.css({
top: pathY - boyHeight + 25
});
// 绑定一个点击事件，开始走路
$("button").click(function() {
// left的变化
$boy.transition({
'left': $("#content").width() + 'px',
}, 10000, 'linear', function() {});
});
</script>
</body>
</html>
2015-08-10
查看完整代码
3-2 精灵动画的实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
</head>
<style type="text/css">
.charector {
position: absolute;
left: 6%;
top: 55%;
width: 151px;
height: 291px;
background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
}
.slowWalk {
/* 填入动画样式规则 */
/*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的秒或毫秒。默认是 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)
}
/* 普通慢走 */
@-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;
}
}
</style>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
<div class="button">
<button>点击开始动画</button>
</div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '');
// 走路的路线坐标
return {
height: $elem.height(),
top: $elem.position().top
};
}
// 路的Y轴
var pathY = function() {
var data = getValue('.a_background_middle');
return data.top + data.height / 2;
}();
var $boy = $("#boy");
var boyHeight = $boy.height();
// 修正小男孩的正确位置
$boy.css({
top: pathY - boyHeight + 25
});
// ==========================
// 增加精灵动画
// ==========================
$('button').click(function(){
// 增加走路的CSS3关键帧规则
$boy.addClass('slowWalk');
});
</script>
</body>
</html>
2015-08-10
查看完整代码
3-1 布局的自适应动态调整
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
</head>
<style type="text/css">
.charector {
width: 151px;
height: 291px;
background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
position: absolute;
/* 设置一个元素的坐标 */
left: 6%;
top: 55%;
}
</style>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '');
// 走路的路线坐标
return {
height: $elem.height(),
top: $elem.position().top
};
};
// 路的Y轴
var pathY = function() {
var data = getValue('.a_background_middle');
return data.top + data.height / 2;
}();
var $boy = $("#boy");
var boyHeight = $boy.height();
// 修正小男孩的正确位置
// 路的中间位置减去小孩的高度，25是一个修正值
$boy.css({
top:pathY-boyHeight+25
})
</script>
</body>
</html>
2015-08-10
查看完整代码
2-3 页面切换部分的代码封装
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li> 页面1 </li>
<!-- 第二副画面 -->
<li> 页面2 </li>
<!-- 第三副画面 -->
<li> 页面3 </li>
</ul>
<div class="button">
<button>点击切换页面</button>
</div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
$('button').click(function() {
// 调用接口
swipe.scrollTo($("#content").width()*2,5000);
});
</script>
</body>
</html>
2015-08-10
查看完整代码
2-2 页面之间的卷滚切换效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
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;
}
li:nth-child(2) {
background: #9BCD9B;
}
li:nth-child(3) {
background: yellow;
}
button {
width: 100px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li> 页面1 </li>
<!-- 第二副画面 -->
<li> 页面2 </li>
<!-- 第三副画面 -->
<li> 页面3 </li>
</ul>
<div class="button">
<button>点击切换页面</button>
</div>
</div>
<script type="text/javascript">
var container = $("#content");
// 获取第一个子节点
var element = container.find(":first");
// li页面数量
var slides = element.find("li");
// 获取容器尺寸
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({ // 设置每一个li的尺寸
width: width + 'px',
height: height + 'px'
});
});
// 绑定一个事件，触发通过
$('button').click(function() {
// 在5秒的时间内，移动X的位置，为2个页面单位
element.css({
'transition-timing-function':'linear',
'transition-duration':'5000ms',
'transform':'translate3d(-'+(width*2)+'px,0px,0px'
})
});
</script>
</body>
</html>
2015-08-10
查看完整代码
2-1 页面的横向布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style-type: none;
}
/*主体部分*/
#content {
width : 60%;
height : 60%;
top : 20%;
left : 20%;
overflow : hidden;
position : absolute;
border : 1px solid #ccc;
}
.content-wrap {
position: relative;
}
.content-wrap > li {
width: 100%;
height: 100%;
background: #CAE1FF;
color: red;
float: left;
overflow: hidden;
position: relative;
}
li:nth-child(2) {
background: #9BCD9B;
}
li:nth-child(3) {
background: yellow;
}
</style>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li> 页面1 </li>
<!-- 第二副画面 -->
<li> 页面2 </li>
<!-- 第三副画面 -->
<li> 页面3 </li>
</ul>
</div>
<script type="text/javascript">
var container = $("#content");
// 获取第一个子节点
var element = container.find(":first");
// li页面数量
var slides = element.find("li");
// 获取容器尺寸
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';
})
});
</script>
</body>
</html>
2015-08-10
查看完整代码