<!DOCTYPE html>
<html>
<head>
<title>照片墙</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
height: 100%;
}
body {
background-color: #000000;
margin: 0;
font-family: Helvetica, sans-serif;;
overflow: hidden;
}
a {
color: #ffffff;
}
#info {
position: absolute;
width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
font-weight: bold;
text-align: center;
z-index: 1;
}
#menu {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.element {
width: 100px;/* 120 160 */
height: 100px;
box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
text-align: center;
cursor: default;
}
.element:hover {
box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
border: 1px solid rgba(127,255,255,0.75);
}
.element img{
width:100px;
height:100px;
}
.element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127,255,255,0.75);
}
.element .symbol {
position: absolute;
top: 40px;
left: 0px;
right: 0px;
font-size: 60px;
font-weight: bold;
color: rgba(255,255,255,0.75);
text-shadow: 0 0 10px rgba(0,255,255,0.95);
}
.element .details {
position: absolute;
bottom: 15px;
left: 0px;
right: 0px;
font-size: 12px;
color: rgba(127,255,255,0.75);
}
button {
color: rgba(127,255,255,0.75);
background: transparent;
outline: 1px solid rgba(127,255,255,0.75);
border: 0px;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: rgba(0,255,255,0.5);
}
button:active {
color: #000000;
background-color: rgba(0,255,255,0.75);
}
.show_info{position:fixed;background-color:rgba(0,0,0,.6);padding:10px;width:300px;margin:0 auto;left: 0;right:0;border-radius: 5px;box-shadow: 0 0 10px 0 #fff;top:30%;}
.show_info img{display:block;margin:auto;border-radius: 5px;box-shadow: 0 0 10px 0 #888;}
.show_info .intro{color:#fff;text-indent:20px;margin-top:10px;height:65px;overflow:hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.show_info .info_my{text-align: center;}
.show_info .info_my > *{display:inline-block !important;vertical-align: middle;}
.show_info .info_my .info_mem{color:#fff;max-width:120px;}
.show_info .info_my .info_mem > div{text-align: left;}
.show_info .info_my .info_mem > div.nickname{max-width: 120px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.show_info .info_my img{max-width:120px;}
</style>
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/CSS3DRenderer.js"></script>
<div id="container"></div>
<audio autoplay="" loop=""><source src="http://www.ytmp3.cn/down/72794.mp3"></audio>
<div id="info">3D签到墙</div>
<div id="menu">
<button id="table">表格</button>
<button id="sphere">球球</button>
<button id="helix">螺旋</button>
<button id="grid">格子</button>
</div>
<div class="show_info animated" style="display:none;">
<div class="info_my">
<img id="show_img" src="img/c.png" />
<div class="info_mem">
<div class="nickname">赵璐思</div>
<div class="id">ID:女朋友</div>
<div class="vote">性别：女</div>
</div>
</div>
<div class="intro">如果可以交换人生，就跟以前的自己交换吧，
可以少些遗憾，而且，该在的人都在。</div>
</div>
<script>
// console.log($('#show_img').attr("src"))
var personArray = new Array;
var CurPersonNum = 0;
// animate
var _in = ['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','slideInDown','slideInLeft','slideInRight'];
var _out = ['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideOutDown','slideOutLeft','slideOutRight'];
// 模拟推送数据
var s = setInterval(function(){
// get animate
var rand_in = parseInt(Math.random() * _in.length,10);
var rand_out = parseInt(Math.random() * _out.length,10);
if(CurPersonNum >= personArray.length){
CurPersonNum = 0;
}
// console.log($('#show_img'))
$('#show_img').attr('src',personArray[Math.floor(Math.random() * personArray.length)].image)
$('.show_info').show();
$('.show_info').addClass(_in[rand_in]);
setTimeout(function(){
$('.show_info').removeClass(_in[rand_in]);
// 更改展示的图片
var img = document.getElementsByClassName('element')[CurPersonNum].getElementsByTagName('img')[0];
img.setAttribute('src','img/1.jpeg');
++CurPersonNum;
setTimeout(function(){
$('.show_info').addClass(_out[rand_out]);
setTimeout(function(){
$('.show_info').removeClass(_out[rand_out]);
$('.show_info').hide();
},1000);
},1500);
},1000);
},4500);
// 生成虚拟数据
// for(var i=0;i<199;i++){
// personArray.push({
// image: "img/a.png"
// });
// }
your_imgArray = [
{image:"img/1.jpeg"},
{image:"img/2.jpeg"},
{image:"img/3.jpeg"},
{image:"img/4.jpeg"},
{image:"img/5.png"},
{image:"img/6.jpeg"},
{image:"img/7.jpeg"},
{image:"img/8.jpeg"},
{image:"img/9.jpg"},
{image:"img/10.jpeg"},
{image:"img/11.jpeg"},
{image:"img/12.jpeg"}];
personArray = [...your_imgArray]
// 计算需要复制的次数
const targetLength = 199;
const originalLength = your_imgArray.length;
const copiesNeeded = Math.ceil((targetLength - originalLength) / originalLength);
// 生成扩展数组
for (let i = 0; i<copiesNeeded;i++){
personArray.push(...your_imgArray)
};
// 计算需要删除的元素数量)
duoyu = your_imgArray.length-(targetLength%your_imgArray.length)
if(targetLength%your_imgArray.length!==0){
for (let i = 0; i<duoyu;i++){
personArray.pop()
}
}
// console.log(personArray)
var table = new Array;
for (let i = 0; i < personArray.length; i++) {
table[i] = new Object();
table[i].image = personArray[i].image;
table[i].p_x = i % 20 + 1;
table[i].p_y = Math.floor(i / 20) + 1;
}
console.log(table)
/*var table = [
"H", "Hydrogen", "1.00794", 1, 1,
"He", "Helium", "4.002602", 18, 1,
"Li", "Lithium", "6.941", 1, 2,
"Be", "Beryllium", "9.012182", 2, 2,
"B", "Boron", "10.811", 13, 2,
"C", "Carbon", "12.0107", 14, 2,
"N", "Nitrogen", "14.0067", 15, 2,
"O", "Oxygen", "15.9994", 16, 2,
"F", "Fluorine", "18.9984032", 17, 2,
"Ne", "Neon", "20.1797", 18, 2,
"Na", "Sodium", "22.98976...", 1, 3,
"Mg", "Magnesium", "24.305", 2, 3,
"Al", "Aluminium", "26.9815386", 13, 3,
"Si", "Silicon", "28.0855", 14, 3,
"P", "Phosp
照片表白墙.rar （22个子文件） 
js 
three.js 1020KB three.min.js 499KB CSS3DRenderer.js 7KB tween.min.js 5KB jquery.min.js 82KB TrackballControls.js 14KB img 11.jpeg 114KB 4.jpeg 82KB 7.jpeg 396KB
c.png 9KB 1.jpeg 46KB a.png 166KB 12.jpeg 127KB 10.jpeg 819KB 5.png 710KB 8.jpeg 37KB 3.jpeg 251KB 2.jpeg 80KB 6.jpeg 645KB
9.jpg 2.76MB css animate.min.css 55KB
index.html 18KB资源评论
小彭爱学习
- 粉丝: 423
最新资源
- 网络信息安全B作业题和考试复习题.doc
- 互联网背景下如何提高图书编校质量.docx
- tcpip协议与网络管理标准教程.doc
- 大数据背景下高校思想政治教育过程融入路径探究.docx
- 云南基层干部教育培训信息化建设应用研究教育文档.doc
- 团购网站Groupon及中国电子商务发展分析.doc
- 外贸建站-营销型网站建设.doc
- 斩波电路Matlab仿真电力电子技术课程设计.doc
- 互联网+大连海参养殖新模式探究.docx
- python-游戏数据搜索引擎-基于Python开发的游戏信息检索系统-整合多平台游戏数据-提供快速搜索与详细展示功能-支持用户自定义筛选与收藏-适用于游戏爱好者与开发者查询游戏资.zip
- 人工智能双面观.docx
- 基于欧氏距离的K均方聚类算法研究与应用.docx
- 对安徽江苏山东网络电视台的比较分析.docx
- JavaEEJsp图书系统实用技术文档.doc
- 网络信息安全项目教程习题-解答.doc
- 物联网技术在现代种植业中的应用.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
