Luanhaixin (Talk | contribs) |
Luanhaixin (Talk | contribs) |
||
Line 658: | Line 658: | ||
</style> | </style> | ||
<!--屏幕内容第一条 导航栏 --> | <!--屏幕内容第一条 导航栏 --> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<div id="second_s" class="banner container-fluid"> | <div id="second_s" class="banner container-fluid"> | ||
Line 702: | Line 672: | ||
</div> | </div> | ||
</html> | </html> | ||
+ | <script> | ||
+ | |||
+ | //导航鼠标hover | ||
+ | var nav_bg = document.getElementById("nav_bg"); | ||
+ | //获取导航外层项目 | ||
+ | //滑的太快有bug 排他原则去bug | ||
+ | |||
+ | var moding = 0; //是否在转换过程中 | ||
+ | var mode_now = 0; //双模导航的模式 | ||
+ | |||
+ | var coupleColor = [ "rgba(255,255,255,1)","rgba(255,0,60,.7)"]; | ||
+ | |||
+ | var daErZi=[]; | ||
+ | var last=0; | ||
+ | |||
+ | function initCB() { | ||
+ | $$("nav_bg").style.transition = 0.5 + "s"; | ||
+ | |||
+ | } | ||
+ | |||
+ | //根据实际情况换文字颜色 | ||
+ | function colorCA() { | ||
+ | for (var i = 0; i < getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI").length; i++) { | ||
+ | getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI")[i].getElementsByTagName("a")[0].style.color = coupleColor[mode_now]; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | //模式1的所有行为 | ||
+ | function nav_anti1() { | ||
+ | |||
+ | for (var i = 0; i < $$("first_s").getElementsByTagName("li").length; i++) { | ||
+ | //对象变that | ||
+ | var that = $$("first_s").getElementsByTagName("li")[i]; | ||
+ | //获取所有有子节点的li并输出到数组中 | ||
+ | if (getChildNodes($$("first_s").getElementsByTagName("li")[i], "UL").length > 0) { | ||
+ | daErZi.push(i + 1); | ||
+ | } | ||
+ | |||
+ | |||
+ | //遍历onmouseenter | ||
+ | (function (i) { | ||
+ | that.onmouseenter = function () { | ||
+ | |||
+ | |||
+ | console.log(i+"来"); | ||
+ | |||
+ | |||
+ | for (var b = 0; b < getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI").length; b++) { | ||
+ | //摸到了怎么办 | ||
+ | if (this === getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI")[b]) { | ||
+ | |||
+ | //其他的进度条消失 | ||
+ | |||
+ | $C$("jindutiao")[b].style.display = "none"; | ||
+ | |||
+ | $C$("jindutiao")[b].style.transition = 0 + "s" + " linear"; | ||
+ | $C$("jindutiao")[b].style.width = 100+ "%"; | ||
+ | |||
+ | this.style.backgroundColor = coupleColor[mode_now]; | ||
+ | this.getElementsByTagName("a")[0].style.color = coupleColor[mode_now == 0 ? mode_now + 1 : (mode_now == 1 ? mode_now - 1 : 0)]; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | //如果有子菜单的话那就放出来 | ||
+ | if (getChildNodes(this, "UL").length > 0) { | ||
+ | |||
+ | for (var i = 0; i < $C$("navul1").length; i++) { | ||
+ | $C$("navul1")[i].style.display="none"; | ||
+ | } | ||
+ | //alert("d"); | ||
+ | for (var j = 0; j < getChildNodes(this, "UL").length; j++) { | ||
+ | getChildNodes(this, "UL")[j].style.display = "block"; | ||
+ | var ul = getChildNodes(this, "UL")[j]; | ||
+ | setTimeout(function () { | ||
+ | |||
+ | for (var z = getChildNodes(ul, "LI").length - 1, x = 0; z >= 0; z--, x++) { | ||
+ | |||
+ | (function (z, x) { | ||
+ | |||
+ | setTimeout(function(){getChildNodes(ul, "LI")[z].style.display = "block";},20); | ||
+ | time_1 = setTimeout(function () { | ||
+ | |||
+ | getChildNodes(ul, "LI")[z].style.transition = 0.5 + "s ease"; | ||
+ | getChildNodes(ul, "LI")[z].style.zIndex = x * 10 + 5; | ||
+ | getChildNodes(ul, "LI")[z].style.transform = "translate(0px," + 61 * z + "px)"; | ||
+ | getChildNodes(ul, "LI")[z].style.opacity = 1; | ||
+ | |||
+ | |||
+ | }, 50 * (x + 1)) | ||
+ | |||
+ | })(z, x); | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | }, 10); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | })(i); | ||
+ | |||
+ | //离开的动作 | ||
+ | (function (i) { | ||
+ | that.onmouseleave = function () { | ||
+ | |||
+ | |||
+ | //碰到有节点的li不进行离开//或者离开一半 | ||
+ | for (var m = 0; m < daErZi.length; m++) { | ||
+ | if (i == daErZi[m]) { | ||
+ | return; | ||
+ | } | ||
+ | } | ||
+ | //背景变色 | ||
+ | //initCB(); | ||
+ | //colorCA(); | ||
+ | |||
+ | |||
+ | |||
+ | //如果有子菜单的话那就收回来 | ||
+ | if (getChildNodes(this, "UL").length > 0) { | ||
+ | this.style.backgroundColor = coupleColor[1]; | ||
+ | this.getElementsByTagName("a")[0].style.color = coupleColor[0]; | ||
+ | |||
+ | //alert("d"); | ||
+ | for (var j = 0; j < getChildNodes(this, "UL").length; j++) { | ||
+ | var ul = getChildNodes(this, "UL")[j]; | ||
+ | for (var z = getChildNodes(ul, "LI").length - 1, x = 0; z >= 0; z--, x++) { | ||
+ | |||
+ | (function (z, x) { | ||
+ | setTimeout(function () { | ||
+ | getChildNodes(ul, "LI")[z].style.opacity = 0; | ||
+ | getChildNodes(ul, "LI")[z].style.transition = .2 + "s ease"; | ||
+ | getChildNodes(ul, "LI")[z].style.transform = "translate(0px," + 0 + "px)"; | ||
+ | setTimeout(function(){getChildNodes(ul, "LI")[z].style.display = "none";},200); | ||
+ | |||
+ | }, 10 * (x + 1)) | ||
+ | |||
+ | })(z, x); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | })(i); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | nav_anti1(); | ||
+ | var heighta = document.body.offsetHeight; | ||
+ | var srcolltop; | ||
+ | window.onscroll=function(){ | ||
+ | srcolltop=document.documentElement.scrollTop || document.body.scrollTop; | ||
+ | if(srcolltop>80){ | ||
+ | $$("first_s").style.position="fixed"; | ||
+ | } | ||
+ | if(srcolltop<80){ | ||
+ | $$("first_s").style.position="absolute"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | <script> | ||
+ | function chuxian(el){ | ||
+ | el.style.transform="translate(-50%,0px)"; | ||
+ | el.style.display="block"; | ||
+ | el.style.opacity=0; | ||
+ | setTimeout(function(){ | ||
+ | el.style.transition="0.5s"; | ||
+ | el.style.transform="translate(0%,0px)"; | ||
+ | el.style.opacity=1; | ||
+ | },20); | ||
+ | |||
+ | } | ||
+ | |||
+ | function xiaoshi(el){ | ||
+ | |||
+ | |||
+ | el.style.transition="0.2s"; | ||
+ | el.style.transform="translate(-50%,0px)"; | ||
+ | el.style.opacity=0; | ||
+ | setTimeout(function(){ | ||
+ | |||
+ | el.style.display="none"; | ||
+ | },200); | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | function zibianse(num){ | ||
+ | |||
+ | for(var i=0;i<$C$("s501").length;i++){ | ||
+ | if(i!=num){ | ||
+ | xiaoshi($C$("div502")[i]); | ||
+ | } | ||
+ | |||
+ | if(hasClass($C$("s501")[i],"able")){ | ||
+ | removeClass($C$("s501")[i],"able"); | ||
+ | } | ||
+ | } | ||
+ | addClass($C$("s501")[num],"able") | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | for(var i=0;i<$C$("s501").length;i++){ | ||
+ | (function(i){ | ||
+ | $C$("s501")[i].onclick=function(e){ | ||
+ | event.stopPropagation(); | ||
+ | zibianse(i); | ||
+ | |||
+ | chuxian($C$("div502")[i]); | ||
+ | |||
+ | } | ||
+ | |||
+ | })(i) | ||
+ | } | ||
+ | |||
+ | $C$("navbtn")[0].onclick=function(){ | ||
+ | $C$("mobilenav")[0].style.display="block"; | ||
+ | chuxian($C$("div501")[0]); | ||
+ | $C$("div503")[0].style.display="block"; | ||
+ | |||
+ | } | ||
+ | for(var i=0;i<$C$("s501").length;i++){ | ||
+ | |||
+ | (function(i){ | ||
+ | $C$("div502")[i].onclick=function(e){ | ||
+ | |||
+ | xiaoshi($C$("div502")[i]); | ||
+ | |||
+ | } | ||
+ | |||
+ | })(i) | ||
+ | } | ||
+ | |||
+ | |||
+ | $C$("div503")[0].onclick=function(){ | ||
+ | xiaoshi($C$("div501")[0]); | ||
+ | this.style.display="none"; | ||
+ | $C$("mobilenav")[0].style.display="none"; | ||
+ | } | ||
+ | |||
+ | </script> | ||
<html> | <html> |
Revision as of 04:03, 5 October 2019
//导航鼠标hover var nav_bg = document.getElementById("nav_bg"); //获取导航外层项目 //滑的太快有bug 排他原则去bug
var moding = 0; //是否在转换过程中 var mode_now = 0; //双模导航的模式
var coupleColor = [ "rgba(255,255,255,1)","rgba(255,0,60,.7)"];
var daErZi=[]; var last=0;
function initCB() { $$("nav_bg").style.transition = 0.5 + "s";
}
//根据实际情况换文字颜色 function colorCA() { for (var i = 0; i < getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI").length; i++) { getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI")[i].getElementsByTagName("a")[0].style.color = coupleColor[mode_now]; } }
//模式1的所有行为 function nav_anti1() {
for (var i = 0; i < $$("first_s").getElementsByTagName("li").length; i++) { //对象变that var that = $$("first_s").getElementsByTagName("li")[i]; //获取所有有子节点的li并输出到数组中 if (getChildNodes($$("first_s").getElementsByTagName("li")[i], "UL").length > 0) { daErZi.push(i + 1); }
//遍历onmouseenter
(function (i) {
that.onmouseenter = function () {
console.log(i+"来");
for (var b = 0; b < getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI").length; b++) {
//摸到了怎么办
if (this === getChildNodes($$("first_s").getElementsByTagName("ul")[0], "LI")[b]) {
//其他的进度条消失
$C$("jindutiao")[b].style.display = "none";
$C$("jindutiao")[b].style.transition = 0 + "s" + " linear"; $C$("jindutiao")[b].style.width = 100+ "%";
this.style.backgroundColor = coupleColor[mode_now]; this.getElementsByTagName("a")[0].style.color = coupleColor[mode_now == 0 ? mode_now + 1 : (mode_now == 1 ? mode_now - 1 : 0)];
}
}
//如果有子菜单的话那就放出来 if (getChildNodes(this, "UL").length > 0) {
for (var i = 0; i < $C$("navul1").length; i++) { $C$("navul1")[i].style.display="none"; } //alert("d"); for (var j = 0; j < getChildNodes(this, "UL").length; j++) { getChildNodes(this, "UL")[j].style.display = "block"; var ul = getChildNodes(this, "UL")[j]; setTimeout(function () {
for (var z = getChildNodes(ul, "LI").length - 1, x = 0; z >= 0; z--, x++) {
(function (z, x) {
setTimeout(function(){getChildNodes(ul, "LI")[z].style.display = "block";},20);
time_1 = setTimeout(function () {
getChildNodes(ul, "LI")[z].style.transition = 0.5 + "s ease"; getChildNodes(ul, "LI")[z].style.zIndex = x * 10 + 5; getChildNodes(ul, "LI")[z].style.transform = "translate(0px," + 61 * z + "px)"; getChildNodes(ul, "LI")[z].style.opacity = 1;
}, 50 * (x + 1))
})(z, x);
}
}, 10);
}
}
}
})(i);
//离开的动作 (function (i) { that.onmouseleave = function () {
//碰到有节点的li不进行离开//或者离开一半
for (var m = 0; m < daErZi.length; m++) {
if (i == daErZi[m]) {
return;
}
}
//背景变色
//initCB();
//colorCA();
//如果有子菜单的话那就收回来 if (getChildNodes(this, "UL").length > 0) { this.style.backgroundColor = coupleColor[1]; this.getElementsByTagName("a")[0].style.color = coupleColor[0];
//alert("d"); for (var j = 0; j < getChildNodes(this, "UL").length; j++) { var ul = getChildNodes(this, "UL")[j]; for (var z = getChildNodes(ul, "LI").length - 1, x = 0; z >= 0; z--, x++) {
(function (z, x) { setTimeout(function () { getChildNodes(ul, "LI")[z].style.opacity = 0; getChildNodes(ul, "LI")[z].style.transition = .2 + "s ease"; getChildNodes(ul, "LI")[z].style.transform = "translate(0px," + 0 + "px)";
setTimeout(function(){getChildNodes(ul, "LI")[z].style.display = "none";},200);
}, 10 * (x + 1))
})(z, x);
}
}
}
}
})(i);
}
} nav_anti1(); var heighta = document.body.offsetHeight; var srcolltop; window.onscroll=function(){ srcolltop=document.documentElement.scrollTop || document.body.scrollTop; if(srcolltop>80){ $$("first_s").style.position="fixed"; }
if(srcolltop<80){ $$("first_s").style.position="absolute"; }
}
</script> <script> function chuxian(el){
el.style.transform="translate(-50%,0px)"; el.style.display="block"; el.style.opacity=0; setTimeout(function(){ el.style.transition="0.5s"; el.style.transform="translate(0%,0px)"; el.style.opacity=1; },20);
}
function xiaoshi(el){
el.style.transition="0.2s"; el.style.transform="translate(-50%,0px)"; el.style.opacity=0;
setTimeout(function(){
el.style.display="none"; },200);
}
function zibianse(num){
for(var i=0;i<$C$("s501").length;i++){ if(i!=num){ xiaoshi($C$("div502")[i]); } if(hasClass($C$("s501")[i],"able")){ removeClass($C$("s501")[i],"able"); } } addClass($C$("s501")[num],"able")
}
for(var i=0;i<$C$("s501").length;i++){
(function(i){ $C$("s501")[i].onclick=function(e){ event.stopPropagation(); zibianse(i); chuxian($C$("div502")[i]); }
})(i)
}
$C$("navbtn")[0].onclick=function(){
$C$("mobilenav")[0].style.display="block"; chuxian($C$("div501")[0]); $C$("div503")[0].style.display="block";
} for(var i=0;i<$C$("s501").length;i++){
(function(i){
$C$("div502")[i].onclick=function(e){ xiaoshi($C$("div502")[i]);
}
})(i)
}
$C$("div503")[0].onclick=function(){
xiaoshi($C$("div501")[0]); this.style.display="none"; $C$("mobilenav")[0].style.display="none";
}
</script>