Skip to content

S
SURPRISED
Commit 55f73206 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

转圈圈

parent 368d814d
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 38 deletions
css/initcss.css
View file @ 55f73206
...@@ -64,4 +64,4 @@ html { ...@@ -64,4 +64,4 @@ html {
} }
.ce9{ .ce9{
color: #e9d5ab !important; color: #e9d5ab !important;
} }
\ No newline at end of file
html/SignIn/SignIn.html
View file @ 55f73206
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
$("#bg_box").css("transform", `scale(${WindowW / 1813}, ${WindowH / 1020})`) $("#bg_box").css("transform", `scale(${WindowW / 1813}, ${WindowH / 1020})`)
} }
var conn = $.hubConnection(getApiUrl().urlSignalr, { var conn = $.hubConnection(getApiUrl().urlSignalr, {
qs: `i=888888&n=印象之旅&p=${encodeURIComponent( qs: `i=888886&n=印象之旅&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png" "http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}` )}`
}); });
...@@ -198,7 +198,16 @@ ...@@ -198,7 +198,16 @@
var personArray = new Array; var personArray = new Array;
var CurPersonNum = 0; var CurPersonNum = 0;
audio.addEventListener('ended', function () { audio.addEventListener('ended', function () {
showSignln() $('.show_info').hide();
dataList2.push({
bn: dataList[0].BranchName,
name: dataList[0].EmName,
photo: dataList[0].SignInPhoto,
})
dataList.splice(0, 1);
setTimeout(()=>{
showSignln()
}, 500)
}, false); }, false);
var gettokenMsg = { var gettokenMsg = {
appkey: "4gR6yRX5O3PN8hGC5FaNh5d5", appkey: "4gR6yRX5O3PN8hGC5FaNh5d5",
...@@ -239,11 +248,10 @@ ...@@ -239,11 +248,10 @@
proxy.invoke("Hello", '1').done(msg => { proxy.invoke("Hello", '1').done(msg => {
console.log("Hello") console.log("Hello")
}); });
console.log('111')
proxy.invoke("SendSignins", '1').done(data => { proxy.invoke("SendSignins", '1').done(data => {
console.log('initSignins', data) console.log('initSignins', data, dataList2.length)
dataList2 = data dataList2 = data
CurPersonNum = dataList2.length -1 CurPersonNum = dataList2.length === 0 ? 0 : dataList2.length -1
createHead() createHead()
init(); init();
}); });
...@@ -257,16 +265,9 @@ ...@@ -257,16 +265,9 @@
}) })
proxy.on("notifySignin", data=>{ proxy.on("notifySignin", data=>{
var newData = JSON.parse(data) var newData = JSON.parse(data)
console.log(newData) console.log('notifySignin:',newData)
dataList.push(newData) dataList.push(newData)
}) })
// proxy.on("initSignins", data=>{
// console.log(data)
// dataList2 = data
// CurPersonNum = dataList2.length -1
// createHead()
// init();
// })
proxy.on("barrage",data=>{ proxy.on("barrage",data=>{
let barrage = data let barrage = data
createDM({img: barrage.p, name: barrage.n, text: barrage.m}) createDM({img: barrage.p, name: barrage.n, text: barrage.m})
...@@ -292,7 +293,7 @@ ...@@ -292,7 +293,7 @@
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 _out = ['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideOutDown','slideOutLeft','slideOutRight'];
// 推送数据 // 推送数据
async function showSignln(){ async function showSignln(){
console.log(dataList) console.log('showSignln:',dataList)
if (dataList.length == 0) { if (dataList.length == 0) {
await sleep(2000); await sleep(2000);
showSignln() showSignln()
...@@ -321,17 +322,6 @@ ...@@ -321,17 +322,6 @@
var img = document.getElementsByClassName('element')[CurPersonNum].getElementsByTagName('img')[0]; var img = document.getElementsByClassName('element')[CurPersonNum].getElementsByTagName('img')[0];
img.setAttribute('src', data.SignInPhoto); img.setAttribute('src', data.SignInPhoto);
++CurPersonNum; ++CurPersonNum;
setTimeout(function(){
setTimeout(function(){
$('.show_info').hide();
dataList2.push({
bn: dataList[0].BranchName,
name: dataList[0].EmName,
photo: dataList[0].SignInPhoto,
})
dataList.splice(0, 1);
},1000);
},2000);
} }
} }
function chainAnimations(name){ function chainAnimations(name){
......
html/SignIn/signinInfo.html
View file @ 55f73206
...@@ -72,7 +72,13 @@ ...@@ -72,7 +72,13 @@
getMsg() getMsg()
var audio = document.getElementById('audio'); var audio = document.getElementById('audio');
audio.addEventListener('ended', function () { audio.addEventListener('ended', function () {
showSignln() $('.robot').attr('src', '../../images/texiao/robot2.png');
setTimeout(function(){
$('.info_box').removeClass('fadeOut');
$('.info_box').hide();
dataList.splice(0, 1);
showSignln()
}, 500);
}, false); }, false);
function sendMsg() { function sendMsg() {
proxy.invoke("Hello", '1').done(msg => { proxy.invoke("Hello", '1').done(msg => {
...@@ -135,17 +141,6 @@ ...@@ -135,17 +141,6 @@
$('.show_info').removeClass('fadeIn'); $('.show_info').removeClass('fadeIn');
// 更改展示的图片 // 更改展示的图片
$('.robot').attr('src', '../../images/texiao/robot2.gif'); $('.robot').attr('src', '../../images/texiao/robot2.gif');
if (dataList.length !== 1) {
setTimeout(function(){
$('.info_box').addClass('fadeOut');
setTimeout(function(){
$('.info_box').removeClass('fadeOut');
$('.info_box').hide();
dataList.splice(0, 1);
$('.robot').attr('src', '../../images/texiao/robot2.png');
}, 500);
},2000);
}
} }
} }
function playVideo(txt) { function playVideo(txt) {
......
html/SignIn/tenInfo.html 0 → 100644
View file @ 55f73206
<!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">
<link rel="stylesheet" href="../../css/initcss.css">
<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);
}
#container>div {
left: -5%;
}
</style>
<link rel="stylesheet" href="../../css/moveAnimate.min.css">
<link rel="stylesheet" href="../../css/SignIn.css">
</head>
<body>
<script src="../../js/moveJs/jquery.min.js"></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script type="text/javascript" src="../../js/mian.js"></script>
<script src="../../js/moveJs/three.js"></script>
<script src="../../js/moveJs/tween.min.js"></script>
<script src="../../js/moveJs/TrackballControls.js"></script>
<script src="../../js/moveJs/CSS3DRenderer.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script src="../../js/moveJs/hanzi-writer.min.js"></script>
<script src="../../js/moveJs/polyfill.min.js"></script>
<script type="text/javascript" src="../../js/barrageWallPc.js?v=10086"></script>
<div class="bg_box" id="bg_box">
<div class="bg_video_box">
<video src="../../video/NHQDQ9.mp4" autoplay="autoplay" loop="loop" muted="muted" id="homeBGvideo"></video>
</div>
<div class="">
<div id="container"></div>
</div>
</div>
<audio id="audio" autoplay>您的浏览器不支持 audio 元素。</audio>
<script>
windowResize()
window.onresize = () => {
return (() => {
windowResize()
})()
}
function windowResize(){
let WindowW = window.innerWidth
let WindowH = window.innerHeight
// this.videInfo.transformScale1 = WindowW / this.initSize.width
// this.videInfo.transformScale2 = WindowH / this.initSize.height
// this.videInfo.offsetX = (WindowW - this.initSize.width) * 0.5
// this.videInfo.offsetY = (WindowH - this.initSize.height) * 0.5
$("#bg_box").css("position", `relative`)
$("#bg_box").css("width", `1813px`)
$("#bg_box").css("height", `1020px`)
$("#bg_box").css("left", `${(WindowW - 1813) * 0.5}px`)
$("#bg_box").css("top", `${(WindowH - 1020) * 0.5}px`)
$("#bg_box").css("transform", `scale(${WindowW / 1813}, ${WindowH / 1020})`)
}
let dataList = [], dataList2 = [];
var audio = document.getElementById('audio');
var personArray = new Array;
var table = new Array;
var CurPersonNum = 0;
var imgList = ['蔡捷', '曹秋银', '沈小青', '陈欢', '陈佳', '陈攀', '陈鹏', '陈思', '陈思杰', '陈钰', '程磊', '储非', '邓盛富', '邓鑫', '丁洪锦', '冯露', '傅敏', '桂杨', '郭倩', '韩静'
, '何江波', '何晓娟', '侯念', '胡芸', '华国豪', '黄芳杰', '黄菲虹', '黄慧妹', '黄景苏', '黄奎', '黄雪晴', '黄媛媛', '矫美', '赖俊全', '李凡', '李航', '李欢', '李建波',
'李军', '李思思', '李伟霜', '李星晨', '李旭媛', '李燕燕', '李振业', '刘安娟', '刘东', '刘攀', '刘朋', '刘书利', '刘婷', '刘小勇', '刘依桐', '刘远', '卢佳雨', '卢星辰', '卢雪景',
'陆俏燕', '罗超', '罗娟', '罗玉玲', '慕大强', '瞿玉林', '任小容', '闪秀悦', '石明龙', '石明恬', '宋煦惟', '孙亚男', '唐杰', '唐萍', '唐婷', '唐雪梅', '滕富升', '万颖', '王靓',
'王蕾', '王立学', '王敏', '王苒', '王旭升', '王应洪', '王祉翔', '韦盛乐', '韦志', '魏余婷', '吴春', '吴曼琪', '吴攀', '吴淇', '伍朝朝', '肖雪艳', '肖自立', '谢明错', '谢骁亿',
'熊思奥', '熊小凤', '徐铭新', '徐树学', '闫飞龙', '杨博', '杨龙伟', '杨竹', '叶智仁', '袁媛苑', '张海燕', '张建国', '张莉', '张敏', '张前鹏', '张维', '张亚萍', '张媛媛', '张兆峰',
'章冬冬', '赵东亮', '赵欢', '赵雨', '赵致锟', '郑科', '郑锐', '周丹', '周岚', '周清菊', '周雪梅', '周杨', '朱梓妤', '祝姐']
// 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 camera, scene, renderer;
var controls;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
createHead()
init();
function createHead(){
for (var i = 0; i < imgList.length; i++) {
table[i] = new Object();
table[i].src = '../../images/tenyear/'+imgList[i]+'.jpg';
table[i].p_x = i % 20 + 1;
table[i].p_y = Math.floor(i / 20) + 1;
}
}
// 生成虚拟数据
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
// table
for ( var i = 0; i < table.length; i ++ ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var img = document.createElement('img');
img.src = table[ i ].src;
element.appendChild( img );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
// 表格需要坐标进行排序的
var object = new THREE.Object3D();
// object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
// object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
object.position.x = ( table[ i ].p_x * 140 ) - 1330;
object.position.y = - ( table[ i ].p_y * 180 ) + 990;
targets.table.push( object );
}
// sphere
var vector = new THREE.Vector3();
var spherical = new THREE.Spherical();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = Math.acos( -1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;
var object = new THREE.Object3D();
spherical.set( 800, phi, theta );
object.position.setFromSpherical( spherical );
vector.copy( object.position ).multiplyScalar( 2 );
object.lookAt( vector );
targets.sphere.push( object );
}
// helix
var vector = new THREE.Vector3();
var cylindrical = new THREE.Cylindrical();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var theta = i * 0.175 + Math.PI;
var y = - ( i * 5 ) + 450;
var object = new THREE.Object3D();
// 参数一 圈的大小 参数二 左右间距 参数三 上下间距
cylindrical.set( 900, theta, y );
object.position.setFromCylindrical( cylindrical );
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt( vector );
targets.helix.push( object );
}
// grid
for ( var i = 0; i < objects.length; i ++ ) {
var object = new THREE.Object3D();
object.position.x = ( ( i % 5 ) * 400 ) - 800; // 400 图片的左右间距 800 x轴中心店
object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 300 ) + 500; // 500 y轴中心店
object.position.z = ( Math.floor( i / 25 ) ) * 200 - 800;// 300调整 片间距 800z轴中心店
targets.grid.push( object );
}
//渲染
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute';
document.getElementById( 'container' ).appendChild( renderer.domElement );
// 鼠标控制
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener( 'change', render );
// 自动更换
// var ini = 0;
// setInterval(function(){
// ini = ini >= 3 ? 0 : ini;
// ++ini;
// switch(ini){
// case 1:
// transform( targets.sphere, 1000 );
// break;
// case 2:
// transform( targets.helix, 1000 );
// break;
// case 3:
// transform( targets.grid, 1000 );
// break;
// }
// },8000);
transform( targets.helix, 3000 );
//
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
function transform( targets, duration ) {
TWEEN.removeAll();
for ( var i = 0; i < objects.length; i ++ ) {
var object = objects[ i ];
var target = targets[ i ];
new TWEEN.Tween( object.position )
.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
new TWEEN.Tween( object.rotation )
.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 2 )
.onUpdate( render )
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function animate() {
// 让场景通过x轴或者y轴旋转 & z
// scene.rotation.x += 0.011;
scene.rotation.y += 0.008;
requestAnimationFrame( animate );
TWEEN.update();
controls.update();
// 渲染循环
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment