南京大屠杀纪念日公祭日手机端移动端微页面代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：南京大屠杀纪念日公祭日手机端移动端微页面代码，勿忘历史。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>铭记·南京1937</title>
    <style>
        @charset "utf-8";
	* {
	margin:0;
	padding:0
}
html,body,button,input,select,textarea {
	font-size:62.5%
}
html {
	height:100%
}
body {
	margin:0;
	position:relative;
	height:100%;
	background-color:#CCC;
	font-family:Microsoft YaHei;
	font-size:1.8rem
}
.swiper-container {
	width:100%;
	height:100%;
	color:#fff
}
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	z-index:1
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform,left,top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	-moz-transition-property:-moz-transform,left,top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	-o-transition-property:-o-transform,left,top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	-ms-transition-property:-ms-transform,left,top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	transition-property:transform,left,top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease
}
.swiper-free-mode>.swiper-wrapper {
	-webkit-transition-timing-function:ease-out;
	-moz-transition-timing-function:ease-out;
	-ms-transition-timing-function:ease-out;
	-o-transition-timing-function:ease-out;
	transition-timing-function:ease-out;
	margin:0 auto
}
.pagination {
	position:absolute;
	z-index:20;
	right:10px;
	top:50%;
	margin-top:-90px
}
.swiper-pagination-switch {
	display:block;
	width:8px;
	height:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	background:#555;
	margin:0 0 5px;
	opacity:.8;
	cursor:pointer
}
.swiper-active-switch {
	background:#fff
}
.videobox {
	width:100%;
	height:100%;
	position:absolute;
	z-index:21;
	background:rgba(0,0,0,.9);
	display:none
}
#myAudio {
	display:none
}
.player-button {
	display:block;
	width:27px;
	height:19px;
	position:fixed;
	right:10px;
	bottom:15px;
	z-index:100000;
	cursor:pointer;
	background:url(//repo.bfw.wiki/bfwrepo/images/nanjing/music.png) no-repeat;
	background-position:0 0
}
.player-button-stop {
	background-position:0 -19px
}
.swiper-slide {
	position:relative;
	overflow:hidden
}
.swiper-slide .bg {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0
}
.swiper-slide .bg img {
	display:block;
	width:100%;
	height:100%
}
.s-jiantou {
	position:absolute;
	left:45%;
	bottom:5%;
	width:7%;
	opacity:0;
	transition:all 1s
}
.s-jiantou img {
	width:100%
}
.swiper-slide-active .s-jiantou {
	opacity:.7;
	-webkit-animation:fadeInUp 1s 3s ease both;
	-moz-animation:fadeInUp 1s 3s ease both;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite
}
.s-001_title {
	position:absolute;
	width:90%;
	left:2%;
	top:50%;
	opacity:0;
	-webkit-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
	transition:all 1s
}
.s-001_title img {
	width:100%
}
.swiper-slide-active .s-001_title {
	opacity:1;
	width:90%;
	left:3%;
	top:30%;
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
	transition-delay:.5s
}
.text {
	line-height:130%;
	color:#ccc;
	opacity:0;
	transition:all 1s
}
.swiper-slide-active .text {
	opacity:1;
	animation:show 2s ease-in-out;
	-moz-animation:show 2s ease-in-out;
	-webkit-animation:show 2s ease-in-out;
	-o-animation:show 2s ease-in-out
}
.s-002_text {
	position:absolute;
	width:90%;
	left:5%;
	top:30%;
	font-weight:bold;
	text-indent:2em
}
.s-004_text {
	position:absolute;
	width:100%;
	left:0;
	top:40%;
	text-align:center;
	font-weight:bold
}
.s-005_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-006_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-007_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-008_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-009_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-010_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-011_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-012_text {
	position:absolute;
	width:80%;
	left:10%;
	bottom:5%
}
.s-005_text h3,.s-006_text h3,.s-007_text h3,.s-008_text h3,.s-009_text h3,.s-010_text h3,.s-011_text h3,.s-012_text h3 {
	color:#fbfbfb;
	font-weight:normal
}
.s-005_text p,.s-006_text p,.s-007_text p,.s-008_text p,.s-009_text p,.s-010_text p,.s-011_text p,.s-012_text p {
	font-size:1.6rem;
	padding:10px 0 8px;
	text-indent:2em
}
.s-005_text h4,.s-006_text h4,.s-007_text h4,.s-008_text h4,.s-009_text h4,.s-010_text h4,.s-011_text h4,.s-012_text h4 {
	text-align:right;
	font-weight:normal
}
.text1 {
	color:#ccc
}
.s-013_text {
	line-height:150%;
	position:absolute;
	width:75%;
	left:12%;
	top:10%
}
.s-013_text p {
	text-indent:2em;
	padding-top:10px;
	font-weight:bold
}
.s-013_text p font {
	color:#b60000
}
.s-013_text p.type1 {
	opacity:0;
	transition:all 1s
}
.swiper-slide-active .s-013_text p.type1 {
	opacity:1;
	animation:show 2s ease-in-out;
	-moz-animation:show 2s ease-in-out;
	-webkit-animation:show 2s ease-in-out;
	-o-animation:show 2s ease-in-out
}
.s-013_text p.type2 {
	opacity:0;
	transition:all 1s
}
.swiper-slide-active .s-013_text p.type2 {
	opacity:1;
	animation:show 2s ease-in-out;
	transition-delay:1s;
	-moz-animation:show 2s ease-in-out;
	-moz-transition-delay:1s;
	-webkit-animation:show 2s ease-in-out;
	-webkit-transition-delay:1s;
	-o-animation:show 2s ease-in-out;
	-o-transition-delay:1s
}
.s-013_text p.type3 {
	opacity:0;
	transition:all 1s;
	a
}
.swiper-slide-active .s-013_text p.type3 {
	opacity:1;
	animation:show 2s ease-in-out;
	transition-delay:2s;
	-moz-animation:show 2s ease-in-out;
	-moz-transition-delay:2s;
	-webkit-animation:show 2s ease-in-out;
	-webkit-transition-delay:2s;
	-o-animation:show 2s ease-in-out;
	-o-transition-delay:2s
}
.s-013_text p.type4 {
	opacity:0;
	transition:all 1s
}
.swiper-slide-active .s-013_text p.type4 {
	opacity:1;
	animation:show 2s ease-in-out;
	transition-delay:3s;
	-moz-animation:show 2s ease-in-out;
	-moz-transition-delay:6s;
	-webkit-animation:show 2s ease-in-out;
	-webkit-transition-delay:6s;
	-o-animation:show 2s ease-in-out;
	-o-transition-delay:6s
}
.s-003_ts {
	position:absolute;
	width:25%;
	height:9%;
	right:10%;
	top:18%;
	opacity:0;
	transition:all 1s
}
.s-003_ts img {
	width:100%;
	height:100%
}
.s-003_map {
	position:absolute;
	width:80%;
	height:87%;
	left:10%;
	top:6%;
	opacity:0;
	transition:all 1s
}
.s-003_map img {
	display:block;
	width:100%;
	height:100%
}
.swiper-slide-active .s-003_map,.swiper-slide-active .s-003_ts {
	opacity:1;
	animation:show 2s ease-in-out;
	-moz-animation:show 2s ease-in-out;
	-webkit-animation:show 2s ease-in-out;
	-o-animation:show 2s ease-in-out
}
.flame {
	position:absolute;
	width:6%;
	height:10%;
	opacity:0;
	transition:all 2s
}
.flame a {
	display:block;
	width:100%;
	height:100%;
	text-align:center
}
.flame img {
	display:block;
	width:90%;
	height:90%
}
.swiper-slide-active .flame {
	opacity:1;
	animation:show 3s ease-in-out;
	-moz-animation:show 3s ease-in-out;
	-webkit-animation:show 3s ease-in-out;
	-o-animation:show 3s ease-in-out
}
#s-003_frame01 {
	right:15%;
	top:0
}
#s-003_frame02 {
	left:50%;
	top:13%
}
#s-003_frame03 {
	left:31%;
	top:19%
}
#s-003_frame04 {
	left:17%;
	top:32%
}
#s-003_frame05 {
	right:24%;
	top:49%
}
#s-003_frame06 {
	left:40%;
	top:56%
}
#s-003_frame07 {
	left:24%;
	top:64%
}
#s-003_frame08 {
	left:49%;
	bottom:16%
}
.info {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	display:none
}
.info img {
	display:block;
	width:100%;
	height:100%
}
.info_bg {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0
}
.info_img {
	position:absolute
}
#s-003_info01 .info_img {
	left:25%;
	top:12%;
	width:52%;
	height:42%
}
#s-003_info02 .info_img {
	left:15%;
	top:18%;
	width:70%;
	height:25%
}
#s-003_info03 .info_img {
	left:15%;
	top:18%;
	width:70%;
	height:26%
}
#s-003_info04 .info_img {
	left:14%;
	top:17%;
	width:72%;
	height:26%
}
#s-003_info05 .info_img {
	left:16%;
	top:18%;
	width:68%;
	height:27%
}
#s-003_info06 .info_img {
	left:24%;
	top:15%;
	width:52%;
	height:32%
}
#s-003_info07 .info_img {
	left:15%;
	top:16%;
	width:70%;
	height:31%
}
#s-003_info08 .info_img {
	left:24%;
	top:12%;
	width:52%;
	height:46%
}
.info_img img {
	width:100%;
	height:100%;
	border:5px solid #fff
}
.info_js {
	position:absolute;
	width:84%;
	left:8%;
	bottom:10%
}
.info_js h3 {
	color:#fbfbfb;
	text-align:center;
	padding:10px 0;
	letter-spacing:1px
}
.info_js p {
	font-size:1.6rem
}
.info_close {
	position:absolute;
	left:43%;
	bottom:1%;
	width:15%;
	height:50px
}
.info_close a {
	display:block;
	width:100%;
	height:100%;
	text-indent:-99999px
}
.s-last_01 {
	position:absolute;
	width:56%;
	left:15%;
	top:18%;
	opacity:0;
	-webkit-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
	transition:all 1s
}
.s-last_01 img {
	width:100%
}
.swiper-slide-active .s-last_01 {
	opacity:1;
	width:86%;
	left:7%;
	top:25%;
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
	transition-delay:.4s
}
.s-last_02 {
	position:absolute;
	width:78%;
	left:11%;
	top:5%;
	color:#ccc;
	opacity:0;
	transition:all 4s
}
.swiper-slide-active .s-last_02 {
	opacity:1;
	animation:show 4s ease-in-out;
	-moz-animation:show 4s ease-in-out;
	-webkit-animation:show 4s ease-in-out;
	-o-animation:show 4s ease-in-out
}
.s-last_02 font {
	color:#d82020
}
.s-last_03 {
	position:absolute;
	width:18%;
	left:41%;
	top:70%;
	opacity:0;
	transition:all 4s
}
.s-last_03 img {
	width:100%
}
.swiper-slide-active .s-last_03 {
	opacity:1;
	animation:show 4s ease-in-out;
	-moz-animation:show 4s ease-in-out;
	-webkit-animation:show 4s ease-in-out;
	-o-animation:show 4s ease-in-out
}
.s-last_active {
	position:absolute;
	width:18%;
	left:41%;
	top:60%;
	opacity:1;
	transition:all 4s
}
.s-last_active img {
	width:100%
}
.swiper-slide-active .s-last_active {
	opacity:0;
	width:18%;
	left:60%;
	top:20%;
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
	transition-delay:.2s
}
#s-last_num {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	color:#b60000;
	display:none
}
.tc_1 {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0
}
.tc_1 img {
	width:100%;
	height:100%
}
.tc_2 {
	color:#fff;
	font-weight:bold;
	position:absolute;
	width:80%;
	left:10%;
	top:29%;
	opacity:0;
	transition:all 1s
}
.tc_2 font,.tc_2 span {
	color:#910404
}
.tc_2 span {
	padding:0 10px
}
.swiper-slide-active .tc_2 {
	opacity:1;
	animation:show 2s ease-in-out;
	-moz-animation:show 2s ease-in-out;
	-webkit-animation:show 2s ease-in-out;
	-o-animation:show 2s ease-in-out
}
.s-last_06 {
	position:absolute;
	left:50%;
	top:82%;
	width:7%;
	opacity:1;
	transition:all 1s
}
.s-last_06 img {
	width:100%
}
.swiper-slide-active .s-last_06 {
	opacity:1;
	-webkit-animation:fadeInUp 1s 2s ease both;
	-moz-animation:fadeInUp 1s 2s ease both;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite
}
.s-last_07 {
	position:absolute;
	width:80%;
	left:11%;
	top:60%;
	color:#ccc;
	opacity:0;
	transition:all 4s
}
.swiper-slide-active .s-last_07 {
	opacity:1;
	animation:show 4s ease-in-out;
	-moz-animation:show 4s ease-in-out;
	-webkit-animation:show 4s ease-in-out;
	-o-animation:show 4s ease-in-out
}
.s-last_07 font {
	color:#d82020
}
@-webkit-keyframes fadeInUp {
	0% {
	opacity:0;
	-webkit-transform:translateY(20px)
}
50% {
	opacity:1;
	-webkit-transform:translateY(0px)
}
100% {
	opacity:.7;
	-webkit-transform:translateY(-10px)
}
}@-moz-keyframes fadeInUp {
	0% {
	opacity:0;
	-moz-transform:translateY(20px)
}
50% {
	opacity:1;
	-webkit-transform:translateY(0)
}
100% {
	opacity:0;
	-moz-transform:translateY(-10px)
}
}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.min.js"></script>
    <script type="text/javascript">
        function show(obj) {
            var divid = document.getElementById(obj);
            divid.style.display = "block";
        }

        function turnoff(obj) {
            var divid = document.getElementById(obj);
            divid.style.display = "none";
        }
        $(function() {
            $('#wyxh img').click(function() {
                $('#wyxh').addClass("s-last_active");
                $('.s-last_06').css("display", "none");
                setTimeout(function() {
                    $('#wyxh').removeClass("s-last_03");
                    $('#s-last_num').css("display", "block");
                    $('#wyxh').removeClass("s-last_active");
                }, 4000);
            })
            $(".info").click(function() {
                $(this).hide();
            })
        })
    </script>
