pageC.css部分代码，只粘贴了星星的那部分：
/*星星*/
.stars{
width: 100%;
height: 100%;
position: absolute;
}
.stars > li {
position: absolute;
width: 30px;
height: 31px;
background-image: url("../images/stars.png");
-webkit-animation-name: flash;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: flash;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
}
.stars1 {
top: 20%;
left: 30%;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
}
.stars2 {
top: 15%;
left: 20%;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
}
.stars3 {
top: 25%;
left: 85%;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
}
.stars4 {
top: 30%;
left: 70%;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
}
.stars5 {
top: 25%;
left: 20%;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
}
.stars6 {
top: 10%;
left: 65%;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
}
@-webkit-keyframes flash {
0%,50%,100%{
opacity: 0;
}
25%,75%{
opacity: 1;
}
}
@-moz-keyframes flash {
0%,50%,100%{
opacity: 0;
}
25%,75%{
opacity: 1;
}
}
js：
/**
* Created by Administrator on 2016/8/4.
*/
//////////
// 灯动画 //
//////////
var lamp = {
elem: $(".b_background"),
bright: function(){
this.elem.addClass("lamp-bright")
},
dark: function(){
this.elem.removeClass("lamp-bright")
}
};
var container = $("#content");
var swipe = Swipe(container);
visualWidth = container.width();
visualHeight = container.height();
//页面滚动到指定位置
function scrollTo(time, proportionX) {
var distX = container.width() * proportionX;
swipe.scrollTo(distX, time);
}
//获开数据
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;
//}();
// 桥的Y轴
var bridgeY = function(){
var data = getValue(".c_background_middle");
return data.top;
}();
//////////
// 小女孩 //
//////////
var girl = {
elem: $(".girl"),
getHeight:function(){
return this.elem.height();
},
setOffset: function(){
this.elem.css({
left: visualWidth/2,
top: bridgeY - this.getHeight()
});
}
}
//修正小女孩的位置
girl.setOffset();
////////////////////////////////////////////////////////
//=================== 动画处理 ====================== //
////////////////////////////////////////////////////////
// 用来临时调整页面
swipe.scrollTo(visualWidth*2, 0);
function doorAction(left, right, time) {
var $door = $(".door");
var doorLeft = $(".door-left");
var doorRight = $(".door-right");
var defer = $.Deferred();
var count = 2;
// 等待开门完成
var complete = function() {
if (count == 1) {
defer.resolve();
return;
}
count--;
};
doorLeft.transition({"left": left}, time,complete);
doorRight.transition({"left": right}, time, complete);
return defer;
}
//开门
function openDoor() {
return doorAction("-50%", "100%", 2000);
}
//关门
function shutDoor() {
return doorAction("0%", "50%", 2000);
}
var instanceX;
//小孩走路
function BoyWalk(){
var container = $("#content");
//页面可视区域
var visualWidth = container.width();
var visualHeight = container.height();
//获开数据
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 boyWidth = $boy.width();
var boyHeight = $boy.height();
//修正小男孩的位置
$boy.css({
top: pathY - boyHeight +25
});
//暂停走路
function pauseWalk(){
$boy.addClass("pauseWalk");
}
// 恢复走路
function restoreWalk(){
$boy.removeClass("pauseWalk");
}
//css3的动作变化
function slowWalk(){
$boy.addClass("slowWalk");
}
//用transition做运动
function stratRun(options,runTime){
var dfdPlay = $.Deferred();
//恢复走路
restoreWalk();
$boy.transition(
options,
runTime,
"linear",
function(){
dfdPlay.resolve(); //动画完成
});
return dfdPlay;
}
//开始走路
function walkRun(time,dist,disY){
time = time || 3000;
//脚动作
slowWalk();
//开始走路
var d1 = stratRun({"left": dist + "px","top": disY ? disY:undefined},time);
return d1;
}
//走进商店
function walkToShop(runTime){
var defer = $.Deferred();
var doorObj = $(".door");
//门坐标
var offserDoor = doorObj.offset();
var doorOffsetLeft = offserDoor.left;
var doorOffsetTop = offserDoor.top;
//小孩当前的坐标
var offsetBoy = $boy.offset();
var boyOffsetLeft = offsetBoy.left;
var boyPoxLeft = offsetBoy.left;
var boyPoxTop = offsetBoy.top;
//中间位置
var boyMiddle = $boy.width()/2;
var doorMiddle = doorObj.width()/2;
var doorTopMiddle = doorObj.height()/2;
//当前需要移动的坐标
instanceX = (doorOffsetLeft+ doorMiddle)-(boyPoxLeft + boyMiddle);
//Y的坐标
// top= 人物底部的top- 门中间的top值
instanceY = boyPoxTop + boyHeight - doorOffsetTop + (doorTopMiddle);
//开始走路
var walkPlay = stratRun({transform:'translateX('+ instanceX +'px),translateY(-'+ instanceY +'px),scale(0.5,0.5)',opacity:0.1},2000);
//走路完毕
walkPlay.done(function(){
$boy.css({
opacity:0
})
defer.resolve();
})
return defer;
}
//走出店
function walkOutShop(runTime){
var defer = $.Deferred();
restoreWalk();
//开始走路
var walkPlay = stratRun({transform:'translateX('+ instanceX + 'px),translateY(0),scale(1,1)',opacity:1 },runTime);
//走路完毕
walkPlay.done(function(){
$boy.css({
opacity:1
})
defer.resolve();
})
return defer;
}
// 取花
function talkFlower() {
// 增加延时等待效果
var defer = $.Deferred();
setTimeout(function() {
// 取花
$boy.addClass('slowFlolerWalk');
defer.resolve();
}, 1000);
return defer;
}
//计算移动距离
function calculateDist(direction,proportion){
return (direction == "x" ? visualWidth : visualHeight)*proportion;
}
return {
//开始走路
walkTo:function(time,proportionX,proportionY){
var distX = calculateDist("x",proportionX);
var distY = calculateDist("y",proportionY);
return walkRun(time,distX,distY);
},
//走进商店
toShop: function(){
return walkToShop.apply(null,arguments);
},
outShop: function(){
return walkOutShop.apply(null,arguments);
},
//停止走路
stopWalk:function(){
pauseWalk();
},
setColoer:function(value){
$boy.css("background-color",value);
},
// 获开男孩的宽度
getWidth: function(){
return $boy.width();
},
// 复位初始状态
resetOriginal: function(){
this.stopWalk();
// 恢复图片
$boy.removeClass("slowWalk slowFlolerWalk").addClass("boyOriginal");
},
setFlolerWalk:function(){
$boy.addClass("slowFlolerWalk");
}
//talkFlower:function(){
// return talkFlower();
//}
}
};
在浏览器中浏览的效果： |
天盟APP下载
