From 3412270cdef492f5f1b9633fbc665128c16c6352 Mon Sep 17 00:00:00 2001 From: liudan <18634735655@163.com> Date: Sun, 11 Dec 2022 17:26:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 27 ++- index.html | 67 +------ js/index.js | 480 +++++++++++++++++++++++++++----------------------- 3 files changed, 276 insertions(+), 298 deletions(-) diff --git a/css/index.css b/css/index.css index bc22c08..3067859 100644 --- a/css/index.css +++ b/css/index.css @@ -647,18 +647,29 @@ a:active{ } /* 底部 流动效果*/ .g1 li,.g2 li,.g3 li{list-style: none;margin:0 5px} - - +.sliderContainer{ + overflow: hidden; + padding-top:30px; + padding-bottom: 30px; +} +.scrollItem{ + overflow: visible !important; +} +.scrollItem ul{ + display: flex; + flex-wrap: nowrap; +} .scrollItem ul li:hover img { - -webkit-transform: scale(1.5); - -moz-transform: scale(1.5); - -ms-transform: scale(1.5); - -o-transform: scale(1.5); - transform: scale(1.5); + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + -o-transform: scale(1.2); + transform: scale(1.2); z-index: 99; + background-color: #ffffff; + position:relative; } - @media only screen and (max-width: 1600px){ .index_main .section1 .index_banner .item .inner .block_txt h4{ font-size: 28px; diff --git a/index.html b/index.html index c59f715..74fd936 100644 --- a/index.html +++ b/index.html @@ -344,7 +344,7 @@
-
+

上市企业

LISTED
ENTERPRISE

@@ -352,71 +352,10 @@
-
+
-
    • @@ -446,8 +385,6 @@
- -
diff --git a/js/index.js b/js/index.js index 45d9360..8a45be9 100644 --- a/js/index.js +++ b/js/index.js @@ -41,237 +41,267 @@ $(function(){ return !(w.scrollTop() > (of.top + o.outerHeight()) || (w.scrollTop() + w.height()) < of.top); } -$('.index_banner').slick({ - autoplay: true, - arrows: false, - dots:false, - infinite: true, - speed: 500, - autoplaySpeed: 1000, - pauseOnHover: false, - fade: true, - responsive: [ - { - breakpoint: 992, - settings: { - dots: true + $('.index_banner').slick({ + autoplay: true, + arrows: false, + dots:false, + infinite: true, + speed: 500, + autoplaySpeed: 1000, + pauseOnHover: false, + fade: true, + responsive: [ + { + breakpoint: 992, + settings: { + dots: true + } } - } - ] -}); -$('.brand__slider').owlCarousel({ - loop:true, - margin:30, - autoplay:false, - autoplayTimeout:3000, - smartSpeed:500, - items:3, - navText:['',''], - nav:false, - dots:false, - responsive:{ - 0:{ - items:1 - }, - 576:{ - items:2 - }, - 767:{ - items:3 - }, - } -}); - -$($('.electricItem>button')[0]).css('display','block') -$($('.electricItem>.addIon')[0]).css('display','none') -$($('.electricItem')[0]).css('background','rgba(19,75,161,0.8)') -$('.electricItem').mouseenter(function(){ - // console.log($(this).parent().siblings().children().children('.addIon')) - $(this).css('background','rgba(19,75,161,0.8)') - $(this).parent().siblings().children().css('background','transparent center top no-repeat') - $($(this).children()[3]).css('display','none') - $($(this).children()[2]).css('display','block') - $($(this).parent().siblings().children().children('button')).css('display','none') - $($(this).parent().siblings().children().children('.addIon')).css('display','block') - $('.section3').css ('transition', '1s') - if($(this).children()[1].innerText=='先进材料'){ - $('.section3').css ('background','url(images/先进材料-bg.jpg) center top no-repeat') - $('.second3Title>.title')[0].innerText = '先进材料' - $('.second3Title>p')[0].innerHTML = 'ADVANCED
MATERIALS' - $('.second3Title>.textsecond3')[0].innerHTML = '重点关注先进钢铁材料、先进有色金属材料、先进石化化工新材料、先进无机非金属材料、高性能纤维及制品和复合材料、前沿新材料等领域' - } - if($(this).children()[1].innerText=='装备制造'){ - $('.second3Title>.title')[0].innerText = '装备制造' - $('.section3').css ('background','url(images/装备制造-bg.jpg) center top no-repeat','border') - $('.second3Title>.title')[0].innerText = '装备制造' - $('.second3Title>p')[0].innerHTML = 'EQUIPMENT
MAFUFACTURING' - $('.second3Title>.textsecond3')[0].innerHTML = '重点关注高端装备、新能源、汽车及零部件、航空航天等领域' - } - if($(this).children()[1].innerText=='电子信息'){ - $('.second3Title>.title')[0].innerText = '电子信息' - $('.section3').css ('background','url(images/电子信息-bg.jpg) center top no-repeat') - $('.second3Title>.title')[0].innerText = '电子信息' - $('.second3Title>p')[0].innerHTML = 'ELECTRONIC
INFORMATION' - $('.second3Title>.textsecond3')[0].innerHTML = '重点关注计算机与智能消费设备制造、信息通信、新型显示、集成电路、电子元器件与专用材料产业、人工智能等领域' - } - if($(this).children()[1].innerText=='医药生物'){ - $('.second3Title>.title')[0].innerText = '医药生物' - $('.section3').css ('background','url(images/医药生物-bg.jpg) center top no-repeat') - $('.second3Title>.title')[0].innerText = '医药生物' - $('.second3Title>p')[0].innerHTML = 'PHARMACEUTICAL
BIOLOGY' - $('.second3Title>.textsecond3')[0].innerHTML = '重点关注创新医药、高端医疗器械、CXO（合同研发生产组织）、BT（生物技术）+IT（信息技术）融合、产业链配套、商贸供应链、医' + ] + }); + $('.brand__slider').owlCarousel({ + loop:true, + margin:30, + autoplay:false, + autoplayTimeout:3000, + smartSpeed:500, + items:3, + navText:['',''], + nav:false, + dots:false, + responsive:{ + 0:{ + items:1 + }, + 576:{ + items:2 + }, + 767:{ + items:3 + }, } -}) - -$('.index_banner').init(function(slick){ - $('.index_banner .item.slick-current').addClass('active').siblings().removeClass('active') -}) -$('.index_banner').on('afterChange',function(slick,currentSlide){ - $('.index_banner .item.slick-current').addClass('active').siblings().removeClass('active'); - var _index = $('.index_banner').slick('slickCurrentSlide') - $('.section1 .number span').eq(_index).addClass('active').siblings().removeClass('active') -}) -$('.section1 .number span').click(function(){ - var _index = $(this).index(); - $('.index_banner').slick('slickGoTo',_index); - $(this).addClass("active").siblings().removeClass("active") -}); -$('.section1 .prev').click(function(){ - $('.index_banner').slick('slickPrev') -}) -$('.section1 .next').click(function(){ - $('.index_banner').slick('slickNext'); -}); + }); -//导航 -//超过一定高度导航添加类名 -var nav=$("header"); //得到导航对象 -var win=$(window); //得到窗口对象 -var sc=$(document);//得到document文档对象。 -win.scroll(function(){ - // if(sc.scrollTop()>=100){ - // nav.addClass("on"); - // }else{ - // nav.removeClass("on"); - // } -}) -//移动端展开nav -$('#navToggle').on('click',function(){ - $('.m_nav').addClass('open'); -}) -//关闭nav -$('.m_nav .top .closed').on('click',function(){ - $('.m_nav').removeClass('open'); -}) + $($('.electricItem>button')[0]).css('display','block') + $($('.electricItem>.addIon')[0]).css('display','none') + $($('.electricItem')[0]).css('background','rgba(19,75,161,0.8)') + $('.electricItem').mouseenter(function(){ + // console.log($(this).parent().siblings().children().children('.addIon')) + $(this).css('background','rgba(19,75,161,0.8)') + $(this).parent().siblings().children().css('background','transparent center top no-repeat') + $($(this).children()[3]).css('display','none') + $($(this).children()[2]).css('display','block') + $($(this).parent().siblings().children().children('button')).css('display','none') + $($(this).parent().siblings().children().children('.addIon')).css('display','block') + $('.section3').css ('transition', '1s') + if($(this).children()[1].innerText=='先进材料'){ + $('.section3').css ('background','url(images/先进材料-bg.jpg) center top no-repeat') + $('.second3Title>.title')[0].innerText = '先进材料' + $('.second3Title>p')[0].innerHTML = 'ADVANCED
MATERIALS' + $('.second3Title>.textsecond3')[0].innerHTML = '重点关注先进钢铁材料、先进有色金属材料、先进石化化工新材料、先进无机非金属材料、高性能纤维及制品和复合材料、前沿新材料等领域' + } + if($(this).children()[1].innerText=='装备制造'){ + $('.second3Title>.title')[0].innerText = '装备制造' + $('.section3').css ('background','url(images/装备制造-bg.jpg) center top no-repeat','border') + $('.second3Title>.title')[0].innerText = '装备制造' + $('.second3Title>p')[0].innerHTML = 'EQUIPMENT
MAFUFACTURING' + $('.second3Title>.textsecond3')[0].innerHTML = '重点关注高端装备、新能源、汽车及零部件、航空航天等领域' + } + if($(this).children()[1].innerText=='电子信息'){ + $('.second3Title>.title')[0].innerText = '电子信息' + $('.section3').css ('background','url(images/电子信息-bg.jpg) center top no-repeat') + $('.second3Title>.title')[0].innerText = '电子信息' + $('.second3Title>p')[0].innerHTML = 'ELECTRONIC
INFORMATION' + $('.second3Title>.textsecond3')[0].innerHTML = '重点关注计算机与智能消费设备制造、信息通信、新型显示、集成电路、电子元器件与专用材料产业、人工智能等领域' + } + if($(this).children()[1].innerText=='医药生物'){ + $('.second3Title>.title')[0].innerText = '医药生物' + $('.section3').css ('background','url(images/医药生物-bg.jpg) center top no-repeat') + $('.second3Title>.title')[0].innerText = '医药生物' + $('.second3Title>p')[0].innerHTML = 'PHARMACEUTICAL
BIOLOGY' + $('.second3Title>.textsecond3')[0].innerHTML = '重点关注创新医药、高端医疗器械、CXO（合同研发生产组织）、BT（生物技术）+IT（信息技术）融合、产业链配套、商贸供应链、医' + } + }) -//二级导航 移动端 -$(".m_nav .ul li").click(function() { - $(this).children("div.dropdown_menu").slideToggle('slow') - $(this).siblings('li').children('.dropdown_menu').slideUp('slow'); -}); -// 流动效果 -function groupSlide(){ - imgScroll.rolling({ - name:'g1', - width:'198px', - height:'116px', - direction:'left', - speed:10, - addcss:true + $('.index_banner').init(function(slick){ + $('.index_banner .item.slick-current').addClass('active').siblings().removeClass('active') + }) + $('.index_banner').on('afterChange',function(slick,currentSlide){ + $('.index_banner .item.slick-current').addClass('active').siblings().removeClass('active'); + var _index = $('.index_banner').slick('slickCurrentSlide') + $('.section1 .number span').eq(_index).addClass('active').siblings().removeClass('active') + }) + $('.section1 .number span').click(function(){ + var _index = $(this).index(); + $('.index_banner').slick('slickGoTo',_index); + $(this).addClass("active").siblings().removeClass("active") }); - imgScroll.rolling({ - name:'g2', - width:'198px', - height:'116px', - direction:'right', - speed:10, - addcss:true + $('.section1 .prev').click(function(){ + $('.index_banner').slick('slickPrev') + }) + $('.section1 .next').click(function(){ + $('.index_banner').slick('slickNext'); }); - imgScroll.rolling({ - name:'g3', - width:'198px', - height:'116px', - direction:'left', - speed:10, - addcss:true + + //导航 + //超过一定高度导航添加类名 + var nav=$("header"); //得到导航对象 + var win=$(window); //得到窗口对象 + var sc=$(document);//得到document文档对象。 + win.scroll(function(){ + }) + //移动端展开nav + $('#navToggle').on('click',function(){ + $('.m_nav').addClass('open'); + }) + //关闭nav + $('.m_nav .top .closed').on('click',function(){ + $('.m_nav').removeClass('open'); + }) + + //二级导航 移动端 + $(".m_nav .ul li").click(function() { + $(this).children("div.dropdown_menu").slideToggle('slow') + $(this).siblings('li').children('.dropdown_menu').slideUp('slow'); }); -} -groupSlide() -//全屏滚动 -$('#index_main').fullpage({ - 'navigation': true, - scrollBar: false, - slidesNavigation: true, - css3: true, - controlArrows: false, - continuousHorizontal:true, - scrollingSpeed:500, - showActiveTooltip :true, - anchors: ['hero', 'one', 'two', 'three','four','five'], - loopHorizontal: true, - afterLoad: function(anchorLink, index){ - console.log(index) - if(index == 1){ - $('header').removeClass('on').addClass("animation"); - } - if(index == 2){ - $('header').addClass('on').addClass("animation"); - - var _txt1 = $(".number1").attr('data-val'); - var _txt2 = $(".number2").attr('data-val'); - var _txt3 = $(".number3").attr('data-val'); - $(".number1").numberRock({ - lastNumber:_txt1, - duration:2000, - easing:'swing', - }); - $(".number2").numberRock({ - lastNumber:_txt2, - duration:2000, - easing:'swing', - }); - $(".number3").numberRock({ - lastNumber:_txt3, - duration:2000, - easing:'swing', - }); - } - if(index == 3){ - $('header').removeClass('on').addClass("animation"); - } - if(index == 4){ - $('header').addClass('on').addClass("animation"); - } - if(index == 5){ - $('header').removeClass('on').addClass("animation"); - } - if(index == 6){ - $('header').addClass('on').addClass("animation"); - } - // var wow = new WOW({ - // boxClass: 'wow', - // animateClass: 'animated', - // offset: 0, - // mobile: true, - // live: true - // }); - // wow.init(); - }, - afterSlideLoad:function(){ - }, - afterRender: function(){ - }, - onLeave: function(index, direction){ - if(index === 1){ - $(".header").removeClass("animation"); - }else if(index==2){ - $(".number1")[0].innerHTML = 0 - $(".number2")[0].innerHTML = 0 - $(".number3")[0].innerHTML = 0; - $(".header").removeClass("animation"); - }else{ - $(".header").removeClass("animation"); +// 流动效果 + function groupSlide(){ + imgScroll.rolling({ + name:'g1', + width:'198px', + height:'116px', + direction:'left', + speed:10, + addcss:true + }); + imgScroll.rolling({ + name:'g2', + width:'198px', + height:'116px', + direction:'right', + speed:10, + addcss:true + }); + imgScroll.rolling({ + name:'g3', + width:'198px', + height:'116px', + direction:'left', + speed:10, + addcss:true + }); + } + groupSlide() + //全屏滚动 + $('#index_main').fullpage({ + 'navigation': true, + scrollBar: false, + slidesNavigation: true, + css3: true, + controlArrows: false, + continuousHorizontal:true, + scrollingSpeed:500, + showActiveTooltip :true, + anchors: ['hero', 'one', 'two', 'three','four','five'], + loopHorizontal: true, + afterLoad: function(anchorLink, index){ + console.log(index) + if(index == 1){ + $('header').removeClass('on').addClass("animation"); + } + if(index == 2){ + $('header').addClass('on').addClass("animation"); + + var _txt1 = $(".number1").attr('data-val'); + var _txt2 = $(".number2").attr('data-val'); + var _txt3 = $(".number3").attr('data-val'); + $(".number1").numberRock({ + lastNumber:_txt1, + duration:2000, + easing:'swing', + }); + $(".number2").numberRock({ + lastNumber:_txt2, + duration:2000, + easing:'swing', + }); + $(".number3").numberRock({ + lastNumber:_txt3, + duration:2000, + easing:'swing', + }); + } + if(index == 3){ + $('header').removeClass('on').addClass("animation"); + } + if(index == 4){ + $('header').addClass('on').addClass("animation"); + } + if(index == 5){ + $('header').removeClass('on').addClass("animation"); + } + if(index == 6){ + $('header').addClass('on').addClass("animation"); + } + // var wow = new WOW({ + // boxClass: 'wow', + // animateClass: 'animated', + // offset: 0, + // mobile: true, + // live: true + // }); + // wow.init(); + }, + afterSlideLoad:function(){ + }, + afterRender: function(){ + }, + onLeave: function(index, direction){ + if(index === 1){ + $(".header").removeClass("animation"); + }else if(index==2){ + $(".number1")[0].innerHTML = 0 + $(".number2")[0].innerHTML = 0 + $(".number3")[0].innerHTML = 0; + $(".header").removeClass("animation"); + }else{ + $(".header").removeClass("animation"); + } + } + }) + $.ajax({ + url: "https://suzhou.njrenzhou.cn/api.php/index/menuList", + type: "POST", + data: { + }, + success: function (res) { + console.log(res,"999"); + // if(res.code==200){ + // let data = res.data; + // let html = '' + // data.forEach(item=>{ + // if(item.children&&item.children.length==0){ + // html+=`
  • + // 党建工作 + //
    • ` + // } + // html+=`
  • + // ${item.title} + //
    + // 集团介绍 + // 董事长致辞 + // 核心能力 + // 企业文化 + // 组织构架 + // 合作伙伴 + // 联系我们 + //
    + //
    • ` + // }) + // } + }, + error: function (err) { + console.log(err); } - } -}) + }) }) \ No newline at end of file