</head>

<body>
    <div class="swiper-container">
        <div class="videobox"></div>
        <div class="swiper-wrapper" id="scene">
            <div class="swiper-slide slide0">
                <div class="bg"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/bg_001.jpg" alt=""></div>
                <div class="s-001_title"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/mj_1937.png" alt=""></div>
                <div class="s-jiantou"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/jiantou.png" alt=""></div>
            </div>
            <div class="swiper-slide slide1">
                <div class="bg"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/bg_002.jpg" alt=""></div>
                <div class="s-002_text text">
                    <p>1937年12月13日，南京沦陷。<br>日军占领南京后，制造极端恐怖，<br>纵兵滥杀无辜。</p>
                </div>
                <div class="s-jiantou"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/jiantou.png" alt=""></div>
            </div>
            <div class="swiper-slide slide2">
                <div class="bg"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/bg_002.jpg" alt=""></div>
                <div class="s-003_map"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/map.jpg" alt=""></div>
                <div class="s-003_ts"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/click_hy.png" alt="点击重温历史"></div>
                <div id="s-003_frame01" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info01')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="燕子矶"></a>
                </div>
                <div id="s-003_frame02" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info02')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="草鞋峡"></a>
                </div>
                <div id="s-003_frame03" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info03')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="鱼雷营"></a>
                </div>
                <div id="s-003_frame04" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info04')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="中山码头"></a>
                </div>
                <div id="s-003_frame05" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info05')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="太平门"></a>
                </div>
                <div id="s-003_frame06" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info06')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="汉中门"></a>
                </div>
                <div id="s-003_frame07" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info07')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="江东门"></a>
                </div>
                <div id="s-003_frame08" class="flame">
                    <a href="javascript:void(0)" onClick="show('s-003_info08')"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/flame.gif" alt="中华门"></a>
                </div>
                <div class="s-jiantou"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/jiantou.png" alt=""></div>
                <div id="s-003_info01" class="info">
                    <div class="info_bg"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/info_bg.jpg"></div>
                    <div class="info_img"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/info_01.jpg"></div>
                    <div class="info_js">
                        <h3>燕子矶</h3>
                        <p>1937年12月，3万多名解除武装的士兵和2万多平民，避聚于燕子矶江滩，求渡北逃。被日舰封锁，后又被大队日军包围后，以机枪横扫，惨遭杀害，总数达5万余人。</p>
                    </div>
                    <div class="info_close"><a href="javascript:void(0)" onClick="turnoff('s-003_info01')">关闭</a></div>
                </div>
                <div id="s-003_info02" class="info">
                    <div class="info_bg"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/info_bg.jpg"></div>
                    <div class="info_img"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/info_02.jpg"></div>
                    <div class="info_js">
                        <h3>草鞋峡</h3>
                        <p>1937年12月18日，侵华日军将被拘囚于幕府山下的难民和被俘军人5.7万余人，用铅丝捆绑，驱至下关草鞋峡，先用机枪扫射，又用刺刀戳毙，最后浇煤油纵火焚烧，残骸弃入长江。</p>
                    </div>
                    <div class="info_close"><a href="javascript:void(0)" onClick="turnoff('s-003_info02')">关闭</a></div>
                </div>
                <div id="s-003_info03" class="info">
                    <div class="info_bg"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/info_bg.jpg"></div>
                    <div class="info_img"><img src="//repo.bfw.wiki/bfwrepo/images/nanjing/info_03.jpg"></div>
                    <div class="info_js">
                        <h3>鱼雷营</h3>
                        <p>1937年12月15日，侵华日军将已解除武装的守城官兵和南京平民9000余人，押至鱼雷营，以机枪集体射杀。同月，日军在鱼雷营、宝塔桥一带再次杀害我军民3万余人，尸曝于野长达数月。</p>
    .........完整代码请登录后点击上方下载按钮下载查看