Skip to content

S
SURPRISED
Commit 7d6a943f authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 425eaa63
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 638 additions and 42 deletions
css/SignIn.css
View file @ 7d6a943f
...@@ -79,7 +79,93 @@ ...@@ -79,7 +79,93 @@
text-align: center; text-align: center;
margin-top: 1rem; margin-top: 1rem;
} }
.job{
font-size: 4rem;
}
.nickname{
margin-top: 2rem;
}
#danmu{
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 1rem;
overflow: hidden;
}
#danmu .list {
font-size: 3rem;
background: rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,0.7);
box-shadow: 0 0 6px 1px rgba(0,0,0,0.7);
height: 3.5rem;
border: 0;
-webkit-border-radius: 30px;
border-radius: 30px;
line-height: 3.5rem;
overflow: hidden;
color:#FFFFFF;
padding: 1rem 1.2rem;
position:absolute;
-webkit-transition: -webkit-transform 100s linear;
-moz-transition: -moz-transform 100s linear;
-o-transition: -o-transform 100s linear;
transition: transform 100s linear;
z-index: 999;
left: 100%;
white-space: nowrap;
display: flex;
align-items: center;
}
#danmu .list .bullet-head-box {
float: left
}
#danmu .list img {
width: 3rem;
height: 3rem;
border: 4px solid #222;
border-radius: 50%
}
#danmu .list .bullet-body-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 66px;
margin-left: 66px;
padding: 0 12px 0 0
}
#danmu .list .bullet-name {
height: 66px;
line-height: 60px;
float: left;
margin-right: 15px;
margin-left: 5px;
font-size: 3rem;
white-space: nowrap;
color: #73dcff
}
#danmu .list .bullet-msg {
height: 66px;
line-height: 60px;
float: left;
font-size: 2.8rem;
margin-top: 2px;
color: #fff;
white-space: nowrap
}
/*此处弹幕的移动动画，使用transform不会引起页面的重绘，性能更好*/
#danmu .list.animate {
-webkit-transform: translateX(-9920px);
-moz-transform: translateX(-9920px);
-ms-transform: translateX(-9920px);
-o-transform: translateX(-9920px);
transform: translateX(-9920px);
}
.bigCard { .bigCard {
width: 461px; width: 461px;
height: 484px; height: 484px;
...@@ -116,7 +202,7 @@ ...@@ -116,7 +202,7 @@
margin: 0 auto; margin: 0 auto;
} }
@keyframes signin3d { @keyframes signin3d {
0%{top:0;left:0;width:158px;height:157px;background: url("../images/texiao.png?v=1") no-repeat -865px -630px;} 0%{top:0;left:0;width:158px;height:157px;background: url("../images/texiao/sprites.png?v=1") no-repeat -865px -630px;}
2.86%{top:0;left:0;width:169px;height:155px;background: url("../images/texiao/sprites.png?v=1") no-repeat -865px -475px;} 2.86%{top:0;left:0;width:169px;height:155px;background: url("../images/texiao/sprites.png?v=1") no-repeat -865px -475px;}
5.72%{top:0;left:0;width:172px;height:158px;background: url("../images/texiao/sprites.png?v=1") no-repeat -865px -0px;} 5.72%{top:0;left:0;width:172px;height:158px;background: url("../images/texiao/sprites.png?v=1") no-repeat -865px -0px;}
8.58%{top:0;left:0;width:171px;height:159px;background: url("../images/texiao/sprites.png?v=1") no-repeat -865px -316px;} 8.58%{top:0;left:0;width:171px;height:159px;background: url("../images/texiao/sprites.png?v=1") no-repeat -865px -316px;}
......
css/signinInfo.css 0 → 100644
View file @ 7d6a943f
.main{
height: 100%;
width: 100%;
background: url(../images/texiao/info_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.dingguang{
height: 100%;
width: 100%;
background: url(../images/texiao/dengguang.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
left: 0;
top: 0;
}
.info_box{
width: 80%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
padding: 4rem;
box-sizing: border-box;
}
.info_box_left{
float: left;
width: 40%;
height: 100%;
box-shadow: -8px 8px 3px 4px #E1BD5E;
}
.info_box_left .img_box{
padding: .5rem;
background: -webkit-linear-gradient(right bottom,#B08C3E,#F4D371);
background: linear-gradient(right bottom,#B08C3E,#B08C3E);
height: 100%;
box-sizing: border-box;
}
.info_box_left .img_box img{
width: 100%;
height: 100%;
box-shadow: -3px -3px 1px 0px #dec586;
}
.info_box_right{
float: left;
margin-left: 5%;
width: 55%;
height: 100%;
text-align: center;
}
.info_box_right p{
font-family: 'PingFangR';
font-weight: bold;
padding-top: 1.3rem;
}
.info_box_right p.name{
font-size: 5.6rem;
}
.info_box_right p.font-s50{
font-size: 4rem;
}
.info_box_right p.info{
font-size: 3rem;
}
.font-cjb{
background-image:-webkit-linear-gradient(bottom,#DEB036,#FEFDDF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
\ No newline at end of file
html/SignIn/SignIn.html
View file @ 7d6a943f
...@@ -114,7 +114,10 @@ ...@@ -114,7 +114,10 @@
<script src="../../js/moveJs/tween.min.js"></script> <script src="../../js/moveJs/tween.min.js"></script>
<script src="../../js/moveJs/TrackballControls.js"></script> <script src="../../js/moveJs/TrackballControls.js"></script>
<script src="../../js/moveJs/CSS3DRenderer.js"></script> <script src="../../js/moveJs/CSS3DRenderer.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.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_box" id="bg_box">
<div class="bg_video_box"> <div class="bg_video_box">
<video src="../../video/NHQDQ9.mp4" autoplay="autoplay" loop="loop" muted="muted" id="homeBGvideo"></video> <video src="../../video/NHQDQ9.mp4" autoplay="autoplay" loop="loop" muted="muted" id="homeBGvideo"></video>
...@@ -142,16 +145,19 @@ ...@@ -142,16 +145,19 @@
<div class="page_right"> <div class="page_right">
<div id="container"></div> <div id="container"></div>
<!-- style="display:none;" --> <!-- style="display:none;" -->
<div class="show_info animated" > <div class="show_info animated" style="display:none;">
<div class="bigCard" style="left: 733.25px; top: 198.5px; display: block; opacity: 1; transform: scale(1, 1);"> <div class="bigCard" style="left: 733.25px; top: 250px; display: block; opacity: 1; transform: scale(1, 1);">
<div class="bigCardScale"> <div class="bigCardScale">
<div class="bigCard-divBigBs bigCard-divBigBsAnm" id="uerImg"></div> <div class="bigCard-divBigBs bigCard-divBigBsAnm" id="uerImg"></div>
</div> </div>
<p class="nickname">罗超</p> <p class="job" id="job" class="yinxiang2020"></p>
<canvas id="canvas" ></canvas> <p class="nickname" id="nickname" class="yinxiang2020"></p>
</div> </div>
</div> </div>
</div> </div>
<div id="danmu">
</div>
</div> </div>
<audio id="audio" autoplay>您的浏览器不支持 audio 元素。</audio> <audio id="audio" autoplay>您的浏览器不支持 audio 元素。</audio>
<script> <script>
...@@ -175,15 +181,17 @@ ...@@ -175,15 +181,17 @@
$("#bg_box").css("top", `${(WindowH - 1020) * 0.5}px`) $("#bg_box").css("top", `${(WindowH - 1020) * 0.5}px`)
$("#bg_box").css("transform", `scale(${WindowW / 1813}, ${WindowH / 1020})`) $("#bg_box").css("transform", `scale(${WindowW / 1813}, ${WindowH / 1020})`)
} }
var conn = $.hubConnection("http://192.168.2.67:7838/signalr", { var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=888888&n=印象之旅&p=${encodeURIComponent( qs: `i=888888&n=印象之旅&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png" "http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}` )}`
}); });
let token = ''; let token = '';
let dataList = []; let dataList = [], dataList2 = [];
var proxy = conn.createHubProxy("annualLeaveHub"); var proxy = conn.createHubProxy("annualLeaveHub");
var audio = document.getElementById('audio'); var audio = document.getElementById('audio');
var personArray = new Array;
var CurPersonNum = 0;
audio.addEventListener('ended', function () { audio.addEventListener('ended', function () {
showSignln() showSignln()
}, false); }, false);
...@@ -202,9 +210,9 @@ ...@@ -202,9 +210,9 @@
token = res.data.token token = res.data.token
} }
} }
}) })
getMsg(); getMsg()
showSignln() showSignln()
function sendMsg() { function sendMsg() {
proxy.invoke("Hello", '1').done(msg => { proxy.invoke("Hello", '1').done(msg => {
console.log(msg) console.log(msg)
...@@ -221,6 +229,18 @@ ...@@ -221,6 +229,18 @@
var newData = JSON.parse(data) var newData = JSON.parse(data)
console.log(newData) console.log(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=>{
let barrage = JSON.parse(data)
console.log()
createDM({img: barrage.p, name: barrage.n, text: barrage.m})
}) })
} }
function playVideo(txt) { function playVideo(txt) {
...@@ -237,8 +257,7 @@ ...@@ -237,8 +257,7 @@
conn.start().done(data => { conn.start().done(data => {
sendMsg(); sendMsg();
}).fail(data => {}); }).fail(data => {});
var personArray = new Array;
var CurPersonNum = 0;
// animate // 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 _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 _out = ['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideOutDown','slideOutLeft','slideOutRight'];
...@@ -258,11 +277,13 @@ ...@@ -258,11 +277,13 @@
} }
$('.show_info').show(); $('.show_info').show();
$('.show_info').addClass(_in[rand_in]); $('.show_info').addClass(_in[rand_in]);
$(".nickname").text(data.EmName) // $(".nickname").text(data.EmName)
$(".Job").text(data.Job) $(".job").text(data.BranchName)
$(".JobYear").text(data.JobYear) $(".JobYear").text(data.JobYear)
$('.show_info').removeClass(_in[rand_in]); $('.show_info').removeClass(_in[rand_in]);
// 更改展示的图片 console.log(data)
chainAnimations(data.EmName)
// 更改展示的图片
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;
...@@ -270,37 +291,63 @@ ...@@ -270,37 +291,63 @@
$('.show_info').addClass(_out[rand_out]); $('.show_info').addClass(_out[rand_out]);
setTimeout(function(){ setTimeout(function(){
$('.show_info').removeClass(_out[rand_out]); $('.show_info').removeClass(_out[rand_out]);
$('.show_info').hide(); $('.show_info').hide();
dataList2.push({
bn: dataList[0].BranchName,
name: dataList[0].EmName,
photo: dataList[0].SignInPhoto,
})
dataList.splice(0, 1); dataList.splice(0, 1);
},1000); },1000);
},1500); },1500);
} }
} }
function chainAnimations(name){
$("#nickname").text('');
for(let i = 0; i < name.length; i++){
(function(i){
setTimeout(function(){
var char = HanziWriter.create('nickname', name[i], {
width: 100,
height: 100,
padding: 5,
showCharacter: false,
showOutline: false,
strokeAnimationSpeed: 10,
delayBetweenStrokes: 15,
strokeColor: '#FFFFFF'
});
char.animateCharacter();
}, 500*i);
})(i)
}
}
function sleep(ms) { function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
} }
var table = new Array;
function createHead(){
for(var i=0;i<200;i++){
personArray.push({
image: dataList2.length && dataList2[i] ? dataList2[i].photo : "../../images/texiao/a.png"
});
}
for (var i = 0; i < personArray.length; i++) {
table[i] = new Object();
if (i < personArray.length) {
table[i] = personArray[i];
table[i].src = personArray[i].thumb_image;
}
table[i].p_x = i % 20 + 1;
table[i].p_y = Math.floor(i / 20) + 1;
}
}
// 生成虚拟数据 // 生成虚拟数据
for(var i=0;i<300;i++){
personArray.push({
image: "../../images/texiao/a.png"
});
}
var table = new Array;
for (var i = 0; i < personArray.length; i++) {
table[i] = new Object();
if (i < personArray.length) {
table[i] = personArray[i];
table[i].src = personArray[i].thumb_image;
}
table[i].p_x = i % 20 + 1;
table[i].p_y = Math.floor(i / 20) + 1;
}
var camera, scene, renderer; var camera, scene, renderer;
var controls; var controls;
var objects = []; var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] }; var targets = { table: [], sphere: [], helix: [], grid: [] };
init();
animate();
function init() { function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 ); camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000; camera.position.z = 3000;
...@@ -410,6 +457,7 @@ ...@@ -410,6 +457,7 @@
transform( targets.table, 2000 ); transform( targets.table, 2000 );
// //
window.addEventListener( 'resize', onWindowResize, false ); window.addEventListener( 'resize', onWindowResize, false );
animate();
} }
function transform( targets, duration ) { function transform( targets, duration ) {
...@@ -453,7 +501,24 @@ ...@@ -453,7 +501,24 @@
function render() { function render() {
renderer.render( scene, camera ); renderer.render( scene, camera );
} }
//初始化弹幕墙
var option = {
container: "#danmu",//弹幕墙的id
barrageLen: 8//弹幕的行数
}
barrageWall.init(option);
// var dc = ['新年快乐啊！！！！！！！！！！！！！！！！！！','鼠年大吉~~~~~~~~~~~~~~~~~~~~~~~', '安徽省开机动画那时觉得你看见你哈阿萨的教案', '啊ui圣诞树单打决赛大军杀到激动剂']
// setInterval(()=>{
// createDM({
// img: '../../images/texiao/robot.png',
// name: '王五',
// text: dc[parseInt(Math.random() * dc.length,4)]
// })
// }, 2000)
// 创建弹幕
function createDM(obj){
barrageWall.upWall(obj.img, obj.name, obj.text);
}
</script> </script>
</body> </body>
......
html/SignIn/robot.html 0 → 100644
View file @ 7d6a943f
<!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>
.main{
height: 100%;
width: 100%;
background: url(../../images/texiao/info_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.dingguang{
height: 100%;
width: 100%;
background: url(../../images/texiao/dengguang.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
left: 0;
top: 0;
}
.robot{
width: 36%;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-23%);
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="main">
<div class="dingguang"></div>
<img class="robot" src="../../images/texiao/robot.png" alt="">
<audio id="audio" muted autoplay>您的浏览器不支持 audio 元素。</audio>
</div>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script>
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=888888&n=印象之旅&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
var dataList = []
conn.start().done(data => {
sendMsg()
}).fail(data => {});
getMsg()
var audio = document.getElementById('audio');
audio.addEventListener('ended', function () {
showSignln()
}, false);
function sendMsg() {
proxy.invoke("Hello", '1').done(msg => {
console.log(msg)
});
}
function getMsg() {
proxy.on("clientMethod", data => {
console.log(data)
});
proxy.on("updateUsersOnlineCount",data=>{
console.log(data)
})
proxy.on("notifySignin", data=>{
var newData = JSON.parse(data)
dataList.push(newData)
})
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
showSignln()
async function showSignln(){
console.log(dataList)
if (dataList.length == 0) {
await sleep(1000);
showSignln()
} else {
$("#audio").attr('src', 'http://tsn.baidu.com/text2audio?tex=%E6%9D%A5%E8%87%AA%E5%BE%AE%E9%80%94%E7%A7%91%E6%8A%80%E7%9A%84%E7%BD%97%E8%B6%85&tok=24.825b6abe0dddd567466b9daef6fd5c5c.2592000.1579746727.282335-15369296&cuid=00-E0-4C-01-80-B4&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3');
if(audio.paused){
audio.play();
}
$('.robot').attr('src', '../../images/texiao/robot.gif');
// 更改展示的图片
setTimeout(function(){
$('.robot').attr('src', '../../images/texiao/robot.png');
dataList.splice(0, 1);
},2000);
}
}
</script>
</body>
</html>
\ No newline at end of file
html/SignIn/signinInfo.html 0 → 100644
View file @ 7d6a943f
<!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">
<link rel="stylesheet" href="../../css/signinInfo.css">
<link rel="stylesheet" href="../../css/moveAnimate.min.css">
</head>
<body>
<div class="main">
<div class="dingguang"></div>
<div class="info_box animated" style="display:none;">
<div class="info_box_left">
<div class="img_box">
<img class="head_img" src="" alt="">
</div>
</div>
<div class="info_box_right">
<p class="name font-cjb"></p>
<p class="brc font-s50 font-cjb"></p>
<p class="job font-s50 font-cjb"></p>
<p class="year font-s50 font-cjb"></p>
<p class="info font-cjb"></p>
</div>
</div>
<audio id="audio" muted autoplay>您的浏览器不支持 audio 元素。</audio>
</div>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script>
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=888887&n=印象之旅&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
var dataList = []
conn.start().done(data => {
sendMsg()
}).fail(data => {});
getMsg()
var audio = document.getElementById('audio');
audio.addEventListener('ended', function () {
showSignln()
}, false);
function sendMsg() {
proxy.invoke("Hello", '1').done(msg => {
console.log(msg)
});
}
function getMsg() {
proxy.on("clientMethod", data => {
console.log(data)
});
proxy.on("updateUsersOnlineCount",data=>{
console.log(data)
})
proxy.on("notifySignin", data=>{
var newData = JSON.parse(data)
dataList.push(newData)
})
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
showSignln()
async function showSignln(){
console.log(dataList)
if (dataList.length == 0) {
await sleep(1000);
showSignln()
} else {
$("#audio").attr('src', 'http://tsn.baidu.com/text2audio?tex=%E6%9D%A5%E8%87%AA%E5%BE%AE%E9%80%94%E7%A7%91%E6%8A%80%E7%9A%84%E7%BD%97%E8%B6%85&tok=24.825b6abe0dddd567466b9daef6fd5c5c.2592000.1579746727.282335-15369296&cuid=00-E0-4C-01-80-B4&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3');
if(audio.paused){
audio.play();
}
let data = dataList[0]
$('.info_box').show();
$('.info_box').addClass('fadeIn');
$(".name").text(data.EmName)
$(".brc").text(data.BranchName)
$(".job").text(data.Job)
$(".info").text(data.Remark)
$(".year").text(data.JobYear)
$(".head_img").attr('src', data.SignInPhoto)
$('.show_info').removeClass('fadeIn');
// 更改展示的图片
if (dataList.length !== 1) {
setTimeout(function(){
$('.info_box').addClass('fadeOut');
setTimeout(function(){
$('.info_box').removeClass('fadeOut');
$('.info_box').hide();
dataList.splice(0, 1);
}, 500);
},2000);
}
}
}
</script>
</body>
</html>
\ No newline at end of file
html/demo/index.html 0 → 100644
View file @ 7d6a943f
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML5 SVG汉字书写笔画特效</title>
<script src="./js/hanzi-writer.min.js"></script>
<script src="./js/polyfill.min.js"></script>
</head>
<body>
<div id="character-target-div"></div>
<button id="animate-button">重写</button>
<script>
var name = "张建国"
chainAnimations(name)
function chainAnimations(name){
for(let i = 0; i < name.length; i++){
(function(i){
setTimeout(function(){
var char = HanziWriter.create('character-target-div', name[i], {
width: 100,
height: 100,
padding: 5,
showCharacter: false,
showOutline: false,
strokeAnimationSpeed: 20,
delayBetweenStrokes: 15,
});
char.animateCharacter();
}, 500*i);
})(i)
}
}
// var char2 = HanziWriter.create('character-target-2', '爽', {
// width: 100,
// height: 100,
// padding: 5,
// showCharacter: false,
// strokeAnimationSpeed: 5,
// delayBetweenStrokes: 10,
// });
// function chainAnimations() {
// var delayBetweenAnimations = 1000; // milliseconds
// char1.hideCharacter();
// char2.hideCharacter();
// char1.animateCharacter({
// onComplete: function() {
// setTimeout(function() {
// char2.animateCharacter();
// }, delayBetweenAnimations);
// }
// });
// }
</script>
</body>
</html>
\ No newline at end of file
html/demo/js/hanzi-writer.min.js 0 → 100644
View file @ 7d6a943f
This diff is collapsed.
html/demo/js/polyfill.min.js 0 → 100644
View file @ 7d6a943f
/* Disable minification (remove `.min` from URL path) for more info */
(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
\ No newline at end of file
images/texiao/robot.gif 0 → 100644
View file @ 7d6a943f
This diff is collapsed.
js/barrageWallPc.js 0 → 100644
View file @ 7d6a943f
var barrageWall={
container:null,//容器选择器
barrageLen:null,//弹幕的条数
lastElem:0,//弹幕出现的位置
overlapElem:-1,//如果大于0则表示每条弹幕轨道上都有弹幕未全部出现，需要重叠定位在弹幕轨道上
barrage:[],//弹幕墙
barrageOffset:[],//弹幕墙上最后一条弹幕的偏移量
init:function(option){
if(option.container===undefined){
console.error("必须指定 container 属性，container为弹幕容器的选择器");
return false;
}
if(option.barrageLen===undefined){
console.error("必须指定 barrageLen 属性，barrageLen为弹幕轨道的数");
return false;
}
this.container=option.container;
this.barrageLen=option.barrageLen;
for(var i=0;i<this.barrageLen;i++){//建立弹幕墙，此处的循环次数为当前页面运行的弹幕行数
this.barrage[i]=new Array();
}
},
upWall:function(img,user,txt){//弹幕上墙
if(!this.barrageLen&&this.container){
console.error("未检测到container和barrageLen属性，请先初始化弹幕墙并指定container和barrageLen属性");
return false;
}
this.positionWall();//从上至下找出每条弹幕轨道上最后一条弹幕移动的位置
var elem = $('<div></div>')//创建元素
.addClass('list')//添加样式
.css("top",this.lastElem*6.5+"rem")//定位
.html("<img src='"+img+"' alt=''/><span class='bullet-name'>"+user+"</span>："+txt)//添加内容
.appendTo(this.container);//追加在父元素后面
this.barrage[this.lastElem].push(elem);//追加在数组中
setTimeout(function(){//200ms防止元素动画不执行
elem.addClass("animate");
},200);
setTimeout(function(){//25s后动画执行完毕，从数组和页面中移除
for(var i=0;i<this.barrage.length;i++){
for(var x=0;x<this.barrage[i].length;x++){
if(this.barrage[i][x]===elem){
this.barrage[i].splice(x,1);
break;
}
}
}
elem.remove();
}.bind(this),25000);
},
positionWall: function () {
for(var i=0;i<=this.barrage.length;i++){//从上至下找出每条弹幕轨道上最后一条弹幕移动的位置
if(i===this.barrage.length){//每条弹幕轨道上都有弹幕未全部出现的情况
this.minOffset();//弹幕墙上所有的位置都有弹幕且都未出现完毕时，找出他们当中完全最先的那个
}else{//若有某个最后一条弹幕已经全部出现
if(this.afterOffset(i))break;//找到弹幕出现的位置，找到则退出循环
}
}
},
minOffset: function (){//找出所有弹幕轨道上最后一个弹幕中最先出现的那个（偏移量减去自身宽度）
var minOffset=0;
for(var x=0;x<this.barrage.length;x++){
var elem=this.barrage[x][this.barrage[x].length-1];//获取当前弹幕轨道上最后一条弹幕
var aboveWidth=elem.width();//获取它的宽度
var matrix=elem.css('transform');//获取它的矩阵值
this.barrageOffset[x]=matrix==="none"?-aboveWidth:-parseInt(matrix.split(",")[4])-aboveWidth;//matrix为none则弹幕translateX为0
minOffset=this.barrageOffset[x] > this.barrageOffset[minOffset]?x:minOffset;//找到最先出现的弹幕
}
this.lastElem=minOffset;
},
afterOffset: function (i){//找到弹幕出现的位置
if(this.barrage[i].length===0){//为true则表示当前弹幕轨道没有弹幕，则当前弹幕放在改轨道上
this.lastElem=i;
this.overlapElem=-1;
return true;
}else{//当前弹幕轨道上有弹幕
var elem=this.barrage[i][this.barrage[i].length-1];//获取当前弹幕轨道上最后一条弹幕
var aboveWidth=elem.width();//获取它的宽度
var matrix=elem.css('transform');//获取它的矩阵值
if(matrix!=="none"){
var aboveTransform=parseInt(matrix.split(",")[4]);//取出最后一条弹幕的矩阵值中X轴的偏移量，即translateX
if(-aboveTransform-aboveWidth>2000){//50为间隔 为true则表示当前弹幕轨道上最后一条弹幕已经全部出现，则当前弹幕放在改轨道上
this.lastElem=i;
this.overlapElem=-1;
return true;
}
}
}
return false;
}
}
\ No newline at end of file
js/mian.js
View file @ 7d6a943f
...@@ -3,7 +3,7 @@ let locationName = window.location.hostname; ...@@ -3,7 +3,7 @@ let locationName = window.location.hostname;
function getApiUrl() { function getApiUrl() {
let url = { let url = {
// urlPost: "https://reborn.oytour.com/api/common/post", // urlPost: "https://reborn.oytour.com/api/common/post",
urlPost: locationName.indexOf('oytour') !== -1 ? "https://reborn.oytour.com/api/common/post" : "http://192.168.2.67:8025/api/common/post", urlPost: locationName.indexOf('oytour') !== -1 ? "https://reborn.oytour.com/api/common/post" : "http://192.168.2.65:8025/api/common/post",
//urlJava: locationName.indexOf('oytour') !== -1 ? "https://efficient.oytour.com/" : "http://192.168.2.215:9000/" //urlJava: locationName.indexOf('oytour') !== -1 ? "https://efficient.oytour.com/" : "http://192.168.2.215:9000/"
urlJava: "https://efficient.oytour.com/" urlJava: "https://efficient.oytour.com/"
} }
......
js/moveJs/hanzi-writer.min.js 0 → 100644
View file @ 7d6a943f
This diff is collapsed.
js/moveJs/polyfill.min.js 0 → 100644
View file @ 7d6a943f
/* Disable minification (remove `.min` from URL path) for more info */
(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
\ No newline at end of file
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