|
|
Line 224: |
Line 224: |
| </div> | | </div> |
| | | |
− | <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> |