|
|
<!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>
|
