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(); //} }};在浏览器中浏览的效果：
在浏览器中浏览的效果：添加回答
举报
0/150
提交
取消