http://028yw.cn/static/js/app.js

1// JavaScript Document
2
3var HOME = {
4	
5	init: function(){
6		var self = this;
7
8		// banner滑块
9		var bannerSwiper = new Swiper('.banner', {
10			pagination: '.banner-pagination',
11			speed: 1200,
12			autoplay: 4000,
13			loop: true,
14			autoplayDisableOnInteraction: false,
15			paginationClickable: true
16		});
17		$('.banner .banner-arrow-left').on('click', function(){
18			bannerSwiper.swipePrev()
19		});
20		$('.banner .banner-arrow-right').on('click', function(){
21			bannerSwiper.swipeNext()
22		});
23
24		// 证书查询
25		var certificateSwiper = new Swiper('.certificate-swiper', {
26			pagination: '.certificate-pagination',
27			speed: 500,
28			loop: true,
29			slidesPerView: 6,
30			spaceBetween: 20,
31			paginationClickable: true,
32			breakpoints: {
33				//当宽度小于等于800
34				800: { 
35					slidesPerView: 2
36				},
37				//当宽度小于等于540
38				540: {
39					slidesPerView: 2,
40					spaceBetween: 10
41				}
42			}
43		});
44		$('.container .certificate-left').on('click', function(){
45			certificateSwiper.swipePrev()
46		});
47		$('.container .certificate-right').on('click', function(){
48			certificateSwiper.swipeNext()
49		});
50
51		self.showCertificate();
52
53		$('.video').on('click', '.list li a', function(){
54			var src = $(this).data('src');
55			if (!src) return;
56
57			BASIC.modalBox($(this), function($obj){
58
59				BASIC.currentModal = $obj;
60
61				if ($obj.closest('li').prev().length) {
62					$('#modal-play-container .prev-btn').removeClass('disabled');
63				} else {
64					$('#modal-play-container .prev-btn').addClass('disabled');
65				}
66				if ($obj.closest('li').next().length) {
67					$('#modal-play-container .next-btn').removeClass('disabled');
68				} else {
69					$('#modal-play-container .next-btn').addClass('disabled');
70				}
71
72				$('#modal-play-container .modal-body').html('<div class="video-box"></div><div class="info-box"></div>');
73
74				var vs = $obj.data('src') || '';
75
76				if ($.checkUrl(vs)) {
77					var vh = '<iframe src="' + vs + '" frameborder="0" width="100%" height="100%" ></iframe>';
78				} else {
79					var vh = '<video controls="controls" autoplay="autoplay" src="' + vs + '"></video>';
80				}
81				var infoH = $obj.find('.title').html();
82
83				setTimeout(function(){
84					$('#modal-play-container .modal-body .video-box').html(vh);
85					$('#modal-play-container .modal-body .info-box').html(infoH);
86				}, 700);
87			});
88		});
89
90		var windowHeight = $(window).height(),
91			windowWidth = $(window).width(),
92			aboutBgH = 280/1920*windowWidth,
93			aboutH = $('.about').outerHeight(),
94			aT = $('.about').offset().top,
95			bgT = windowHeight - aboutBgH + (aboutH + aT - windowHeight)*0.4;
96
97		$(window).on('scroll', function(){
98			var scrollTop = $('body').scrollTop() || $('html').scrollTop(),
99				bgTop = bgT - scrollTop*0.4;
100
101			$('.about').css({'background-position-y': bgTop + 'px'});
102		});
103	},
104
105	// 显示证书
106	showCertificate: function() {
107		var self = this,
108			sign = false;
109
110		$('.certificate .wow-list').find('.swiper-slide').each(function() {
111			var numIndex = $(this).data('swiper-slide-index');
112			if (!numIndex) {
113				if (sign) {
114					return false;
115				} else {
116					sign = true;
117				}
118			}
119			if (sign && numIndex <6) {
120				$(this).css({'display': 'block'});
121			}
122		});
123	}
124};
125
126
127var PRODUCT = {
128
129	init: function(){
130		var self = this;
131
132		if ($('.product-thumb').length) {
133			var $box = $('.product-body .thumb-list'),
134				w = $box.find('span').length * 74;
135
136			$box.width(w > 420 ? 420 : w);
137			$('.thumb-list dd').width(w);
138			var viewSwiper = new Swiper('.product-swiper', {
139				onSlideChangeStart: function() {
140					updateNavPosition()
141				}
142			});
143			$('.product-arrow-left').on('click', function(e) {
144				e.preventDefault()
145				if (viewSwiper.activeIndex == 0) {
146					viewSwiper.swipeTo(viewSwiper.slides.length - 1, 300);
147					return
148				}
149				viewSwiper.swipePrev()
150			});
151			$('.product-arrow-right').on('click', function(e) {
152				e.preventDefault()
153				if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
154					viewSwiper.swipeTo(0, 300);
155					return
156				}
157				viewSwiper.swipeNext()
158			});
159			$('.thumb-list').on('click', 'span', function() {
160				viewSwiper.swipeTo($(this).index())
161			});
162
163			function updateNavPosition() {
164				$('.thumb-list span').eq(viewSwiper.activeIndex).addClass('active').siblings().removeClass('active');
165				
166				var left = parseInt(viewSwiper.activeIndex / 6) * 70 * 6;
167				$('.thumb-list dd').css({left: -left});
168			}

169			$('.product-body .thumb-list').find('span').each(function(index) {
170				$(this).css({'background-image': 'url(' + $('.product-swiper').find('li').eq(index).data('img') + ')'});
171			});
172		}
173
174
175		$('.product-body .tab-head a').hover(function() {
176			var index = $(this).index();
177			$(this).addClass('active').siblings().removeClass('active');
178			$('.product-body .tab-content article').eq(index).fadeIn().siblings().stop().hide();
179		});
180	}
181};
182
183
184var VIDEOLIST = {
185
186	init: function(){
187		$('.video-list-body').on('click', '.list li a', function(){
188			var src = $(this).data('src');
189			if (!src) return;
190
191			BASIC.modalBox($(this), function($obj){
192
193				BASIC.currentModal = $obj;
194
195				if ($obj.closest('li').prev().length) {
196					$('#modal-play-container .prev-btn').removeClass('disabled');
197				} else {
198					$('#modal-play-container .prev-btn').addClass('disabled');
199				}
200				if ($obj.closest('li').next().length) {
201					$('#modal-play-container .next-btn').removeClass('disabled');
202				} else {
203					$('#modal-play-container .next-btn').addClass('disabled');
204				}
205
206				$('#modal-play-container .modal-body').html('<div class="video-box"></div><div class="info-box"></div>');
207
208				var vs = $obj.data('src') || '';
209
210				if ($.checkUrl(vs)) {
211					var vh = '<iframe src="' + vs + '" frameborder="0" width="100%" height="100%" ></iframe>';
212				} else {
213					var vh = '<video controls="controls" autoplay="autoplay" src="' + vs + '"></video>';
214				}
215				var infoH = $obj.find('.title').html();
216
217				setTimeout(function(){
218					$('#modal-play-container .modal-body .video-box').html(vh);
219					$('#modal-play-container .modal-body .info-box').html(infoH);
220				}, 700);
221			});
222		});
223	}
224}
225
226
227$(function(){
228	if($('.js-pin-wrapper').length){
229		$('.js-pin-wrapper').pin({
230			padding: {
231				top: 80
232			},
233			activeClass: 'bounceInDown',
234			containerSelector: "#main > .container"
235		});
236	}
237
238	$('.sub-nav .sub-list-box').find('dd.active').addClass('on');
239	var $navBox = $('.sub-nav .sub-list-box');
240	$('.sub-nav').on('click', 'dd > a', function(){
241		if(!$(this).parent().find('ul').length) return;
242		var $dd = $(this).parent(),
243			$subNav = $dd.find('ul'),
244			subNavH = $dd.find('li').length * $dd.find('li').eq(0).height(),
245			sign = !!$subNav.height();
246
247		var height = $navBox.find('dd').length * ($(this).height() + 1);
248
249		$('.sub-nav .sub-list-box ul').css({height: 0});
250		$('.sub-nav .sub-list-box').find('.on').removeClass('on');
251		if(!sign){
252			$subNav.css({height: subNavH});
253			$navBox.height(height + subNavH);
254			$(this).closest('dd').addClass('on');
255		}else{
256			$navBox.height(height);
257		}
258		$('.pin-wrapper').height($('.js-pin-wrapper').height());
259
260	}).on('click', '.mobile-show', function(){
261		var height = 0;
262		$navBox.find('dd').each(function(){
263			height += $(this).height();
264		});
265		$('.sub-nav').toggleClass('mobile-active');
266		if($('.sub-nav').hasClass('mobile-active')){
267			$navBox.height(height);
268		}else{
269			$navBox.height(0);
270		}
271
272	});
273
274	var scriptArgs = document.getElementById('app').getAttribute('data');
275
276	switch(scriptArgs){
277		case 'home':
278			HOME.init();
279			break;
280		case 'product':
281			PRODUCT.init();
282			break;
283		case 'videoList':
284			VIDEOLIST.init();
285			break;
286		default:
287			break;
288	}
289});