Team:Jilin China
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>