效果图
点击变长出现棍子,小人跑过去,如果跑不过去看小广告复活
自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one{
background: blueviolet;
position: absolute;
left: 500px;
height: 10px;
width: 0px;
transform: rotate(-90deg);
bottom: 45%;
transform-origin: 0 100%;
transition:transform 0.5s linear;
}
.two{
transform: rotate(0deg);
}
.ren{
position: absolute;
left: 450px;
bottom: 45%;
}
.well{
position: absolute;
left: 450px;
bottom: 20%;
background: black;
height: 200px;
width: 100px;
}
.man img.rotate{
transform:translate(0px,300px);
-ms-transform:translate(0px,300px);
-moz-transform:translate(0px,300px);
-webkit-transform:translate(0px,300px);
-o-transform:translate(0px,300px);
transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<input type="button" value="点我变长">
<h1>您的分数为:<span id="num">0</span></h1>
<div>
<div class="one"></div>
<div class="ren"><img src="img/stick_stand.png"></div>
<div class="well-box"><div class="well"></div><div class="well"></div></div>
</div>
<script type="text/javascript">
var stop=true;
var num=0;
var number = Math.floor(Math.random()*800+100);
$($(".well").get(1)).css("left",450+number)
$("input").mousedown(function () {
if(stop){
$(".one").animate({"width":"1000px"},1000)
}
})
$("input").mouseup(function () {
if(stop){
$(".one").stop();//停止所有执行的函数
stop=false;
$(".one").addClass("two");
moveren();
}
})
function moveren() {
//获取棍子的长度
var one = $(".one").width();
//替换我们的图片
$(".ren img").attr("src","img/stick.gif");
//
setTimeout(function () {
$(".ren").animate({"left":(one+500)+"px"},1000,function() {
//1.人没有跑过去
if ((one < number - 50) || (one > number + 50)) {
$(".ren").animate({"bottom": "0px"});
setTimeout(function () {
$(".ren").hide()
}, 200);
var flag= confirm("您是否要给观看广告并复活");
if(flag){
location.href="广告页面.html?_ijt=6dsf612rkvau6kv4qg7fma1tib&num="+num;
}else{
location.href="自定义动画.html"
}
} else {
//2.人跑过去了
num+=100;
$("#num").text(num);
$(".ren").css("left",450);
$(".ren img").attr("src","img/stick_stand.png")//小人初始化
$(".one").removeClass("two")
$(".one").width(0)//棍子初始化
number = Math.floor(Math.random()*800+100);
$($(".well").get(1)).css("left",450+number)//柱子初始化
stop=true;//Ⅹ按钮能够再次点击
}
})
},1000)
}
var test=window.location.href;
var number1 = test.lastIndexOf("?");
var sub = test.substring(number1+1,test.length);
if(sub==="flag=false"){
location.href="自定义动画.html"
}else{
var subb= sub.indexOf("&");
var subflag=sub.substring(0,subb);
if(subflag==="flag=true"){
var subnum=sub.lastIndexOf("=");
num=sub.substring(subnum+1,subb.length);
$("#num").text(num);
$(".ren").css("left",450);
$(".ren img").attr("src","img/stick_stand.png")//小人初始化
$(".one").removeClass("two")
$(".one").width(0)//棍子初始化
number = Math.floor(Math.random()*800+100);
$($(".well").get(1)).css("left",450+number)//柱子初始化
stop=true;//Ⅹ按钮能够再次点击
}
}
</script>
</body>
</html>
广告页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
video{
position: relative;
left: 350px;
}
#one{
width: 58px;
height: 58px;
border-radius: 50%;
background: #d2d2d2;
position: relative;
left: 580px;
bottom:940px;
opacity:0.6;
filter: alpha(opacity=10);
}
#two{
width: 58px;
height: 58px;
position: relative;
left: 1060px;
bottom:1000px;
}
#one span{
font-size: 25px;
position: relative;
left: 25px;
top: 15px;
}
img{
opacity:0.6;
filter: alpha(opacity=10);
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<div>
<div><video src="405B24FDCA889E184839F2019DF312D3.mp4" autoplay="autoplay" width="1000px" height="950px"></video></div>
<div id="one"><span>20</span></div>
<div id="two"><img src="img/叉叉.PNG" alt=""></div>
</div>
<script type="text/javascript">
//载入事件
$().ready(function () {
/*当数字变为0之后*/
var num=$("span").text();
/*获取定时器对象*/
var time=null;
time=setInterval( function f() {
if(num==1){
clearInterval(time);
}
num--;
$("span").text(num);
},1000);
$("img").click(function () {
if(num==0){
var nums=window.location.href;
var index=nums.lastIndexOf("=")
nums= nums.substring(index+1,nums.length);
location.href="自定义动画.html?flag=true&num="+nums;
alert("观看完毕即将复活")
}else{
location.href="自定义动画.html?flag=false"
alert("未观看完将不会复活")
}
})
})
$("img").hover(function () {
$("#two").css("background","red")
},
function () {
$("#two").css("background","")
}
)
</script>
</body>
</html>