当前位置 博文首页 > leslie lee的博客（python ansys）：环形动态相册
github page链接请看readme?https://github.com/leslielee619/dynamic-photo-album
环形动态相册，一直旋转，当鼠标悬停时，停止旋转，并播放对应图片人物的歌曲，鼠标离开后，暂停播放歌曲，并继续旋转。
因为爬虫以及QSS，所以我一直想着要学习网页，最近想到要做这个动态相册，找了很多例子，都在gitee仓库中了。
相册中的人物：Madonna、王菲、梅艳芳、中森明菜、山口百惠、张国荣、阿拉蕾、柯南与毛利兰，是我喜欢的歌手以及动漫人物，哈哈哈。
图片、歌曲保存在gitee上，在本地写html、js、css文件。
第一次学习并写网页，写的很笨，尤其是js文件，我觉得可以再简单点，如果你有好的想法请告诉我！
过程记录、代码、图片、歌曲请看gitee仓库。https://gitee.com/leslielee_619/dynamic-album-/tree/master
目前gitee page还不能用。你可以找一个在线网站运行一下。
如果你运行出错了，那就是你链接搞错了，js、css、图片、歌曲的链接搞错了。
我的事件是鼠标悬停，不是点击，所以也不支持，直接把鼠标放上去出错，显示：
仅当用户同意、网站由用户激活或媒体无声时允许自动播放。
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
可以打开浏览器后，先用鼠标随便点击一下，就当有事件触发了，就可以了悬停播放音乐了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beautiful People</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body style="background-size:cover; background-image:url(https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/背景.jpg)">
<div style="margin: 0px auto; text-align: center; width: 736px;">
<h1 style="font:Chinese Xingkai;color:red">我的最爱</h1>
</div>
<div id="wrap">
<div id="head">
<div id="div1"><audio id="music1" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_Madonna.mp3"></audio></div>
<div id="div2"><audio id="music2" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_王菲.mp3"></audio></div>
<div id="div3"><audio id="music3" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_梅艳芳.mp3"></audio></div>
<div id="div4"><audio id="music4" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_中森名菜.mp3"></audio></div>
<div id="div5"><audio id="music5" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_山口百惠.mp3"></audio></div>
<div id="div6"><audio id="music6" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_毛利兰.mp3"></audio></div>
<div id="div7"><audio id="music7" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_阿拉蕾.mp3"></audio></div>
<div id="div8"><audio id="music8" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_张国荣.mp3"></audio></div>
</div>
</div>
<div style="margin: 0px auto; text-align: center; width: 736px;">
<h1 style="font:Chinese Xingkai;color:red">Leslie's photo album</h1>
</div>
</body>
</html>window.onload = function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
var div5 = document.getElementById("div5");
var div6 = document.getElementById("div6");
var div7 = document.getElementById("div7");
var div8 = document.getElementById("div8");
div1.addEventListener("mouseover", play1, false);
div1.addEventListener("mouseout", pause1, false);
div2.addEventListener("mouseover", play2, false);
div2.addEventListener("mouseout", pause2, false);
div3.addEventListener("mouseover", play3, false);
div3.addEventListener("mouseout", pause3, false);
div4.addEventListener("mouseover", play4, false);
div4.addEventListener("mouseout", pause4, false);
div5.addEventListener("mouseover", play5, false);
div5.addEventListener("mouseout", pause5, false);
div6.addEventListener("mouseover", play6, false);
div6.addEventListener("mouseout", pause6, false);
div7.addEventListener("mouseover", play7, false);
div7.addEventListener("mouseout", pause7, false);
div8.addEventListener("mouseover", play8, false);
div8.addEventListener("mouseout", pause8, false);
function play1(){
img = div1.firstChild
img.play()
}
function pause1(){
img = div1.firstChild
img.pause()
}
function play2(){
img = div2.firstChild
img.play()
}
function pause2(){
img = div2.firstChild
img.pause()
}
function play3(){
img = div3.firstChild
img.play()
}
function pause3(){
img = div3.firstChild
img.pause()
}
function play4(){
img = div4.firstChild
img.play()
}
function pause4(){
img = div4.firstChild
img.pause()
}
function play5(){
img = div5.firstChild
img.play()
}
function pause5(){
img = div5.firstChild
img.pause()
}
function play6(){
img = div6.firstChild
img.play()
}
function pause6(){
img = div6.firstChild
img.pause()
}
function play7(){
img = div7.firstChild
img.play()
}
function pause7(){
img = div7.firstChild
img.pause()
}
function play8(){
img = div8.firstChild
img.play()
}
function pause8(){
img = div8.firstChild
img.pause()
}
}body{
margin: 0;
background:gray;
}
#wrap{
width: 300px;
height: 400px;
position: relative;
margin:100px auto;
/*Define the distance of the 3D element from the view*/
-webkit-perspective:3000px;
-moz-perspective: 3000px;
-ms-transform:perspective(3000px);
-ms-perspective:3000px;
}
#head{
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: donghua 20s linear infinite;
}
#head div{
position: absolute;
top:0;
left:0;
width: 300px;
height: 350px;
text-align: center;
line-height: 100px;
}
#head:hover{
animation:donghua 20s linear infinite paused;
}
#head div:hover{
width: 105%;
height: 105%;
}
#head div:nth-child(1){
-webkit-transform: rotateY(0deg) translateZ(400px);
-moz-transform: rotateY(0deg) translateZ(400px);
-ms-transform: rotateY(0deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/Madonna.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(2) {
-webkit-transform: rotateY(45deg) translateZ(500px);
-moz-transform: rotateY(45deg) translateZ(500px);
-ms-transform: rotateY(45deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/王菲.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(400px);
-moz-transform: rotateY(90deg) translateZ(400px);
-ms-transform: rotateY(90deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/梅艳芳.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(4) {
-webkit-transform: rotateY(135deg) translateZ(500px);
-moz-transform: rotateY(135deg) translateZ(500px);
-ms-transform: rotateY(135deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/中森名菜.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(5) {
-webkit-transform: rotateY(180deg) translateZ(400px);
-moz-transform: rotateY(180deg) translateZ(400px);
-ms-transform: rotateY(180deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/山口百惠.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(6) {
-webkit-transform: rotateY(225deg) translateZ(500px);
-moz-transform: rotateY(225deg) translateZ(500px);
-ms-transform: rotateY(225deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/毛利兰.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(7) {
-webkit-transform: rotateY(270deg) translateZ(400px);
-moz-transform: rotateY(270deg) translateZ(400px);
-ms-transform: rotateY(270deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/阿拉蕾.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(8) {
-webkit-transform: rotateY(315deg) translateZ(500px);
-moz-transform: rotateY(315deg) translateZ(500px);
-ms-transform: rotateY(315deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/张国荣.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
@-webkit-keyframes donghua {
0% {
transform: rotateX(5deg) rotateY(360deg);
}
50% {
transform: rotateX(-5deg) rotateY(180deg);
}
100% {
transform: rotateX(5deg) rotateY(0deg);
}
}
@-moz-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}
50% {
transform: rotateY(-10deg) rotateY(180deg);
}
100% {
transform: rotateY(10deg) rotateY(360deg);
}
}
@-ms-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}
50% {
transform: rotateY(-10deg) rotateY(180deg);
}
100% {
transform: rotateY(10deg) rotateY(360deg);
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beautiful People</title>
<style type="text/css">
body{
margin: 0;
background:gray;
}
#wrap{
width: 300px;
height: 400px;
position: relative;
margin:100px auto;
/*Define the distance of the 3D element from the view*/
-webkit-perspective:3000px;
-moz-perspective: 3000px;
-ms-transform:perspective(3000px);
-ms-perspective:3000px;
}
#head{
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: donghua 20s linear infinite;
}
#head div{
position: absolute;
top:0;
left:0;
width: 300px;
height: 350px;
text-align: center;
line-height: 100px;
}
#head:hover{
animation:donghua 20s linear infinite paused;
}
#head div:hover{
width: 105%;
height: 105%;
}
#head div:nth-child(1){
-webkit-transform: rotateY(0deg) translateZ(400px);
-moz-transform: rotateY(0deg) translateZ(400px);
-ms-transform: rotateY(0deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/Madonna.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(2) {
-webkit-transform: rotateY(45deg) translateZ(500px);
-moz-transform: rotateY(45deg) translateZ(500px);
-ms-transform: rotateY(45deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/王菲.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(400px);
-moz-transform: rotateY(90deg) translateZ(400px);
-ms-transform: rotateY(90deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/梅艳芳.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(4) {
-webkit-transform: rotateY(135deg) translateZ(500px);
-moz-transform: rotateY(135deg) translateZ(500px);
-ms-transform: rotateY(135deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/中森名菜.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(5) {
-webkit-transform: rotateY(180deg) translateZ(400px);
-moz-transform: rotateY(180deg) translateZ(400px);
-ms-transform: rotateY(180deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/山口百惠.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(6) {
-webkit-transform: rotateY(225deg) translateZ(500px);
-moz-transform: rotateY(225deg) translateZ(500px);
-ms-transform: rotateY(225deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/毛利兰.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(7) {
-webkit-transform: rotateY(270deg) translateZ(400px);
-moz-transform: rotateY(270deg) translateZ(400px);
-ms-transform: rotateY(270deg) translateZ(400px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/阿拉蕾.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
#head div:nth-child(8) {
-webkit-transform: rotateY(315deg) translateZ(500px);
-moz-transform: rotateY(315deg) translateZ(500px);
-ms-transform: rotateY(315deg) translateZ(500px);
background: url("https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/张国荣.jpg");
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 0px 10px #fff;
}
@-webkit-keyframes donghua {
0% {
transform: rotateX(5deg) rotateY(360deg);
}
50% {
transform: rotateX(-5deg) rotateY(180deg);
}
100% {
transform: rotateX(5deg) rotateY(0deg);
}
}
@-moz-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}
50% {
transform: rotateY(-10deg) rotateY(180deg);
}
100% {
transform: rotateY(10deg) rotateY(360deg);
}
}
@-ms-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}
50% {
transform: rotateY(-10deg) rotateY(180deg);
}
100% {
transform: rotateY(10deg) rotateY(360deg);
}
}
</style>
<script>
window.onload = function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
var div5 = document.getElementById("div5");
var div6 = document.getElementById("div6");
var div7 = document.getElementById("div7");
var div8 = document.getElementById("div8");
div1.addEventListener("mouseover", play1, false);
div1.addEventListener("mouseout", pause1, false);
div2.addEventListener("mouseover", play2, false);
div2.addEventListener("mouseout", pause2, false);
div3.addEventListener("mouseover", play3, false);
div3.addEventListener("mouseout", pause3, false);
div4.addEventListener("mouseover", play4, false);
div4.addEventListener("mouseout", pause4, false);
div5.addEventListener("mouseover", play5, false);
div5.addEventListener("mouseout", pause5, false);
div6.addEventListener("mouseover", play6, false);
div6.addEventListener("mouseout", pause6, false);
div7.addEventListener("mouseover", play7, false);
div7.addEventListener("mouseout", pause7, false);
div8.addEventListener("mouseover", play8, false);
div8.addEventListener("mouseout", pause8, false);
function play1(){
img = div1.firstChild
img.play()
}
function pause1(){
img = div1.firstChild
img.pause()
}
function play2(){
img = div2.firstChild
img.play()
}
function pause2(){
img = div2.firstChild
img.pause()
}
function play3(){
img = div3.firstChild
img.play()
}
function pause3(){
img = div3.firstChild
img.pause()
}
function play4(){
img = div4.firstChild
img.play()
}
function pause4(){
img = div4.firstChild
img.pause()
}
function play5(){
img = div5.firstChild
img.play()
}
function pause5(){
img = div5.firstChild
img.pause()
}
function play6(){
img = div6.firstChild
img.play()
}
function pause6(){
img = div6.firstChild
img.pause()
}
function play7(){
img = div7.firstChild
img.play()
}
function pause7(){
img = div7.firstChild
img.pause()
}
function play8(){
img = div8.firstChild
img.play()
}
function pause8(){
img = div8.firstChild
img.pause()
}
}
</script>
</head>
<body style="background-size:cover; background-image:url(https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/images/背景.jpg)">
<div style="margin: 0px auto; text-align: center; width: 736px;">
<h1 style="font:Chinese Xingkai;color:red">我的最爱</h1>
</div>
<div id="wrap">
<div id="head">
<div id="div1"><audio id="music1" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_Madonna.mp3"></audio></div>
<div id="div2"><audio id="music2" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_王菲.mp3"></audio></div>
<div id="div3"><audio id="music3" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_梅艳芳.mp3"></audio></div>
<div id="div4"><audio id="music4" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_中森名菜.mp3"></audio></div>
<div id="div5"><audio id="music5" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_山口百惠.mp3"></audio></div>
<div id="div6"><audio id="music6" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_毛利兰.mp3"></audio></div>
<div id="div7"><audio id="music7" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_阿拉蕾.mp3"></audio></div>
<div id="div8"><audio id="music8" src="https://gitee.com/leslielee_619/dynamic-album-/raw/master/resources/music/cut_张国荣.mp3"></audio></div>
</div>
</div>
<div style="margin: 0px auto; text-align: center; width: 736px;">
<h1 style="font:Chinese Xingkai;color:red">Leslie's photo album</h1>
</div>
</body>
</html>?
