1. IT分享知识网首页

jsp制作的一个动态的贺卡

老牧童 • • 未分类 • 阅读 69

jsp制作的一个动态的贺卡1.新建一个DynamicWebProject项目，里面新建一个css文件和一个js文件，还有一个jsp文件，将所要的图片资源和音乐资源放在文件夹下。整体的框架的结构如下图所示：2.index.jsp里面的代码如下所示：%@pagelanguage=”java”contentType=”text/html;charset=UTF-8″ pageEncodin

大家好，欢迎来到IT知识分享网。

1.新建一个Dynamic Web Project项目，里面新建一个css文件和一个js文件，还有一个jsp文件，将所要的图片资源和音乐资源放在文件夹下。整体的框架的结构如下图所示：

jsp制作的一个动态的贺卡

2.index.jsp里面的代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/script.js" defer="defer"></script>
</head>
<body>
	<div class="music">
		<img src="images/music_pointer.png">
		<img class="play" id="music" src="images/music_disc.png">
	</div>
	<div class="page" id="page1">
		<div class="bg"></div>
		<div class="p1_lantern">点击屏幕<br>开启好运2016</div>
		<div class="p1_imooc"></div>
		<div class="p1_words">2016年慕课网新年特献</div>
	</div>
	<div class="page" id="page2">
		<div class="bg p2_bg_loading"></div>
		<div class="bg"></div>
		<div class="p2_circle"></div>
		<div class="p2_2016"></div>
	</div>
	<div class="page" id="page3">
		<div class="bg"></div>
		<div class="p3_logo"></div>
		<div class="p3_title"></div>
		<div class="p3_second"></div>
		<div class="p3_first"></div>
		<div class="p3_blessing"></div>
	</div>
	<audio autoplay="true">
		<source src="audio/music.mp3" type="audio/mpeg"/>
	</audio>
</body>
</html>

3.script.js里面的代码如下所示： 

window.onload = function() {
	// console.log(document.body.clientWidth);
	var music = document.getElementById("music");
	var audio = document.getElementsByTagName("audio")[0];

	// 音乐播放完之后自动停止光盘转动
	audio.addEventListener("ended", function(event) {
		music.setAttribute("class", "");
	}, false);

	// 点击音乐图标改变音乐的状态
	music.onclick = function() {
		if (audio.paused) {
			audio.play();
			this.setAttribute("class", "play");
			// this.style.animationPlayState = "running";
			// this.style.webkitAnimationPlayState = "running";
		} else {
			audio.pause();
			this.setAttribute("class", "");
			// this.style.animationPlayState = "paused";
			// this.style.webkitAnimationPlayState = "paused";
		}
	}
/*
 	// 触摸屏幕图标改变音乐状态
	music.addEventListener("touchstart", function(event) {
		if (audio.paused) {
			audio.play();
			this.setAttribute("class", "play");
		} else {
			audio.pause();
			this.setAttribute("class", "");
		}
	}, false);
*/
	// 点击屏幕开启好运2018
	page1.onclick = function() {
		page1.style.display="none";
		page2.style.display="block";
		page3.style.display="block";
		page3.style.top="100%";
		setTimeout(function(){
			page2.setAttribute("class", "page fadeOut");
			page3.setAttribute("class", "page fadeIn");
		}, 5500);
	}
/*
    // 触摸屏幕屏幕开启好运2018
	page1.addEventListener("touchstart", function(event){
		page1.style.display="none";
		page2.style.display="block";
		page3.style.display="block";
		page3.style.top="100%";
		setTimeout(function(){
			page2.setAttribute("class", "page fadeOut");
			page3.setAttribute("class", "page fadeIn");
		}, 5500);
	}, false);
*/
	
	
}

4.style.css里面的代码如下所示： 

@CHARSET "UTF-8";
/*所有的样式*/
* {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 1.5625vw;
	font-family: "Microsoft Yahei";
}

html, body {
	height: 100%;
	overflow: hidden;
}

