jsp制作的一个动态的贺卡

来源：互联网发布：淘宝av最新地址贴吧编辑：程序博客网时间：2024/04/30 15:13

1.新建一个Dynamic Web Project项目，里面新建一个css文件和一个js文件，还有一个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);*/// 点击屏幕开启好运2018page1.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);}/*    // 触摸屏幕屏幕开启好运2018page1.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。

阅读全文

1 0