H5实践学习-2

于 2017-10-10 11:25:05 发布
阅读量213 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010202752/article/details/78190724
版权

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="${pageContext.request.contextPath}/css/bootstrap.min.css"

rel="stylesheet">

<link href="${pageContext.request.contextPath}/css/font-awesome.min.css"

rel="stylesheet">

<link rel="stylesheet" type="text/css"

href="${pageContext.request.contextPath}/css/zzsc.css">

<link rel="stylesheet" type="text/css"

href="${pageContext.request.contextPath}/css/cat.css">

</head>

<body id="background">

<div id="container" style="top: -70%;">

<div id="owl">

<div id="ear1">

<div id="ear1_1"></div>

<div id="ear1_2"></div>

<div id="ear1_3"></div>

</div>

<div id="ear2">

<div id="ear2_1"></div>

<div id="ear2_2"></div>

<div id="ear2_3"></div>

</div>

<div id="leg1">

<div id="leg1_1"></div>

<div id="leg1_2"></div>

<div id="leg1_3"></div>

</div>

<div id="leg2">

<div id="leg2_1"></div>

<div id="leg2_2"></div>

<div id="leg2_3"></div>

</div>

<div id="owl_body"></div>

<div id="eyes">

<div id="eye1_1"></div>

<div id="eye2_1"></div>

<div id="beak"></div>

<div id="beak1"></div>

<div id="eye1_2"></div>

<div id="eye2_2"></div>

<div id="eye1_3"></div>

<div id="eye2_3"></div>

<div id="eye1_4"></div>

<div id="eye2_4"></div>

</div>

<div id="belly">

<div id="bellyContainer"></div>

<div id="b11"></div>

<div id="b11_1"></div>

<div id="b12"></div>

<div id="b12_1"></div>

<div id="b13"></div>

<div id="b13_1"></div>


<div id="b21"></div>

<div id="b21_1"></div>

<div id="b22"></div>

<div id="b22_1"></div>

<div id="b23"></div>

<div id="b23_1"></div>

<div id="b24"></div>

<div id="b24_1"></div>


<div id="b31"></div>

<div id="b31_1"></div>

<div id="b32"></div>

<div id="b32_1"></div>

<div id="b33"></div>

<div id="b33_1"></div>

</div>

<div id="wing1">

<div id="wing1_1"></div>

<div id="wing1_2"></div>

<div id="wing1_3"></div>

</div>

<div id="wing2">

<div id="wing2_1"></div>

<div id="wing2_2"></div>

<div id="wing2_3"></div>

</div>

</div>

</div>

<%@ include file="../common/common_js.jsp"%>

</body>

<script>

var owl = document.getElementById('owl');

owl.style.transform = "translate(-170px, 139px) scale(0.2)";


var wing1 = document.getElementById('wing1');

var wing2 = document.getElementById('wing2');

var ear1 = document.getElementById('ear1');

var ear2 = document.getElementById('ear2');

var eye1 = document.getElementById('eye1_4');

var eye2 = document.getElementById('eye2_4');


var times = 1;


function tiaodou() {

if (times % 1 == 0) {

eye1.style.top = "50px";

eye2.style.top = "50px";


wing1.style.transition = "-webkit-transform 1s";

wing1.style.webkitTransform = "translate(-70px, 360px) rotate(-30deg)";

wing1.style.webkitTransformOrigin = "0px 0px";


wing2.style.transition = "-webkit-transform 1s";

wing2.style.webkitTransformOrigin = "0px 0px";

wing2.style.webkitTransform = "translate(186px, -70px) rotate(30deg)";


ear1.style.transition = "-webkit-transform all 0.4s";

ear1.style.webkitTransform = "translate(-5px, -5px)";


ear2.style.transition = "-webkit-transform all 0.6s";

ear2.style.webkitTransform = "translate(5px, -5px)";


eye1.style.webkitTransform = "scale(0.3)";

eye1.style.webkitTransform = "scale(0.27)";

eye2.style.webkitTransform = "scale(0.27)";


}


if (times % 2 == 0) {

eye1.style.top = "90px";

eye2.style.top = "90px";


wing1.style.transition = "-webkit-transform 1s";

wing1.style.webkitTransform = "none";

wing1.style.webkitTransformOrigin = "0px 0px";


wing2.style.transition = "-webkit-transform 1s";

wing2.style.webkitTransformOrigin = "0px 0px";

wing2.style.webkitTransform = "none";


ear1.style.transition = "-webkit-transform all 0.4s";

ear1.style.webkitTransform = "none";


ear2.style.transition = "-webkit-transform all 0.6s";

ear2.style.webkitTransform = "none";


eye1.style.webkitTransform = "scale(0.3)";

eye1.style.webkitTransform = "scale(0.27)";

eye2.style.webkitTransform = "scale(0.27)";

}

times++;

}


function sleep() {

$("#eye1_3").css("background", "#779943");

}

</script>

</body>

</html>

卡比巴拉嗝多兽丶
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值