/*音乐的样式*/
.music {
	width: 15vw;
	height: 15vw;
	border: 4px solid #ef1639;
	position: fixed;
	top: 3vh;
	right: 4vw;
	z-index: 5;
	border-radius: 50%;
	background: #fff;
}

.music>img:first-of-type {
	position: absolute;
	top: 24%;
	right: 2.5%;
	z-index:1;
	width: 28.421%;
}

.music>img:last-of-type {
	width: 79%;
	position: absolute;
	top: 0;
	right: 0;
	z-index:0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.music>img.play{
	-webkit-animation:music_disc 4s linear infinite;
	animation:music_disc 4s linear infinite;
}

@keyframes music_disc{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@-webkit-keyframes music_disc{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

/*背景的样式*/
.page {
	height: 100%;
	width: 100%;
	position: absolute;
}

.page>.bg {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -1;
}

/*第一页的样式*/
#page1 {
	display: block;
}

#page1>.bg {
	background: url("../images/p1_bg.jpg") no-repeat center center;
	background-size: 100%;
}

#page1>.p1_lantern {
	width: 45vw;
	height: 71.2vh;
	font-size: 3.506rem;
	position: absolute;
	top: -3.4%;
	right: 0;
	left: 0;
	color: #fff;
	margin: auto;
	background: url("../images/p1_lantern.png") no-repeat center bottom;
	background-size: 100%;
	padding-top: 31vh;
	box-sizing: border-box;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#page1>.p1_lantern:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	content: "";
	margin: auto;
	border-radius: 50%;
	width: 30vw;
	height: 30vw;
	background: #d60b3d;
	opacity: .5;
	-webkit-box-shadow: 0 0 10vw 10vw #d60b3d;
	-moz-box-sizing: 0 0 10vw 10vw #d60b3d;
	-ms-box-sizing: 0 0 10vw 10vw #d60b3d;
	-o-box-sizing: 0 0 10vw 10vw #d60b3d;
	box-sizing: 0 0 10vw 10vw #d60b3d;
	margin: auto;
	width: 30vw;
	-webkit-animation: p1_lantern .5s infinite alternate;
	animation: p1_lantern .5s infinite alternate;
}

@keyframes p1_lantern{
	0% {
		opacity: .5;
		-webkit-transform:scale(.8,.8);
		transform:scale(.8,.8);
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes p1_lantern{
	0% {
		opacity: .5;
		-webkit-transform:scale(.8,.8);
		transform:scale(.8,.8);
	}
	100% {
		opacity: 1;
	}
}

#page1>.p1_imooc {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 9vh;
	background: url("../images/p1_imooc.png") no-repeat center center;
	background-size: 100%;
	width: 27.656vw;
	height: 18.63vh;
	margin: auto;
}

#page1>.p1_words {
	font-size: 2.134rem;
	position: absolute;
	right: 0;
	bottom: 48px;
	left: 0;
	text-align: center;
	color: #231815;
}

/*第二页的样式*/
#page2 {
	display: none;
	-webkit-transition: .5s;
	transition: .5s;
}

#page2.fadeOut {
	opacity: .3;
	-webkit-transform: translate(0, -100%);
	transform: translate(0, -100%);
}

#page2>.p2_bg_loading{
	z-index: 4;
	background: #ef1639;
	-webkit-animation: p2_bg_loading 1s linear forwards;
	animation: p2_bg_loading 1s linear forwards;
}

@keyframes p2_bg_loading{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

@-webkit-keyframes p2_bg_loading{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

#page2>.bg {
	background: url("../images/p2_bg.jpg") no-repeat center center;
	background-size: 100%;
}

#page2>.p2_circle {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	background: url("../images/p2_circle_outer.png") no-repeat center center;
	background-size: 100%;
	width: 59.375vw;
	height: 59.375vw;
	border-radius: 50%;
	-webkit-animation:p2_circle_outer 1s linear 3s infinite;
	animation:p2_circle_outer 1s linear 3s infinite;
}

