You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
5.4 KiB
203 lines
5.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>建党百年</title>
|
|
<meta name="keywords" content="keyword1,keyword2,keyword3">
|
|
<meta name="description" content="this is my page">
|
|
<meta name="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport"
|
|
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
|
|
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/comment.js" type="text/javascript" charset="utf-8"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/begin.css" />
|
|
|
|
<style>
|
|
/* body {
|
|
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
|
|
} */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
a,
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
canvas {
|
|
background: url("../img/6.jpg");
|
|
background-size: 100%!important;
|
|
|
|
}
|
|
|
|
.threeanimate {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
animation: goanimate 4s linear 3s;
|
|
}
|
|
|
|
@keyframes goanimate {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.3;
|
|
|
|
}
|
|
}
|
|
|
|
/* flash */
|
|
.flash {
|
|
position: relative;
|
|
display: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.flash li {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.imganimat {
|
|
|
|
animation: identifier 5s linear 0s;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
}
|
|
|
|
@keyframes identifier {
|
|
0% { opacity: 0.4;
|
|
|
|
}
|
|
|
|
50%{
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(2);
|
|
}
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="wrap">
|
|
<canvas id="c"></canvas>
|
|
|
|
<script src="./js/TweenMax.min.js"></script>
|
|
<script src='./js/script.js'></script>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
|
<div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';">
|
|
</div>
|
|
<div class="flash">
|
|
<ul>
|
|
<li></li>
|
|
<li><img id="img" src="./img/004.gif" /></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
//图片简单切换调用语句 imgtransition({speed: 3000, animate: 1000});
|
|
// $.fn.imgtransition = function (o) {
|
|
// var defaults = {
|
|
// speed: 5000,
|
|
// animate: 5000
|
|
// };
|
|
// o = $.extend(defaults, o);
|
|
|
|
// return this.each(function () {
|
|
// var arr_e = $("li", this);
|
|
// arr_e.css({ position: "absolute" });
|
|
// arr_e.parent().css({ margin: "0", padding: "0", "list-style": "none", overflow: "hidden" });
|
|
|
|
// function shownext() {
|
|
// var active = arr_e.filter(".active").length ? arr_e.filter(".active") : arr_e.first();
|
|
// var next = active.next().length ? active.next() : arr_e.first();
|
|
// active.css({ "z-index": 9 });
|
|
// next.css({ opacity: 0.0, "z-index": 10 }).addClass('active').animate({ opacity: 1.0, }, o.animate, function () {
|
|
// active.removeClass('active').css({ "z-index": 8 });
|
|
// });
|
|
// }
|
|
|
|
// arr_e.first().css({ "z-index": 9 });
|
|
// shownext();
|
|
// // setInterval(function(){
|
|
// // shownext();
|
|
// // },o.speed);
|
|
|
|
// });
|
|
// };
|
|
$(document).ready(function () {
|
|
var height = document.documentElement.clientWidth,
|
|
width = document.documentElement.clientHeight;
|
|
$('img').css({
|
|
'width': width,
|
|
'height': height
|
|
})
|
|
$("#img").addClass('imganimat')
|
|
setTimeout(function () {
|
|
$(".flash").css({ display: 'block' })
|
|
$("canvas").css({ display: 'none' ,'z-index':'1'})
|
|
|
|
|
|
// $('.flash').imgtransition({
|
|
// speed: 5000, //图片切换时间
|
|
// animate: 5000 //图片切换过渡时间
|
|
// });
|
|
|
|
}, 7000)
|
|
|
|
});
|
|
setTimeout(function() {
|
|
window.location.href="begin.html"
|
|
}, 10000)
|
|
// 横屏
|
|
var detectOrient = function () {
|
|
var width = document.documentElement.clientWidth,
|
|
height = document.documentElement.clientHeight,
|
|
wrapper = document.getElementById("wrap"),
|
|
style = "";
|
|
if (width >= height) { // 竖屏
|
|
style += "width:100%";
|
|
style += "height:100%;";
|
|
// style += "-webkit-transform: rotate(0); transform: rotate(0);";
|
|
// style += "-webkit-transform-origin: 0 0;";
|
|
// style += "transform-origin: 0 0;";
|
|
} else { // 横屏
|
|
style += "width:" + height + "px;"; // 注意旋转后的宽高切换
|
|
style += "height:" + width + "px;";
|
|
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
|
|
// 注意旋转中点的处理
|
|
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
|
|
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
|
|
}
|
|
wrapper.style.cssText = style;
|
|
}
|
|
window.onresize = detectOrient;
|
|
detectOrient();
|
|
</script>
|
|
<!-- <script src="js/common.js" type="text/javascript" charset="utf-8"></script> -->
|
|
<script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>
|
|
</body>
|
|
|
|
</html>
|