https://www.sinochem.com/sinochem/lib/second/js/second-qygk.js

1//发展历程
2var swipertab01 = new Swiper('.swiper-tab01', {
3   loop: true,
4   direction: 'vertical',
5   speed: 1000,
6   autoHeight: true,
7   mousewheel: false,
8   pagination: {
9      el: '.swiper-pagination01',
10      clickable: true,
11      dynamicBullets: true,
12      dynamicMainBullets: 1,
13      renderBullet: function (index, className) {
14         let year = $('.timeline-year').eq(index + 1).text();
15         console.log(year);
16         return '<span class="' + className + '">' + '<b class="left_b">' + year + '</b>' + '</span>';
17      }
18   },
19   on: {
20      slideChange: function () {
21         var num1 = this.realIndex;
22         if (num1 == 1) {
23            $('.swiper-slide-content').addClass('year2017');
24         } else {
25            $('.swiper-slide-content').removeClass('year2017');
26         }
27         var text1 = $('.honor-page-y').eq(num1 + 1).html();
28         if (text1 == 2017) {
29            $('.bianse').addClass('timeline-title-active');
30         } else {
31            $('.bianse').removeClass('timeline-title-active');
32         }
33      },
34   },
35});
36$(".DnnModule-49886 .w1440").removeClass("border_top");
37
38// 表格显示隐藏
39$('.ranking-more').click(function () {
40   $('.sinochem-rank-more').addClass('rank-more-show').removeClass('rank-more-hide');
41   $("body").css("overflow", "hidden");
42});
43$('.more-back').click(function () {
44   $('.sinochem-rank-more').addClass('rank-more-hide').removeClass('rank-more-show');
45   $("body").css("overflow", "auto");
46});
47
48// 资质荣誉
49var swipertab02 = new Swiper('.swiper-tab02', {
50   direction: 'vertical',
51   followFinger: false,
52   mousewheel: true,
53   autoHeight: false,
54   loop: false,
55   speed: 1000,
56   pagination: {
57      el: '.swiper-pagination02',
58      clickable: true,
59      dynamicBullets: false,
60      renderBullet: function (index, className) {
61         let year02 = $('.honor-page-y').eq(index).text();
62         return '<span class="' + className + '">' + '<b class="left_b">' + year02 + '</b>' + '</span>';
63      }
64   },
65   on: {
66      slideChange: function () {
67         var num1 = this.activeIndex;
68         var text1 = $('.honor-page-y').eq(num1).children('a.news-title').html();
69         $('.zzry_leftnum').html(text1);
70      },
71   },
72});
73
74tSpeed = 300 //切换速度300ms
75var navSwiper = new Swiper('#qygk-top', {
76   slidesPerView: 5,
77   freeMode: true,
78   on: {
79      init: function () {
80         navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
81         bar = this.$el.find('.bar')
82         bar.css('width', navSlideWidth)
83         bar.transition(tSpeed)
84         navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置
85         clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
86         navWidth = 0
87         for (i = 0; i < this.slides.length; i++) {
88            navWidth += parseInt(this.slides.eq(i).css('width'))
89         }
90      },
91   },
92});
93var pageSwiper = new Swiper('#qygk-bot', {
94   watchSlidesProgress: true,
95   resistanceRatio: 0,
96   autoHeight: true,
97   navigation: {
98      nextEl: '.qt-next',
99      prevEl: '.qt-prev',
100   },
101   on: {
102      touchMove: function () {
103         progress = this.progress
104         bar.transition(0)
105         bar.transform('translateX(' + navSum * progress + 'px)')
106         //粉色255,72,145灰色51,51,51
107         for (i = 0; i < this.slides.length; i++) {
108            slideProgress = this.slides[i].progress
109            if (Math.abs(slideProgress) < 1) {
110               r = Math.floor((47 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
111               g = Math.floor((85 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
112               b = Math.floor((151 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
113               navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
114            }
115         }
116      },
117      /**/
118      transitionStart: function () {
119         activeIndex = this.activeIndex
120         activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
121         //释放时导航粉色条移动过渡
122         bar.transition(tSpeed)
123         bar.transform('translateX(' + activeSlidePosition + 'px)')
124         //释放时文字变色过渡
125         navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
126         navSwiper.slides.eq(activeIndex).find('span').css({
127            'color': 'rgba(47,85,151,1)',
128            'font-size': '0.48rem'
129         })
130         if (activeIndex > 0) {
131            navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
132            navSwiper.slides.eq(activeIndex - 1).find('span').css({
133               'color': 'rgba(150,162,164,1)',
134               'font-size': '0.4rem'
135            })
136         }
137         if (activeIndex < this.slides.length) {
138            navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
139            navSwiper.slides.eq(activeIndex + 1).find('span').css({
140               'color': 'rgba(150,162,164,1)',
141               'font-size': '0.4rem'
142            })
143         }
144         //导航居中
145         navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离
146         navSwiper.setTransition(tSpeed)
147         if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
148            navSwiper.setTranslate(0)
149         } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
150            navSwiper.setTranslate(clientWidth - navWidth)
151         } else {
152            navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
153         }
154      },
155   }
156});
157//navSwiper.$el.on('touchstart', function (e) {
158   //e.preventDefault() //去掉按压阴影
159//})
160navSwiper.on('tap', function (e) {
161   clickIndex = this.clickedIndex
162   clickSlide = this.slides.eq(clickIndex)
163   pageSwiper.slideTo(clickIndex, 0);
164   this.slides.find('span').css({
165      'color': 'rgba(150,162,164,1)',
166      'font-size': '0.4rem'
167   });
168   clickSlide.find('span').css({
169      'color': 'rgba(47,85,151,1)',
170      'font-size': '0.48rem'
171   });
172})