@keyframes p2_circle_outer{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
}

@-webkit-keyframes p2_circle_outer{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
}

#page2>.p2_circle:before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	content: "";
	background: url("../images/p2_circle_middle.png") no-repeat center center;
	background-size: 100%;
	width: 45.625vw;
	height: 45.625vw;
	border-radius: 50%;
	-webkit-animation:p2_circle_middle 1s linear 2s infinite;
	animation:p2_circle_middle 1s linear 2s infinite;
}

@keyframes p2_circle_middle{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(720deg);
		transform:rotate(720deg);
	}
}

@-webkit-keyframes p2_circle_middle{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(720deg);
		transform:rotate(720deg);
	}
}

#page2>.p2_circle:after {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	content: "";
	background: url("../images/p2_circle_inner.png") no-repeat center center;
	background-size: 100%;
	width: 39.9375vw;
	height: 39.9375vw;
	border-radius: 50%;
	-webkit-animation:p2_circle_inner 1s linear 1s infinite;
	animation:p2_circle_inner 1s linear 1s infinite;
}

@keyframes p2_circle_inner{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(-1080deg);
		transform:rotate(-1080deg);
	}
}

@-webkit-keyframes p2_circle_inner{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(-1080deg);
		transform:rotate(-1080deg);
	}
}

#page2>.p2_2016 {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	background: url("../images/p2_2016.png") no-repeat center center;
	background-size: 100%;
	width: 27.5vw;
	height: 6.24vh;
}

/*第三页的样式*/
#page3 {
	display: none;
	-webkit-transition: .5s;
	transition: .5s;
}

#page3.fadeIn{
	-webkit-transform: translate(0, -100%);
	transform: translate(0, -100%);
}

#page3>.bg {
	background: url("../images/p3_bg.jpg") no-repeat center center;
	background-size: 100%;
}

#page3>.p3_logo {
	width: 34.6875vw;
	height: 6.327vh;
	position: absolute;
	top: 7.82vh;
	right: 0;
	left: 0;
	margin: auto;
	background: url("../images/p3_logo.png") no-repeat center center;
	background-size: 100%;
}

#page3>.p3_title {
	width: 48.125vw;
	height: 50vh;
	position: absolute;
	top: 21vh;
	right: 0;
	left: 0;
	margin: auto;
	background: url("../images/p3_title.png") no-repeat center center;
	background-size: 100%;
}

#page3>.p3_second {
	width: 22.8125vw;
	height: 41.652vh;
	position: absolute;
	top: 25.48vh;
	left: 3.75vh;
	background: url("../images/p3_couplet_second.png") no-repeat center center;
	background-size: 100%;
}

#page3>.p3_first {
	width: 22.8125vw;
	height: 41.652vh;
	position: absolute;
	top: 25.48vh;
	right: 3.75vw;
	background: url("../images/p3_couplet_first.png") no-repeat center center;
	background-size: 100%;
}

#page3>.p3_blessing {
	width: 32vw;
	height: 32vw;
	position: absolute;
	right: 0;
	bottom: 10vh;
	left: 0;
	margin: auto;
	border-radius: 50%;
	background: url("../images/p3_blessing.png") no-repeat center center;
	background-size: 100%;
	background: url("../images/p3_blessing.png") no-repeat center center;
	-webkit-animation:p3_blessing 2s linear infinite;
	animation:p3_blessing 2s linear infinite;
}

@keyframes p3_blessing{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@-webkit-keyframes p3_blessing{
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

5.在浏览器里面输入http://localhost:8080/Demo/index.jsp将浏览器调到适当的大小运行得到一个动态的带有可控音乐的贺卡，代码的下载地址：http://download.csdn.net/download/qq_29656961/10006772。

jsp制作的一个动态的贺卡

jsp制作的一个动态的贺卡

jsp制作的一个动态的贺卡

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/14819.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信