Difference between revisions of "Team:Jilin China"
Luanhaixin (Talk | contribs) |
Luanhaixin (Talk | contribs) |
||
| Line 230: | Line 230: | ||
</style> | </style> | ||
| + | |||
| + | <div id="bg_menu" class="cebian hidden"> | ||
| + | <div class="menu_title"> | ||
| + | <div class="menu_logo">jilinchina!</div> | ||
| + | <div class="menu_button" id="menu_button">取消按钮</div> | ||
| + | </div> | ||
| + | <div id="menu_box" class="menu_box"> | ||
| + | <div id="lizi" class="menu">第一块</div> | ||
| + | <div class="menu">第一块</div> | ||
| + | <div class="menu">第一块</div> | ||
| + | <div class="menu">第一块</div> | ||
| + | <div class="menu">第一块</div> | ||
| + | <div class="menu">第一块</div> | ||
| + | <div class="menu">第一块</div> | ||
| + | <div class="menu">第一块</div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | <!--屏幕内容第一条 导航栏 --> | ||
| + | <nav id="first_s"> | ||
| + | <div id="nav_bg" class="container-fluid"> | ||
| + | <div class="container"> | ||
| + | <div class="navbar-header"> | ||
| + | <a class="navbar-brand" href="#">Jilin_China</a> | ||
| + | </div> | ||
| + | <ul class="hidden-xs"> | ||
| + | <li class="active list_1"><a href="#">Home</a></li> | ||
| + | <li class="list_1"><a href="#">第一块</a> | ||
| + | <ul> | ||
| + | <li>内一块</li> | ||
| + | <li>内一块 | ||
| + | <ul> | ||
| + | <li>内二块</li> | ||
| + | <li>内二块</li> | ||
| + | <li>内二块</li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li>内一块</li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li class="list_1"><a href="#">第二块</a></li> | ||
| + | <li class="list_1"><a href="#">第三块</a></li> | ||
| + | <li class="list_1"><a href="#">第四块</a></li> | ||
| + | <li class="list_1"><a href="#">第五块</a></li> | ||
| + | <li class="list_1"><a href="#">第四块</a></li> | ||
| + | <li class="list_1"><a href="#">第五块</a></li> | ||
| + | </ul> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </nav> | ||
| + | <div id="second_s" class="banner container-fluid"> | ||
| + | |||
| + | |||
| + | </div> | ||
| + | <div id="third_s" class="container-fluid"> | ||
| + | <div id="third_1" class="container"> | ||
| + | <div id="third_1_1"> | ||
| + | backface-visibility:hidden; | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | <div id="zhuan">翻转</div> | ||
| + | <div id="menu_btn">菜单</div> | ||
| + | </html> | ||
<script> | <script> | ||
function $$(id){ | function $$(id){ | ||
| Line 456: | Line 522: | ||
</script> | </script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 06:23, 26 May 2019
backface-visibility:hidden;
翻转
<script>
function $$(id){
var el=document.getElementById(id); return el; }
//获取全局元素部分 var menudiv=document.getElementsByClassName("menu"); var menu_box=document.getElementById("menu_box"); var menu_btn=document.getElementById("menu_btn"); var bg_menu=document.getElementById("bg_menu"); //菜单部分函数 function menuStart(){ var menu_w=document.documentElement.clientWidth; var menu_h=document.documentElement.clientHeight;
document.getElementById("lizi").innerHTML="宽度："+menu_w+"，高度："+menu_h;
for(var i=0;i<menudiv.length;i++){
menudiv[i].style.marginTop=menu_box.offsetHeight*0.025+"px";
}
//菜单按钮的改变
menu_btn.style.height=menu_btn.offsetWidth+"px";
menu_btn.style.bottom=menu_btn.offsetWidth+"px";
menu_btn.style.right=menu_btn.offsetWidth+"px"
if(menu_w>=430){
//整个菜单的改变
bg_menu.style.width=35+"%";
bg_menu.style.height=bg_menu.offsetWidth*0.8+"px";
bg_menu.style.minWidth=150+"px";
bg_menu.style.minHeight=150+"px";
bg_menu.style.maxWidth=430+"px";
bg_menu.style.maxHeight=430+"px";
bg_menu.style.right=menu_btn.offsetWidth*1.7+"px"; bg_menu.style.bottom=menu_btn.offsetWidth*2.2+"px"; bg_menu.style.left="auto"; console.log(bg_menu.offsetHeight);
}
else{
bg_menu.style.width=100+"%";
bg_menu.style.height=50+"%";
bg_menu.style.right=0;
bg_menu.style.left=0;
bg_menu.style.bottom=0;
}
}
//窗口加载 window.onload=function(){ menu_btn.style.display="block";
menuStart();
document.getElementById('bg_menu').classList.add("hidden");
} //窗口改变 window.onresize = function(){
menuStart();
}
//自定义菜单开关 menu_btn.onclick=function(){
if(hasClass(bg_menu, 'hidden')){
removeClass(bg_menu,'hidden');
}
else{
addClass(bg_menu,'hidden');
}
menuStart();
} //特效部分 //导航鼠标hover var nav_bg=document.getElementById("nav_bg"); var list_1=document.getElementsByClassName("list_1");//获取导航外层项目
function nav_anti(){
for(var i=0;i<list_1.length;i++){
list_1[i].onmouseenter=function(){
nav_bg.style.backgroundColor="#fff";
nav_bg.style.transition =0.5+"s";
}
list_1[i].onmouseleave=function(){
nav_bg.style.backgroundColor="transparent";
}
}
} nav_anti();
$$("zhuan").onclick=function(){
$$("third_1_1").style.transition=1+"s linear";
$$("third_1_1").style.transform="rotateY("+180+"deg)";
} function $$(id){
var el=document.getElementById(id); return el; }
function $C$(Class){
var el=document.getElementsByClassName(Class); return el; }
//有关类名字的方法 function addClass(el, className) {
if (hasClass(el, className)) {
return;
}
let newClass = el.className.split(' ');
newClass.push(className);
el.className = newClass.join(' ');
}
function hasClass(el, className) {
// \s匹配任何空白字符，包括空格、制表符、换页符等等
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
return reg.test(el.className);
}
function removeClass(el, className){
if (!hasClass(el, className)) {
return;
}
let newClass = el.className.split(' ');
newClass.forEach(function(val, index, newClass){
if(val === className){
newClass.splice(index,1);
}
}) ;
el.className = newClass.join(' ');
}
var content={
detail : [
{title : "ertyu",
para : [
{
word : "我是第一段",
pic : "1.png",
strong : ["strong","asd"],
div : {
id : "chart1",
class : ["strong","asd"]
}
},
{
word : "你知道吗",
pic : "none",
strong : []
}
]},
{title : "ert2121221",
para : [
{
word : "我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你",
pic : "1.png",
strong : ["strong","asd"],
div : {
id : "chart1",
class : ["strong","asd"]
}
},
{
word : "你知道吗",
pic : "none",
strong : []
},
{
word : "你知道吗",
pic : "none",
strong : []
},
]}
]
} var contElement=[]; function renderWord(){ for(var i=0;i<content.detail.length;i++){ var tT=document.createElement("h1"); tT.innerHTML=content.detail[i].title; console.log(tT); contElement.push(tT);
for(var j=0;j<content.detail[i].para.length;j++){
var tP=document.createElement("p");
tP.innerHTML=content.detail[i].para[j].word;
console.log(tP);
contElement.push(tP);
if(content.detail[i].para[j].pic!="none"){
var tImg=document.createElement("div");
tImg.innerHTML="<img src=\'"+content.detail[i].para[j].pic+"\'>";
console.log(tImg);
contElement.push(tImg);
}
}
} for(var i=0;i<contElement.length;i++){ $$("third_1_1").appendChild(contElement[i]); }
}
renderWord();
</script>