新增弹幕
parent
9a5a4572c6
commit
3e5e948a3d
|
|
@ -49,13 +49,14 @@ img {
|
||||||
display: block;
|
display: block;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
/* 去掉a标签的下划线，并修改字体颜色 */
|
/* 去掉a标签的下划线，并修改字体颜色 */
|
||||||
a {
|
a {
|
||||||
color: #666;
|
color: #666;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
/* 手机端去除a标签点击时的背景样式 */
|
/* 手机端去除a标签点击时的背景样式 */
|
||||||
-webkit-tap-highlight-color: transparent;
|
/* -webkit-tap-highlight-color: transparent; */
|
||||||
/* 去除边距 */
|
/* 去除边距 */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
198
css/style.css
198
css/style.css
|
|
@ -45,9 +45,26 @@
|
||||||
}
|
}
|
||||||
/* 导航 end */
|
/* 导航 end */
|
||||||
.footer {
|
.footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 15px 45px 6px 45px;
|
||||||
|
box-shadow: 0px -3px 10px rgba(178, 45, 42,.5);
|
||||||
|
}
|
||||||
|
.footer a {
|
||||||
|
width: 55px;
|
||||||
|
height: 50px;
|
||||||
|
object-fit: inherit;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.footer a:nth-child(2){
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
margin-top: -65px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.introduce-box {
|
.introduce-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -73,18 +90,195 @@
|
||||||
background: url(../imgs/public/foot-img.png) no-repeat;
|
background: url(../imgs/public/foot-img.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
padding-bottom: 71px;
|
||||||
}
|
}
|
||||||
.huigu-box {
|
.huigu-box {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 20px 10px 16px 10px;
|
padding: 20px 15px 16px 15px;
|
||||||
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
|
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
|
||||||
color: #b22f2c;
|
color: #b22f2c;
|
||||||
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
.huigu-box p {
|
.huigu-box p {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.video-box {
|
||||||
|
height: 10rem;
|
||||||
|
margin: 15px 0px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.cover-img {
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.play-img {
|
||||||
|
width: 65px;
|
||||||
|
height: 65px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
}
|
}
|
||||||
.huigu-box span {
|
.huigu-box span {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.video-play-box {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(0,0,0,.5);
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.video-play-box img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.info-box {
|
||||||
|
position: fixed;
|
||||||
|
top: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgba(255,255,255,1);
|
||||||
|
z-index: 2;
|
||||||
|
padding: 20px;
|
||||||
|
transition: all .5s ease-in-out;
|
||||||
|
color: #000000;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding-bottom: 84px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.info-box h1{
|
||||||
|
color: #b22f2c!important;
|
||||||
|
}
|
||||||
|
.taskBox {
|
||||||
|
top: 0!important;
|
||||||
|
}
|
||||||
|
.close-box {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
transition: all .5s ease-in-out;
|
||||||
|
}
|
||||||
|
.btn-close {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.close-box div {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(178, 45, 42,1);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 寄语 */
|
||||||
|
.box-content {
|
||||||
|
background: url(../imgs/public/massage-icon.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-attachment:fixed;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.bao-box {
|
||||||
|
position: fixed;
|
||||||
|
top: 200px;
|
||||||
|
bottom: 71px;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
.massage-slide {
|
||||||
|
height: 190px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.item-slide {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(255,255,255,.5);
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.massage-slide img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.massage-box {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 40px;
|
||||||
|
left: 30px;
|
||||||
|
right: 30px;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
.massage-box ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
.massage-box ul li {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #b22f2c;
|
||||||
|
border: 1px solid #b22f2c;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.massage-box ul .itemActive {
|
||||||
|
background-color: #b22f2c;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.massage-box span {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.fun-box {
|
||||||
|
position: fixed;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 130px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.fun-box img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-top: -30px;
|
||||||
|
}
|
||||||
|
.send-img {
|
||||||
|
width: 50px!important;
|
||||||
|
height: 50px!important;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,501 @@
|
||||||
|
/*-----------------------------------------*/
|
||||||
|
/****************公用样式*******************/
|
||||||
|
/*-----------------------------------------*/
|
||||||
|
.clear-both::after {
|
||||||
|
clear: both;
|
||||||
|
content: ".";
|
||||||
|
display: block;
|
||||||
|
visibility: hidden;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lf {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rt {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition {
|
||||||
|
-webkit-transition: all .5s ease;
|
||||||
|
-o-transition: all .5s ease;
|
||||||
|
-moz-transition: all .5s ease;
|
||||||
|
transition: all .5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transform-scale {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-transform-scale {
|
||||||
|
-webkit-transform: scale(1.05);
|
||||||
|
-moz-transform: scale(1.05);
|
||||||
|
-ms-transform: scale(1.05);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-ban {
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list {
|
||||||
|
scrollbar-face-color: #c7c7c7;
|
||||||
|
scrollbar-highlight-color: #c7c7c7;
|
||||||
|
scrollbar-3dlight-color: #c7c7c7;
|
||||||
|
scrollbar-darkshadow-color: #c7c7c7;
|
||||||
|
scrollbar-Shadow-color: #c7c7c7;
|
||||||
|
scrollbar-arrow-color: #c7c7c7;
|
||||||
|
scrollbar-track-color: #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
height: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list::-webkit-scrollbar-button:end:increment,
|
||||||
|
.track-list::-webkit-scrollbar-button:start:decrement {
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list::-webkit-scrollbar-track-piece {
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
-webkit-border-bottom-right-radius: 4px;
|
||||||
|
-webkit-border-bottom-left-radius: 4px;
|
||||||
|
background: #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list::-webkit-scrollbar-thumb:vertical {
|
||||||
|
height: 50px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list::-webkit-scrollbar-thumb:horizontal {
|
||||||
|
width: 50px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-----------------------------------------*/
|
||||||
|
/****************元素样式*******************/
|
||||||
|
/*-----------------------------------------*/
|
||||||
|
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
|
||||||
|
html {
|
||||||
|
color: #fff;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
background: #eff3f5;
|
||||||
|
background: -webkit-linear-gradient(left, #f6ad36, #cf5a5d);
|
||||||
|
/* Safari 5.1 - 6.0 */
|
||||||
|
background: -o-linear-gradient(right, #f6ad36, #cf5a5d);
|
||||||
|
/* Opera 11.1 - 12.0 */
|
||||||
|
background: -moz-linear-gradient(right, #f6ad36, #cf5a5d);
|
||||||
|
/* Firefox 3.6 - 15 */
|
||||||
|
background: linear-gradient(to right, #f6ad36, #cf5a5d);
|
||||||
|
/* 标准的语法 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 清除内外边距 **/
|
||||||
|
body,
|
||||||
|
div,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
li,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
form,
|
||||||
|
fieldset,
|
||||||
|
legend,
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
hr,
|
||||||
|
button,
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HTML5 媒体文件跟 img 保持一致 */
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 要注意表单元素并不继承父级 font 的问题 */
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 去掉各 table cell 的边距并让其边重合 */
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IE bug fixed: th 不继承 text-align */
|
||||||
|
th {
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 去除默认边框 */
|
||||||
|
fieldset,
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ie6 7 8(q) bug 显示为行内表现 */
|
||||||
|
iframe {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 去掉 firefox 下此元素的边框 */
|
||||||
|
abbr,
|
||||||
|
acronym {
|
||||||
|
border: 0;
|
||||||
|
font-variant: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 一致的 del 样式 */
|
||||||
|
del {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
address,
|
||||||
|
caption,
|
||||||
|
cite,
|
||||||
|
code,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
th,
|
||||||
|
var {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 对齐是排版最重要的因素, 别让什么都居中 */
|
||||||
|
caption,
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 解决ie下重复最后字符 */
|
||||||
|
q:before,
|
||||||
|
q:after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统一上标和下标 */
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 默认不显示下划线，保持页面简洁 */
|
||||||
|
ins,
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 设置默认字体 **/
|
||||||
|
body,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font: 14px helvetica neue, arial, hiragino sans gb, microsoft yahei, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
address,
|
||||||
|
cite,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
var {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 将斜体扶正 */
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: courier new, courier, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统一等宽字体 */
|
||||||
|
small {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小于 12px 的中文很难阅读，让 small 正常化 */
|
||||||
|
/** 重置列表元素 **/
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置文本格式元素 **/
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition: all .5s ease;
|
||||||
|
-o-transition: all .5s ease;
|
||||||
|
-moz-transition: all .5s ease;
|
||||||
|
transition: all .5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #9ebee7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 清除选中状态蓝色边框 **/
|
||||||
|
a,
|
||||||
|
img,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 定义布局方式 **/
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=submit] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************/
|
||||||
|
/********页面样式**********/
|
||||||
|
/**************************/
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: fixed;
|
||||||
|
top: 200px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*输入框的样式*/
|
||||||
|
.input-box {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100px;
|
||||||
|
padding: 30px;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, .6);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box input {
|
||||||
|
width: 320px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition: all .5s;
|
||||||
|
-moz-transition: all .5s;
|
||||||
|
-ms-transition: all .5s;
|
||||||
|
-o-transition: all .5s;
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box input:focus {
|
||||||
|
box-shadow: 3px 5px 20px rgba(0, 0, 0, .8), 2px 1px 3px rgba(0, 0, 0, .6) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box .btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
background: #cf5a5d;
|
||||||
|
background: -webkit-linear-gradient(left, #f6ad36, #cf5a5d);
|
||||||
|
/* Safari 5.1 - 6.0 */
|
||||||
|
background: -o-linear-gradient(right, #f6ad36, #cf5a5d);
|
||||||
|
/* Opera 11.1 - 12.0 */
|
||||||
|
background: -moz-linear-gradient(right, #f6ad36, #cf5a5d);
|
||||||
|
/* Firefox 3.6 - 15 */
|
||||||
|
background: linear-gradient(to right, #f6ad36, #cf5a5d);
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-transition: all .5s;
|
||||||
|
-moz-transition: all .5s;
|
||||||
|
-ms-transition: all .5s;
|
||||||
|
-o-transition: all .5s;
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box .btn:hover {
|
||||||
|
box-shadow: 3px 5px 20px rgba(0, 0, 0, .8), 2px 1px 3px rgba(255, 255, 255, .6) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*此处为每条弹幕的样式*/
|
||||||
|
.container .list {
|
||||||
|
position: absolute;
|
||||||
|
left: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 3px #000;
|
||||||
|
-webkit-transition: -webkit-transform 25s linear;
|
||||||
|
-moz-transition: -moz-transform 25s linear;
|
||||||
|
-o-transition: -o-transform 25s linear;
|
||||||
|
transition: transform 25s linear;
|
||||||
|
z-index: 999;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(255,255,255,.5);
|
||||||
|
padding: 4px 6px;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 900;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*此处弹幕的移动动画，使用transform不会引起页面的重绘，性能更好*/
|
||||||
|
.container .list.animate {
|
||||||
|
-webkit-transform: translateX(-3420px);
|
||||||
|
-moz-transform: translateX(-3420px);
|
||||||
|
-ms-transform: translateX(-3420px);
|
||||||
|
-o-transform: translateX(-3420px);
|
||||||
|
transform: translateX(-3420px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .list .content {
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .list img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 752 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
65
index.html
65
index.html
|
|
@ -60,33 +60,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body style="background-color: #b03a38;">
|
<body>
|
||||||
<!-- banner轮播图 -->
|
|
||||||
<!-- <div class="banner-swiper swiper">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="imgs/secondary/banner/banner-01.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
|
||||||
<h1 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-01</h1>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="imgs/secondary/banner/banner-02.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
|
||||||
<h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-02</h1>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="imgs/secondary/banner/banner-03.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
|
||||||
<h1 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-03</h1>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="imgs/secondary/banner/banner-04.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
|
||||||
<h1 class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-04</h1>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="imgs/secondary/banner/banner-05.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
|
||||||
<h1 class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-05</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div> -->
|
|
||||||
<!-- 主体内容 -->
|
<!-- 主体内容 -->
|
||||||
<main class="main" style="background-color: #FFFFFF;">
|
<main class="main" style="background-color: #FFFFFF;">
|
||||||
<img src="imgs/public/head-img.png">
|
<img src="imgs/public/head-img.png">
|
||||||
|
|
@ -95,23 +69,52 @@
|
||||||
<span class="clips5">
|
<span class="clips5">
|
||||||
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
</span>
|
</span>
|
||||||
<p>>>查看详情</p>
|
<p onclick="checkInfo()">>>查看详情</p>
|
||||||
|
<div class="info-box">
|
||||||
|
<h1>金沙酒业介绍</h1>
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
|
||||||
|
<div class="close-box" onclick="closeEv()"><div>关闭</div></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 回顾、历程 -->
|
<!-- 回顾、历程 -->
|
||||||
<div class="review-box">
|
<div class="review-box">
|
||||||
<div class="huigu-box">
|
<div class="huigu-box">
|
||||||
<p>- 金沙酒业国营元70周年献礼片 -</p>
|
<p>- 金沙酒业国营元70周年献礼片 -</p>
|
||||||
<div>
|
<div class="video-box">
|
||||||
|
<img class="cover-img" src="imgs/public/cover-icon.png" >
|
||||||
|
<img onclick="playVedio()" class="play-img" src="imgs/public/play-icon.png" >
|
||||||
|
</div>
|
||||||
|
<span>感恩奋进70年，致敬时代金沙人！</span>
|
||||||
|
</div>
|
||||||
|
<div class="huigu-box">
|
||||||
|
<p>- 金沙酒业国营元70周年献礼片 -</p>
|
||||||
|
<div class="video-box">
|
||||||
|
<img class="cover-img" src="imgs/public/cover-icon.png" >
|
||||||
|
<img onclick="playVedio()" class="play-img" src="imgs/public/play-icon.png" >
|
||||||
</div>
|
</div>
|
||||||
<span>感恩奋进70年，致敬时代金沙人！</span>
|
<span>感恩奋进70年，致敬时代金沙人！</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 视频播放 -->
|
||||||
|
<div class="video-play-box" id="video-box">
|
||||||
|
<video id="video_id" width="100%" height="360" src="" controls poster="imgs/public/cover-icon.png"></video>
|
||||||
|
<img onclick="closeVideo()" src="imgs/public/close-icon.png" width="30" height="30" >
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<!-- 底部部分 -->
|
<!-- 底部部分 -->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
|
<a href="javascript:;"><img src="imgs/public/yinxiang-icon.png" ></a>
|
||||||
|
<a href="javascript:;"><img src="imgs/public/vr-icon.png" ></a>
|
||||||
|
<a href="pages/htmls/massage.html"><img src="imgs/public/jiyu-icon.png" ></a>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
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*38+"px")//定位
|
||||||
|
// .html("<img src='"+img+"' alt=''/>"+user+"："+txt)//添加内容
|
||||||
|
.html("<img src='"+img+"' alt=''/>"+user+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>50){//50为间隔 为true则表示当前弹幕轨道上最后一条弹幕已经全部出现，则当前弹幕放在改轨道上
|
||||||
|
this.lastElem=i;
|
||||||
|
this.overlapElem=-1;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -48,4 +48,34 @@ jQuery(function($){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
|
||||||
|
$(".massage-box ul li").on('click',function(){
|
||||||
|
$(".massage-box ul li").removeClass('itemActive');
|
||||||
|
$(this).addClass('itemActive');
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 播放视频
|
||||||
|
function playVedio(){
|
||||||
|
var video = document.getElementById("video_id");
|
||||||
|
var videoBox = document.getElementsByClassName('video-play-box');
|
||||||
|
document.getElementById("video-box").style.display = "flex";
|
||||||
|
$("#video_id").attr("src",'imgs/secondary/1')
|
||||||
|
video.play(); //播放控制
|
||||||
|
}
|
||||||
|
// 关闭视频
|
||||||
|
function closeVideo() {
|
||||||
|
var video = document.getElementById("video_id");
|
||||||
|
var videoBox = document.getElementsByClassName('video-play-box');
|
||||||
|
document.getElementById("video-box").style.display = "none";
|
||||||
|
video.pause(); //暂停控制
|
||||||
|
}
|
||||||
|
// 查看详情
|
||||||
|
function checkInfo(){
|
||||||
|
$('.info-box').addClass('taskBox');
|
||||||
|
$('.close-box').addClass('btn-close');
|
||||||
|
}
|
||||||
|
// 关闭详情
|
||||||
|
function closeEv(){
|
||||||
|
$('.info-box').removeClass('taskBox');
|
||||||
|
$('.close-box').removeClass('btn-close');
|
||||||
|
}
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||||
|
<title>弹幕</title>
|
||||||
|
<link rel="stylesheet" href="../../css/wall.css">
|
||||||
|
<script></script>
|
||||||
|
</head>
|
||||||
|
<style type="text/css" id="171068071682"></style>
|
||||||
|
<body style="">
|
||||||
|
<div id="container" class="container">
|
||||||
|
<div class="list animate" style="top: 0px;"><img src="images/aq.png" alt="">我是说话人：我说的话</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-box">
|
||||||
|
<!--限制用户输入的文字长度，尽量避免用户输入的内容长度超过屏幕的宽度-->
|
||||||
|
<input type="text" maxlength="20" placeholder="说点什么吧~">
|
||||||
|
<button id="btn" class="btn">发送</button>
|
||||||
|
</div>
|
||||||
|
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||||||
|
<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
|
||||||
|
<script src="../../js/barrageWall.js"></script>
|
||||||
|
<script>
|
||||||
|
$("#btn").click(function() {
|
||||||
|
var vla = $(this).prev().val().replace(/(^\s*)|(\s*$)/g, "");
|
||||||
|
if (vla) {
|
||||||
|
barrageWall.upWall("../../favicon.ico", "我是说话人", vla); //初始化弹幕墙
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
var option = {
|
||||||
|
container: "#container", //弹幕墙的id
|
||||||
|
barrageLen: 5 //弹幕的行数
|
||||||
|
}
|
||||||
|
barrageWall.init(option); //初始化弹幕墙
|
||||||
|
barrageWall.upWall("../../favicon.ico", "我是说话人", "我说的话"); //初始化弹幕墙
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- 更加标准的 lang 属性写法 zh-cmn-Hant:繁体中文，zh-cmn-Hans:简体中文 -->
|
||||||
|
<html lang="zh-cmn-Hans">
|
||||||
|
<head>
|
||||||
|
<!-- 声明文档使用的字符编码 -->
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<!-- 优先使用 IE 最新版本和 Chrome -->
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<!-- 网页作者 -->
|
||||||
|
<meta name="author" content="吃肉的饺子,2659004835@qq.com" />
|
||||||
|
<!-- 网站说明 -->
|
||||||
|
<meta name="description" content="基于SEO网站" />
|
||||||
|
<!-- 关键字 -->
|
||||||
|
<meta name="keywords" content="基于SEO网站" />
|
||||||
|
<!-- 防页面被转码----根据浏览器的屏幕大小自适应的展现合适的效果，同时适合在移动设备和电脑上进行浏览 -->
|
||||||
|
<meta name="applicable-device" content="pc,mobile" />
|
||||||
|
<meta name="MobileOptimized" content="width" />
|
||||||
|
<meta name="HandheldFriendly" content="true" />
|
||||||
|
<!-- 限制所有的搜索引擎建立网页快照 -->
|
||||||
|
<meta name="robots" content="noarchive"/>
|
||||||
|
<!-- 为移动设备添加 viewport -->
|
||||||
|
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
|
||||||
|
<!-- 控制选项卡颜色，手机端切换软件时 -->
|
||||||
|
<meta name="theme-color" content="#db5945">
|
||||||
|
<!-- 禁止 Chrome 浏览器中自动提示翻译 -->
|
||||||
|
<meta name="google" value="notranslate">
|
||||||
|
<!-- 添加 favicon icon icon在线制作链接：（比特虫）https://www.bitbug.net/ -->
|
||||||
|
<link rel="shortcut icon" type="image/ico" href="../../favicon.ico" />
|
||||||
|
<!-- 网站标题 -->
|
||||||
|
<title>金沙酒业</title>
|
||||||
|
<!-- 标签基本样式 -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
|
||||||
|
<!-- swiper轮播 -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/animate.min.css"/>
|
||||||
|
<!-- 自定义样式 -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/wall.css"/>
|
||||||
|
<!-- 外部js -->
|
||||||
|
<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<!-- <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script> -->
|
||||||
|
<script src="../../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="../../js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<!-- 自定义js -->
|
||||||
|
<script src="../../js/javascript.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
// 更新js文件版本，达到清除js带来的缓存
|
||||||
|
var scripts = document.getElementsByTagName("script");
|
||||||
|
for(var i = 0;i < scripts.length; i++){
|
||||||
|
if(scripts[i].src){
|
||||||
|
scripts[i].src = scripts[i].src+"?t="+new Date().getTime();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 更新css文件版本，达到清除css带来的缓存
|
||||||
|
var csss = document.getElementsByTagName("link");
|
||||||
|
for(var i = 0;i < csss.length; i++){
|
||||||
|
if(csss[i].href){
|
||||||
|
csss[i].href = csss[i].href+"?t="+new Date().getTime();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<main class="main">
|
||||||
|
<div class="box-content">
|
||||||
|
<div class="bao-box">
|
||||||
|
<div class="container massage-slide" id="container">
|
||||||
|
<!-- <div class="item-slide">
|
||||||
|
<img src="../../imgs/public/close-icon.png" >
|
||||||
|
<p>“勿忘昨天，无愧今天，不负明天”</p>
|
||||||
|
</div>
|
||||||
|
<div class="item-slide">
|
||||||
|
<img src="../../imgs/public/close-icon.png" >
|
||||||
|
<p>“勿忘昨天，无愧今天，不负明天”</p>
|
||||||
|
</div>
|
||||||
|
<div class="item-slide">
|
||||||
|
<img src="../../imgs/public/close-icon.png" >
|
||||||
|
<p>“勿忘昨天，无愧今天，不负明天”</p>
|
||||||
|
</div>
|
||||||
|
<div class="item-slide">
|
||||||
|
<img src="../../imgs/public/close-icon.png" >
|
||||||
|
<p>“勿忘昨天，无愧今天，不负明天”</p>
|
||||||
|
</div>
|
||||||
|
<div class="item-slide">
|
||||||
|
<img src="../../imgs/public/close-icon.png" >
|
||||||
|
<p>“勿忘昨天，无愧今天，不负明天”</p>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="massage-box">
|
||||||
|
<ul>
|
||||||
|
<li><span>·</span><p>金沙回沙酒，畅销贵州60年</p></li>
|
||||||
|
<li><span>·</span><p>赤水河上游金沙产区</p></li>
|
||||||
|
<li><span>·</span><p>勿忘昨天，无愧今天，不负明天</p></li>
|
||||||
|
<li><span>·</span><p>百年金沙，百亿酒业</p></li>
|
||||||
|
<li><span>·</span><p>金沙酒业坚持初心，砥砺前行</p></li>
|
||||||
|
<li><span>·</span><p>摘要酱香酒，高端新选择</p></li>
|
||||||
|
<li><span>·</span><p>祝金沙酒业蓬勃发展，日胜一日</p></li>
|
||||||
|
<li><span>·</span><p>感恩奋进70年，致敬时代金杀人</p></li>
|
||||||
|
<li><span>·</span><p>铸一流产区，塑千亿品牌</p></li>
|
||||||
|
<li><span>·</span><p>风雨同舟70载，共迎金沙新时代</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<div class="fun-box">
|
||||||
|
<div class="fun-item">
|
||||||
|
<img src="../../imgs/public/hear.png" >
|
||||||
|
<img onclick="sayEv()" src="../../imgs/public/say.png" >
|
||||||
|
</div>
|
||||||
|
<a href="javascript:;"><img class="send-img" src="../../imgs/public/send-icon.png" ></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- 底部部分 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<a href="javascript:;"><img src="../../imgs/public/yinxiang-icon.png" ></a>
|
||||||
|
<a href="javascript:;"><img src="../../imgs/public/vr-icon.png" ></a>
|
||||||
|
<a href="javascript:;"><img src="../../imgs/public/jiyu-icon.png" ></a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||||||
|
<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
|
||||||
|
<script src="../../js/barrageWall.js"></script>
|
||||||
|
<script>
|
||||||
|
var val = '';
|
||||||
|
var times = 0;
|
||||||
|
var timer = null;
|
||||||
|
var sayArr = [
|
||||||
|
'金沙回沙酒，畅销贵州60年',
|
||||||
|
'赤水河上游金沙产区',
|
||||||
|
'勿忘昨天，无愧今天，不负明天',
|
||||||
|
'百年金沙，百亿酒业',
|
||||||
|
'金沙酒业坚持初心，砥砺前行',
|
||||||
|
'摘要酱香酒，高端新选择',
|
||||||
|
'祝金沙酒业蓬勃发展，日胜一日',
|
||||||
|
'感恩奋进70年，致敬时代金杀人',
|
||||||
|
'铸一流产区，塑千亿品牌',
|
||||||
|
'风雨同舟70载，共迎金沙新时代',
|
||||||
|
]
|
||||||
|
// 内容选择事件
|
||||||
|
$(".massage-box ul li").click(function() {
|
||||||
|
// var val = $(this).prev().val().replace(/(^\s*)|(\s*$)/g, "");
|
||||||
|
val = `“${$(this).find('p').text()}”`
|
||||||
|
// if (val) {
|
||||||
|
// barrageWall.upWall("../../favicon.ico", "", val); //初始化弹幕墙
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
// 留言事件
|
||||||
|
function sayEv(){
|
||||||
|
$('.fun-item').css('display','none');
|
||||||
|
$('.send-img').css('display','flex');
|
||||||
|
$('.massage-box').css('display','block')
|
||||||
|
}
|
||||||
|
// 发送事件
|
||||||
|
$('.send-img').on('click',function(){
|
||||||
|
if(times==0){
|
||||||
|
times++;
|
||||||
|
barrageWall.upWall("../../favicon.ico", "", val); //初始化弹幕墙
|
||||||
|
setTimeout(()=>{
|
||||||
|
times = 0;
|
||||||
|
},1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 随机播放弹幕
|
||||||
|
timer = setInterval(()=>{
|
||||||
|
barrageWall.upWall("../../favicon.ico", "", `“${sayArr[Math.floor(Math.random()*sayArr.length)]}”`); //初始化弹幕墙
|
||||||
|
},500)
|
||||||
|
// 关闭内容框
|
||||||
|
$('.container').on('click',function(){
|
||||||
|
$('.fun-item').css('display','inline-block');
|
||||||
|
$('.send-img').css('display','none');
|
||||||
|
$('.massage-box').css('display','none')
|
||||||
|
})
|
||||||
|
// 弹幕墙
|
||||||
|
$(function() {
|
||||||
|
var option = {
|
||||||
|
container: "#container", //弹幕墙的id
|
||||||
|
barrageLen: 5 //弹幕的行数
|
||||||
|
}
|
||||||
|
barrageWall.init(option); //初始化弹幕墙
|
||||||
|
// barrageWall.upWall("../../favicon.ico", "", "我说的话"); //初始化弹幕墙
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue