...
|
...
|
@@ -19,6 +19,11 @@ class NewHome extends Page { |
|
|
$trendCode: $('.trend-code')
|
|
|
};
|
|
|
|
|
|
this.time = 6000;
|
|
|
this.containerWidth = 0;
|
|
|
this.innerWidth = 0;
|
|
|
this.moveLength = 0;
|
|
|
this.interval = '';
|
|
|
this.init();
|
|
|
}
|
|
|
|
...
|
...
|
@@ -28,6 +33,7 @@ class NewHome extends Page { |
|
|
this.bindEvents();
|
|
|
this.swiper();
|
|
|
this.showTrend();
|
|
|
window.reMarginFooter('.footer-tab');
|
|
|
}
|
|
|
|
|
|
// 首次进入个人中心,且登陆,且没有设置潮流口令,打开弹框子
|
...
|
...
|
@@ -44,6 +50,7 @@ class NewHome extends Page { |
|
|
bindEvents() {
|
|
|
this.selector.$codeSet.on('click', this.codeSet.bind(this));
|
|
|
this.selector.$resYas.on('click', this.yas.bind(this));
|
|
|
this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this));
|
|
|
}
|
|
|
|
|
|
// 资源位
|
...
|
...
|
@@ -104,17 +111,41 @@ class NewHome extends Page { |
|
|
codeSet(e) {
|
|
|
e.preventDefault();
|
|
|
$('.set-trend-world').show();
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 潮流口令滚动
|
|
|
autoScroll() {
|
|
|
let containerWidth = this.selector.$scrollC.width();
|
|
|
let innerWidth = this.selector.$scrollWords.width();
|
|
|
// 触发修改滚动
|
|
|
chanScroll() {
|
|
|
this.selector.$scrollWords.stop(true, true);
|
|
|
clearInterval(this.interval);
|
|
|
setTimeout(() => {
|
|
|
this.autoScroll();
|
|
|
}, 500);
|
|
|
}
|
|
|
|
|
|
if (innerWidth <= containerWidth) {
|
|
|
this.selector.$scrollC.removeClass('go-scroll');
|
|
|
// 判断滚动
|
|
|
autoScroll() {
|
|
|
this.containerWidth = this.selector.$scrollC.width();
|
|
|
this.innerWidth = this.selector.$scrollWords.width();
|
|
|
this.moveLength = this.innerWidth - this.containerWidth;
|
|
|
if (this.innerWidth > (this.containerWidth + 1)) {
|
|
|
this.goScroll();
|
|
|
this.interval = setInterval(() => {
|
|
|
this.goScroll();
|
|
|
}, this.time);
|
|
|
} else {
|
|
|
clearInterval(this.interval);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 滚动
|
|
|
goScroll() {
|
|
|
let $animateObj = this.selector.$scrollWords;
|
|
|
|
|
|
$animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => {
|
|
|
$animateObj.animate({left: '0'}, this.time / 2, 'linear');
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
$(() => {
|
...
|
...
|
|