chen
/
jinsha
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增提示，新增首页动效

master
chen 2021-12-13 12:08:32 +08:00
parent 7b3303fa22
commit 8c3df9c43d
13 changed files with 134 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/style.css
View File

@ -52,7 +52,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: #fff; background-color: #fff;
padding: 15px 45px 6px 45px; padding: 6px 45px 10px 45px;
box-shadow: 0px -3px 10px rgba(178, 45, 42,.5); box-shadow: 0px -3px 10px rgba(178, 45, 42,.5);
} }
.footer a { .footer a {
@ -286,6 +286,57 @@
display: none; display: none;
} }
.header-box {background: url(../imgs/public/logo-back.png) no-repeat;background-size: 100% 100%;}
.logo-box {margin: 0px 70px;padding: 90px 0 20px 0;}
.logo-box img {
animation: logod 1s linear forwards;
}
@keyframes logod{
from{opacity: 0;}
to{opacity: 1;}
}
.zhuti-box img {
animation: zhuti .5s linear forwards;
}
@keyframes zhuti{
from{transform: translateY(-25px);}
to{transform: translateY(0);}
}
.zhuti-box {margin: 0px 40px;}
.item-box {padding: 20px 20px 10px 20px;display: flex;justify-content: center;align-items: center;}
.item-box div {width: 25%;display: flex;flex-direction: column; align-items: center;position: relative;color: #FFFFFF;}
.item-box div::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: block;
height: 50%;
border-right: 1px solid #FFFFFF;
}
.item-box div:last-child::after {
border-right: none;
}
.item-box div img {width: 22px;height: auto;}
.item-box div span {font-size: 12px;transform: scale(.7);flex-shrink: 0;}
.item-box div p {font-size: 15px;flex-shrink: 0;margin-top: -4px;}
.item-box div img {
animation: licheng .5s linear forwards;
}
@keyframes licheng{
from{transform: translateY(-25px);}
to{transform: translateY(0);}
}
.item-box div p {
animation: zhan .5s linear forwards;
}
@keyframes zhan{
from{transform: translateY(25px);}
to{transform: translateY(0);}
}
.tank {display: none; position: fixed;z-index: 100;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: rgba(0,0,0,.5);border-radius: 2px;color: #FFFFFF;padding: 6px 16px;font-size: 14px;}
.swiper-container {width: 100%;height: 160px;overflow: visible!important;margin-bottom: 20px;} .swiper-container {width: 100%;height: 160px;overflow: visible!important;margin-bottom: 20px;}
.swiper-container .swiper-wrapper .swiper-slide{ border-radius: 12px;width: 57%;position: relative;} .swiper-container .swiper-wrapper .swiper-slide{ border-radius: 12px;width: 57%;position: relative;}
.swiper-container .swiper-wrapper .swiper-slide img{height: 160px; border-radius: 12px;} .swiper-container .swiper-wrapper .swiper-slide img{height: 160px; border-radius: 12px;}

BIN
imgs/public/jiyu-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
imgs/public/licheng.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
imgs/public/logo-back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 923 KiB

BIN
imgs/public/sheying.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
imgs/public/shiguang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
imgs/public/wenxian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
imgs/public/yinxiang-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
imgs/secondary/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
imgs/secondary/zhuti.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

42
index.html
View File

@ -63,13 +63,39 @@
<body> <body>
<!-- 主体内容 --> <!-- 主体内容 -->
<main class="main" style="background-color: #FFFFFF;"> <main class="main" style="background-color: #FFFFFF;">
<img src="imgs/public/head-img.png"> <div class="header-box">
<div class="logo-box"><img src="imgs/secondary/logo.png"></div>
<div class="zhuti-box"><img src="imgs/secondary/zhuti.png" ></div>
<div class="item-box">
<div>
<img src="imgs/public/licheng.png">
<span>奋进中的金沙</span>
<p>历程展</p>
</div>
<div>
<img src="imgs/public/wenxian.png">
<span>记忆中的金沙</span>
<p>文献展</p>
</div>
<div>
<img src="imgs/public/shiguang.png">
<span>时光里的金沙</span>
<p>器物展</p>
</div>
<div>
<img src="imgs/public/sheying.png">
<span>镜头下的金沙</span>
<p>摄影展</p>
</div>
</div>
</div>
<!-- <img src="imgs/public/head-img.png"> -->
<div class="introduce-box"> <div class="introduce-box">
<div class="introduce-content"> <div class="introduce-content">
<span class="clips5"> <span class="clips5">
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。 值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
</span> </span>
<p onclick="checkInfo()">>>查看详情</p> <!-- <p onclick="checkInfo()">>>查看详情</p> -->
<div class="info-box"> <div class="info-box">
<h1>金沙酒业介绍</h1> <h1>金沙酒业介绍</h1>
值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。 值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
@ -90,16 +116,18 @@
<div class="huigu-box"> <div class="huigu-box">
<p>- 金沙酒业国营元70周年献礼片 -</p> <p>- 金沙酒业国营元70周年献礼片 -</p>
<div class="video-box"> <div class="video-box">
<img class="cover-img" src="imgs/public/cover-icon.png" > <img class="cover-img vedio1" src="imgs/public/cover-icon.png" >
<img onclick="playVedio()" class="play-img" src="imgs/public/play-icon.png" > <video id="vedio1" class="cover-img" width="100%" height="100%" src="imgs/secondary/1" controls poster="imgs/public/cover-icon.png"></video>
<img onclick="playVedio('vedio1')" class="play-img vedio1" src="imgs/public/play-icon.png" >
</div> </div>
<span>感恩奋进70年，致敬时代金沙人！</span> <span>感恩奋进70年，致敬时代金沙人！</span>
</div> </div>
<div class="huigu-box"> <div class="huigu-box">
<p>- 金沙酒业国营元70周年献礼片 -</p> <p>- 金沙酒业国营元年70周年献礼片 -</p>
<div class="video-box"> <div class="video-box">
<img class="cover-img" src="imgs/public/cover-icon.png" > <img class="cover-img vedio2" src="imgs/public/cover-icon.png" >
<img onclick="playVedio()" class="play-img" src="imgs/public/play-icon.png" > <video id="vedio2" class="cover-img" width="100%" height="100%" src="imgs/secondary/1" controls poster="imgs/public/cover-icon.png"></video>
<img onclick="playVedio('vedio2')" class="play-img vedio2" src="imgs/public/play-icon.png" >
</div> </div>
<span>感恩奋进70年，致敬时代金沙人！</span> <span>感恩奋进70年，致敬时代金沙人！</span>
</div> </div>

40
js/javascript.js
View File

@ -4,14 +4,25 @@ jQuery(function($){
$(this).addClass('itemActive'); $(this).addClass('itemActive');
}) })
}) })
// 播放视频 var videos =document.getElementsByTagName('video');
function playVedio(){ // // 播放视频
var video = document.getElementById("video_id"); function playVedio(e){
var videoBox = document.getElementsByClassName('video-play-box'); for (let i =videos.length -1;i >=0;i--) {
document.getElementById("video-box").style.display = "flex"; let p =i;
$("#video_id").attr("src",'imgs/secondary/1') videos[p].addEventListener('play',function(){
pauseAll(p);
})
}
$(`.play-img`).css('display','block');
var video = document.getElementById(e);
$(`.${e}`).css('display','none');
video.play(); //播放控制 video.play(); //播放控制
} }
function pauseAll(index){
for (let j =videos.length -1;j >=0;j--) {
if(j!=index) {videos[j].pause();}
}
}
// 关闭视频 // 关闭视频
function closeVideo() { function closeVideo() {
var video = document.getElementById("video_id"); var video = document.getElementById("video_id");
@ -33,4 +44,21 @@ function closeEv(){
$('.info-box').scrollTop(0); $('.info-box').scrollTop(0);
$('body').css({"overflow": "scroll"}); $('body').css({"overflow": "scroll"});
$('html').css({"overflow": "scroll"}); $('html').css({"overflow": "scroll"});
}
// 点赞提醒
let timeT = 0;
function dianz(){
if(timeT==0) {
$('.tank').text('点赞成功');
timeT++;
$('.tank').css('display','block');
setTime();
}
}
// 延迟关闭
function setTime(){
setTimeout(()=>{
$('.tank').css('display','none');
timeT = 0;
},1500)
} }

36
pages/htmls/massage.html
View File

@ -66,28 +66,7 @@
<main class="main"> <main class="main">
<div class="box-content"> <div class="box-content">
<div class="bao-box"> <div class="bao-box">
<div class="container massage-slide" id="container"> <div class="container massage-slide" id="container"></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 class="item-slide">
<img src="../../imgs/public/close-icon.png" >
<p>“勿忘昨天，无愧今天，不负明天”</p>
</div> -->
</div>
<div class="massage-box"> <div class="massage-box">
<ul> <ul>
<li><span>·</span><p>金沙回沙酒，畅销贵州60年</p></li> <li><span>·</span><p>金沙回沙酒，畅销贵州60年</p></li>
@ -105,7 +84,7 @@
<!-- 按钮 --> <!-- 按钮 -->
<div class="fun-box"> <div class="fun-box">
<div class="fun-item"> <div class="fun-item">
<img src="../../imgs/public/hear.png" > <img onclick="dianz()" src="../../imgs/public/hear.png" >
<img onclick="sayEv()" src="../../imgs/public/say.png" > <img onclick="sayEv()" src="../../imgs/public/say.png" >
</div> </div>
<a href="javascript:;"><img class="send-img" src="../../imgs/public/send-icon.png" ></a> <a href="javascript:;"><img class="send-img" src="../../imgs/public/send-icon.png" ></a>
@ -113,6 +92,8 @@
</div> </div>
</div> </div>
</main> </main>
<!-- 弹框提示 -->
<div class="tank">点赞成功</div>
<!-- 底部部分 --> <!-- 底部部分 -->
<footer class="footer"> <footer class="footer">
<a href="../../index.html"><img src="../../imgs/public/yinxiang-icon.png" ></a> <a href="../../index.html"><img src="../../imgs/public/yinxiang-icon.png" ></a>
@ -156,12 +137,21 @@
$('.send-img').on('click',function(){ $('.send-img').on('click',function(){
if(times==0){ if(times==0){
times++; times++;
$('.tank').css('display','block');
$('.tank').text('留言成功');
closeTank();
barrageWall.upWall("../../favicon.ico", "", val); //初始化弹幕墙 barrageWall.upWall("../../favicon.ico", "", val); //初始化弹幕墙
setTimeout(()=>{ setTimeout(()=>{
times = 0; times = 0;
},1000) },1000)
} }
}) })
// 关闭提示
function closeTank(){
setTimeout(()=>{
$('.tank').css('display','none');
},1500)
}
// 随机播放弹幕 // 随机播放弹幕
timer = setInterval(()=>{ timer = setInterval(()=>{
barrageWall.upWall("../../favicon.ico", "", `“${sayArr[Math.floor(Math.random()*sayArr.length)]}”`); //初始化弹幕墙 barrageWall.upWall("../../favicon.ico", "", `“${sayArr[Math.floor(Math.random()*sayArr.length)]}”`); //初始化弹幕墙