From c5d56567d3ae69614472e8be72489872556a78e7 Mon Sep 17 00:00:00 2001 From: Lee <342694918@qq.com> Date: Tue, 11 Jan 2022 09:53:48 +0800 Subject: [PATCH] 01.11 --- js/javascript.js | 220 +++++++++++++++++++++++++++-------------------- 1 file changed, 126 insertions(+), 94 deletions(-) diff --git a/js/javascript.js b/js/javascript.js index b3dfef9..d9aa417 100644 --- a/js/javascript.js +++ b/js/javascript.js @@ -7,9 +7,9 @@ jQuery(function($){ disableOnInteraction: false,//触摸后不会停止自动滚动 pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。 }, - pagination: { - el: '.banner-swiper .swiper-pagination', - }, + pagination: { + el: '.banner-swiper .swiper-pagination', + }, effect : 'slide',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。 // fadeEffect: { @@ -25,95 +25,127 @@ jQuery(function($){ // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名 } } + }); + + // 数据产品切换 + $(".product-list li").eq(0).addClass("cur"); + $('.product-item li').hover(function() { + $(".product-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); + $(".product-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); + }); + + // 回到顶部 + $('#toTop').click(function(){$('html,body').animate({scrollTop:$('#top').offset().top}, 600);}); + + //暂停&播放 + $('.experience-audio>.play-btn').click(function() { + let audio = $('.experience-audio>.play-btn'); + for (let i=0;i.play-btn').removeClass("active"); + $(this).addClass("active"); + $(this).next()[0].play();//播放 + }else{ + $(this).removeClass("active"); + $(this).next()[0].pause();//暂停 + } + }); + + // 产品锚点 + $('.onExperience').click(function(){$('html,body').animate({scrollTop:$('.experience-bg').offset().top}, 600);}); + $('.onAdvantage').click(function(){$('html,body').animate({scrollTop:$('.advantage-bg').offset().top}, 600);}); + $('.onScene').click(function(){$('html,body').animate({scrollTop:$('.scene-bg').offset().top}, 600);}); + $('.onPrice').click(function(){$('html,body').animate({scrollTop:$('.price').offset().top}, 600);}); + $('.onDeveloper').click(function(){$('html,body').animate({scrollTop:$('.developer-bg').offset().top}, 600);}); + + // 应用场景切换 + $(".scene-list li").eq(0).addClass("cur"); + $('.scene-item li').hover(function() { + $(".scene-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); + $(".scene-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); + }); + + // 关于我们 + $(".about-content-bg>div").eq(0).addClass("cur"); + $('.about-nav-item li').click(function() { + $(".about-nav-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); + $(".about-content-bg>div").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); + }); + + // 加入我们 + $(".join-class li").eq(0).addClass("cur"); + $(".join-list li").eq(0).addClass("cur"); + $('.join-item li').click(function() { + $(".join-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); + $(".join-class li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); + $(".join-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); + }); + + + // 资质展示 + // if(screen.width <= 768){ + + // }else{ + + // } + + // 判断价格图片是否为空 + if(!$('.price img').attr('src')){ + $(".price").html("定价图片后台上传"); + } + + + + // 手机导航按钮 + $('.head .head-btn').click(function() { + if ($('.head .head-btn').attr('class') == 'head-btn cur') { + $('.head .head-btn').removeClass('cur'); + $('.head .nav').removeClass('active'); + $('.head .nav-bg').removeClass('active'); + } else { + $('.head .head-btn').addClass('cur'); + $('.head .nav').addClass('active'); + $('.head .nav-bg').addClass('active'); + $('.head .logo').addClass('active'); + } + }); + $('.head .nav-bg').click(function() { + $(this).removeClass('active'); + $('.head .head-btn').removeClass('cur'); + $('.head .nav').removeClass('active'); + }); + + + // 控制hover背景 + $('.nav>li').eq(1).mouseover(function() { + $(".nav-bg.wap-show").show(); + }).mouseout(function() { + $(".nav-bg.wap-show").hide(); + }); + $('.nav>li').eq(2).mouseover(function() { + $(".nav-bg.wap-show").show(); + }).mouseout(function() { + $(".nav-bg.wap-show").hide(); + }); + $('.nav>li').eq(3).mouseover(function() { + $(".nav-bg.wap-show").show(); + }).mouseout(function() { + $(".nav-bg.wap-show").hide(); + }); + $('.nav>li').eq(4).mouseover(function() { + $(".nav-bg.wap-show").show(); + }).mouseout(function() { + $(".nav-bg.wap-show").hide(); + }); + + $('.side-nav-item>li').mouseover(function() { + $(".nav-bg.wap-show").show(); + }).mouseout(function() { + $(".nav-bg.wap-show").hide(); + }); + $('.side-nav-item>li').eq(4).mouseover(function() { + $(".nav-bg.wap-show").hide(); }); - - // 数据产品切换 - $(".product-list li").eq(0).addClass("cur"); - $('.product-item li').hover(function() { - $(".product-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); - $(".product-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); - }); - - // 回到顶部 - $('#toTop').click(function(){$('html,body').animate({scrollTop:$('#top').offset().top}, 600);}); - - //暂停&播放 - $('.experience-audio>.play-btn').click(function() { - let audio = $('.experience-audio>.play-btn'); - for (let i=0;i.play-btn').removeClass("active"); - $(this).addClass("active"); - $(this).next()[0].play();//播放 - }else{ - $(this).removeClass("active"); - $(this).next()[0].pause();//暂停 - } - }); - - // 产品锚点 - $('.onExperience').click(function(){$('html,body').animate({scrollTop:$('.experience-bg').offset().top}, 600);}); - $('.onAdvantage').click(function(){$('html,body').animate({scrollTop:$('.advantage-bg').offset().top}, 600);}); - $('.onScene').click(function(){$('html,body').animate({scrollTop:$('.scene-bg').offset().top}, 600);}); - $('.onPrice').click(function(){$('html,body').animate({scrollTop:$('.price').offset().top}, 600);}); - $('.onDeveloper').click(function(){$('html,body').animate({scrollTop:$('.developer-bg').offset().top}, 600);}); - - // 应用场景切换 - $(".scene-list li").eq(0).addClass("cur"); - $('.scene-item li').hover(function() { - $(".scene-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); - $(".scene-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); - }); - - // 关于我们 - $(".about-content-bg>div").eq(0).addClass("cur"); - $('.about-nav-item li').click(function() { - $(".about-nav-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); - $(".about-content-bg>div").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); - }); - - // 加入我们 - $(".join-class li").eq(0).addClass("cur"); - $(".join-list li").eq(0).addClass("cur"); - $('.join-item li').click(function() { - $(".join-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); - $(".join-class li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); - $(".join-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); - }); - - - // 资质展示 - // if(screen.width <= 768){ - - // }else{ - - // } - - // 判断价格图片是否为空 - if(!$('.price img').attr('src')){ - $(".price").html("定价图片后台上传"); - } - - - - // 手机导航按钮 - $('.head .head-btn').click(function() { - if ($('.head .head-btn').attr('class') == 'head-btn cur') { - $('.head .head-btn').removeClass('cur'); - $('.head .nav').removeClass('active'); - $('.head .nav-bg').removeClass('active'); - } else { - $('.head .head-btn').addClass('cur'); - $('.head .nav').addClass('active'); - $('.head .nav-bg').addClass('active'); - $('.head .logo').addClass('active'); - } - }); - $('.head .nav-bg').click(function() { - $(this).removeClass('active'); - $('.head .head-btn').removeClass('cur'); - $('.head .nav').removeClass('active'); - }); -}) +})