`; this.DOM.el.insertBefore(this.DOM.svg, this.DOM.nav); this.DOM.shape = this.DOM.svg.querySelector('path'); } updateFrame() { this.paths.initial = this.calculatePath('initial'); this.paths.final = this.calculatePath('final'); this.DOM.svg.setAttribute('viewbox',`0 0 ${this.rect.width} ${this.rect.height}`); this.DOM.shape.setAttribute('d', this.paths.initial); } calculatePath(path = 'initial') { if ( path === 'initial' ) { return `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M 0,0 ${this.rect.width},0 ${this.rect.width},${this.rect.height} 0,${this.rect.height} Z`; } else { return { step1: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width},0 ${this.rect.width},${this.rect.height} 0,${this.rect.height} Z`, step2: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.frameSize} ${this.rect.width},${this.rect.height} 0,${this.rect.height} Z`, step3: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.rect.height-this.frameSize} 0,${this.rect.height} Z`, step4: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.rect.height-this.frameSize} ${this.frameSize},${this.rect.height-this.frameSize} Z` } } } initEvents() { this.DOM.nextCtrl.addEventListener('click', () => this.navigate('next')); this.DOM.prevCtrl.addEventListener('click', () => this.navigate('prev')); window.addEventListener('resize', debounce(() => { this.rect = this.DOM.el.getBoundingClientRect(); this.updateFrame(); }, 20)); } navigate(dir = 'next') { if ( this.isAnimating ) return false; this.isAnimating = true; const animateShapeInTimeline = anime.timeline({ duration: this.settings.animation.shape.duration, easing: this.settings.animation.shape.easing.in }); animateShapeInTimeline .add({ targets: this.DOM.shape, d: this.paths.final.step1 }) .add({ targets: this.DOM.shape, d: this.paths.final.step2, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.final.step3, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.final.step4, offset: `-=${this.settings.animation.shape.duration*.5}` }); const animateSlides = () => { return new Promise((resolve, reject) => { const currentSlide = this.DOM.slides[this.current]; anime({ targets: currentSlide, duration: this.settings.animation.slides.duration, easing: this.settings.animation.slides.easing, translateX: dir === 'next' ? -1*this.rect.width : this.rect.width, complete: () => { currentSlide.classList.remove('slide--current'); resolve(); } }); this.current = dir === 'next' ? this.current < this.slidesTotal-1 ? this.current + 1 : 0 : this.current > 0 ? this.current - 1 : this.slidesTotal-1; const newSlide = this.DOM.slides[this.current]; newSlide.classList.add('slide--current'); anime({ targets: newSlide, duration: this.settings.animation.slides.duration, easing: this.settings.animation.slides.easing, translateX: [dir === 'next' ? this.rect.width : -1*this.rect.width,0] }); const newSlideImg = newSlide.querySelector('#id_a2b73a0a3f223c4299c1782f .slide__img'); anime.remove(newSlideImg); anime({ targets: newSlideImg, duration: this.settings.animation.slides.duration*4, easing: this.settings.animation.slides.easing, translateX: [dir === 'next' ? 200 : -200, 0] }); anime({ targets: [newSlide.querySelector('#id_a2b73a0a3f223c4299c1782f .slide__title'), newSlide.querySelector('#id_a2b73a0a3f223c4299c1782f .slide__desc'), newSlide.querySelector('#id_a2b73a0a3f223c4299c1782f .slide__link')], duration: this.settings.animation.slides.duration*2, easing: this.settings.animation.slides.easing, delay: (t,i) => i*100+100, translateX: [dir === 'next' ? 300 : -300,0], opacity: [0,1] }); }); }; const animateShapeOut = () => { const animateShapeOutTimeline = anime.timeline({ duration: this.settings.animation.shape.duration, easing: this.settings.animation.shape.easing.out }); animateShapeOutTimeline .add({ targets: this.DOM.shape, d: this.paths.final.step3 }) .add({ targets: this.DOM.shape, d: this.paths.final.step2, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.final.step1, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.initial, offset: `-=${this.settings.animation.shape.duration*.5}`, complete: () => this.isAnimating = false }); } animateShapeInTimeline.finished.then(animateSlides).then(animateShapeOut); } }; new Slideshow(document.querySelector('#id_a2b73a0a3f223c4299c1782f .slideshow')); imagesLoaded('#id_a2b73a0a3f223c4299c1782f .slide__img', { background: true }, () => document.body.classList.remove('b_loading')); });
部分代表
上海.長興島郊野公園
松江.雪浪湖度假村
浦東.書院人家
長寧.金庭莊園
奉賢.海灣明鴻
寶山.吳淞濕地公園
1
2
3
4
5
6
長興基地
郊野公園
松江基地
雪浪湖酒店
浦東基地
書院人家
長寧基地
金庭莊園
奉賢基地
海灣明鴻
松江基地
雪浪湖酒店
部分代表
昆山.陽澄湖水上公園
無錫.龍鳳谷景區
蘇州.陽山溫泉山莊
西山.太湖旅游度假區
常熟.沙家浜基地
昆山.國防訓練中心
1
2
3
4
5
6
昆山基地
陽澄湖
無錫基地
龍鳳谷
蘇州基地
陽山溫泉
西山基地
太湖度假區
常熟基地
沙家浜景區
無錫基地
龍鳳谷
部分代表
桐廬.山那邊營地
安吉.竹博園基地
平湖.圣雷克酒店
嘉興.梅花洲基地
嘉善.云瀾灣基地
莫干山.景區基地
1
2
3
4
5
6
場地名稱
桐廬基地
場地特點
山清水秀
場地性質
野外場地
食宿配套
3-5星可選
會務配套
3-5星可選
場地特點
山清水秀
部分代表
天堂寨.將軍的故里
黃山.西遞宏村
千島湖.萬畝水景
舟山.最美的群島
井岡山.紅色的搖籃
騰格里.沙漠際遇
1
2
3
4
5
6
安徽營地
金寨天堂寨
黃山營地
西遞宏村
千島湖營地
水岸林地
舟山營地
舟山海島
井岡山營地
紅色長征線
黃山營地
西遞宏村
山东十一选五直播