H5实践学习-2
来源:互联网 发布:苹果cms自动采集脚本 编辑:程序博客网 时间:2024/05/22 03:23
<%@ pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
<html lang="zh">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<metaname="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">
<linkrel="stylesheet"type="text/css"
href="${pageContext.request.contextPath}/css/zzsc.css">
<linkrel="stylesheet"type="text/css"
href="${pageContext.request.contextPath}/css/cat.css">
</head>
<bodyid="background">
<divid="container"style="top:-70%;">
<divid="owl">
<divid="ear1">
<divid="ear1_1"></div>
<divid="ear1_2"></div>
<divid="ear1_3"></div>
</div>
<divid="ear2">
<divid="ear2_1"></div>
<divid="ear2_2"></div>
<divid="ear2_3"></div>
</div>
<divid="leg1">
<divid="leg1_1"></div>
<divid="leg1_2"></div>
<divid="leg1_3"></div>
</div>
<divid="leg2">
<divid="leg2_1"></div>
<divid="leg2_2"></div>
<divid="leg2_3"></div>
</div>
<divid="owl_body"></div>
<divid="eyes">
<divid="eye1_1"></div>
<divid="eye2_1"></div>
<divid="beak"></div>
<divid="beak1"></div>
<divid="eye1_2"></div>
<divid="eye2_2"></div>
<divid="eye1_3"></div>
<divid="eye2_3"></div>
<divid="eye1_4"></div>
<divid="eye2_4"></div>
</div>
<divid="belly">
<divid="bellyContainer"></div>
<divid="b11"></div>
<divid="b11_1"></div>
<divid="b12"></div>
<divid="b12_1"></div>
<divid="b13"></div>
<divid="b13_1"></div>
<divid="b21"></div>
<divid="b21_1"></div>
<divid="b22"></div>
<divid="b22_1"></div>
<divid="b23"></div>
<divid="b23_1"></div>
<divid="b24"></div>
<divid="b24_1"></div>
<divid="b31"></div>
<divid="b31_1"></div>
<divid="b32"></div>
<divid="b32_1"></div>
<divid="b33"></div>
<divid="b33_1"></div>
</div>
<divid="wing1">
<divid="wing1_1"></div>
<divid="wing1_2"></div>
<divid="wing1_3"></div>
</div>
<divid="wing2">
<divid="wing2_1"></div>
<divid="wing2_2"></div>
<divid="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>
- H5实践学习-2
- H5实践学习-1
- H5 学习笔记2
- H5学习-2
- H5学习2
- 20150830 H5 敏捷实践
- H5学习之旅-H5的基本标签(2)
- 学习H5
- 学习h5
- h5学习
- 我的h5最佳实践
- h5学习笔记: 导航菜单(2)
- h5学习笔记: 下拉菜单(2)
- HTML5学习_day11(2)--H5多媒体标签
- h5学习笔记:横排导航(2)
- Spring 2 学习实践
- h5 2
- h5学习之2(h5的常用标签和创建方法)
- tf.nn.dropout
- (转载)异常、堆内存溢出、OOM的几种情况
- JAVA线程池
- 牛顿迭代法
- 原来人脸识别技术是“酱紫”实现的!
- H5实践学习-2
- JedisDataException: ERR Client sent AUTH, but no password is set
- 利用npm 安装删除模块
- 1.5.Qt.ui文件是怎么生成相应的.h文件
- 效果图的原则和技巧,效果图构图的构图原则和技巧
- 学习总结
- 好的国外学习网站
- 关于信息论的压缩编码的个人思考
- 变量的解构赋值