$(function () {
(function () {
var scrollt = document.documentelement.scrolltop + document.body.scrolltop; //获取滚动后的高度
if( scrollt >200 ){ //判断滚动后高度超过200px,就显示
$("#back-top").fadein(400); //淡入
}else{
$("#back-top").stop().fadeout(0); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
}
let mainview = '';
data.map((item, index) => {
if (index % 2 !== 0) {
if (item.times) {
mainview += `
${item.year}
(${item.day})
${item.content}正式进入${item.times}时代
${item.times}
`
} else {
mainview += `
${item.year}
(${item.day})
${item.content}
`
}
} else {
if (item.times) {
mainview += `
${item.year}
(${item.day})
${item.content}正式进入${item.times}时代
${item.times}
`
} else {
mainview += `
${item.year}
(${item.day})
${item.content}
`
}
}
})
if (mainview) {
mainview = `${mainview}`;
}
$('#history').html(mainview);
})();
$("#back-top").click(function(){
$('html,body').animate({scrolltop:"0px"},500);
});
$(window).scroll(function(){ //只要窗口滚动,就触发下面代码
var scrollt = document.documentelement.scrolltop + document.body.scrolltop; //获取滚动后的高度
if( scrollt >200 ){ //判断滚动后高度超过200px,就显示
$("#back-top").fadein(400); //淡入
}else{
$("#back-top").stop().fadeout(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
}
});
// 减去底部的一个高度
// const offsetheight = $(window).height() - 140; // 底部偏移量
const offsetheight = $(window).height() + 30;
function init() {
let delaytime = 1.6;
$('.his-div').each(function () {
let thistop = $(this).offset().top;
let thisheight = $(this).height();
if (thistop + thisheight <= ($(window).scrolltop() + offsetheight)) {
// 可视区域内以及可视区域上面,不包括可视区域最后一个元素
if ($(this).index() % 2 !== 0) {
$(this).find('.data-item').removeclass('item-hidden left-move-disappear').addclass('left-move');
}else{
$(this).find('.data-item').removeclass('item-hidden right-move-disappear').addclass('right-move');
}
$(this).find('span').each(function () {
switch ($(this).index()) {
case 0:
delaytime = 4;
break;
case 1:
delaytime = 4;
break;
case 2:
delaytime = 8;
break;
}
$(this).removeclass('disappear-move');
$(this).addclass('appear-move');
$(this).css({
'animation-duration': delaytime + 's'
})
})
$(this).find('.times-text').removeclass('disappear-move').addclass('appear-move').css({
'animation-duration': '4s'
})
} else if (thistop + thisheight > ($(window).scrolltop() + offsetheight) && thistop < ($(window).scrolltop() + offsetheight)) {
// 可是区域最后一个元素
$(this).find('.data-item').addclass('item-hidden')
$(this).find('span').each(function () {
$(this).addclass('item-hidden');
})
} else {
// 其他元素
if ($(this).index() % 2 !== 0) {
$(this).find('.data-item').removeclass('left-move').addclass('item-hidden left-move-disappear');
}else{
$(this).find('.data-item').removeclass('right-move').addclass('item-hidden right-move-disappear');
}
$(this).find('span').each(function () {
switch ($(this).index()) {
case 0:
delaytime = 8;
break;
case 1:
delaytime = 6;
break;
case 2:
delaytime = 4;
break;
}
$(this).removeclass('appear-move').addclass('disappear-move item-hidden');
$(this).css({
'animation-duration': delaytime + 's'
})
})
$(this).find('.times-text').removeclass('appear-move').addclass('disappear-move item-hidden').css({
'animation-duration': '4s'
})
}
})
}
init();
let scrolldirection = 'down';
let scrollyoffset = 'none';
function judgescrolldirection() {
if (scrollyoffset === 'none') {
scrollyoffset = window.pageyoffset;
}
scrolldirection = scrollyoffset - window.pageyoffset > 0 ? 'up' : 'down';
scrollyoffset = window.pageyoffset;
}
$(window).scroll(function () {
judgescrolldirection();
let delaytime = 1.6;
if (scrolldirection === 'down') {
$('.his-div').each(function () {
let thistop = $(this).offset().top;
let thisheight = $(this).height();
if (thistop >= $(window).scrolltop() && thistop + thisheight <= ($(window).scrolltop() + offsetheight)) {
if ($(this).index() % 2 !== 0) {
$(this).find('.data-item').removeclass('item-hidden left-move-disappear').addclass('left-move');
}else{
$(this).find('.data-item').removeclass('item-hidden right-move-disappear').addclass('right-move');
}
$(this).find('span').each(function () {
switch ($(this).index()) {
case 0:
delaytime = 3;
break;
case 1:
delaytime = 3;
break;
case 2:
delaytime = 7;
break;
}
$(this).removeclass('disappear-move item-hidden').addclass('appear-move');
$(this).css({
'animation-duration': delaytime + 's'
})
})
$(this).find('.times-text').removeclass('disappear-move item-hidden').addclass('appear-move').css({
'animation-duration': '4s'
})
}
})
} else {
$('.his-div').each(function () {
let thistop = $(this).offset().top;
let thisheight = $(this).height();
if (thistop + thisheight > ($(window).scrolltop() + offsetheight)) {
if ($(this).index() % 2 !== 0) {
$(this).find('.data-item').removeclass('left-move').addclass('item-hidden left-move-disappear');
}else{
$(this).find('.data-item').removeclass('right-move').addclass('item-hidden right-move-disappear');
}
$(this).find('span').each(function () {
switch ($(this).index()) {
case 0:
delaytime = 1.9;
break;
case 1:
delaytime = 1.5;
break;
case 2:
delaytime = 1.1;
break;
}
$(this).removeclass('appear-move').addclass('disappear-move item-hidden');
$(this).css({
'animation-duration': delaytime + 's'
})
})
$(this).find('.times-text').removeclass('appear-move').addclass('disappear-move item-hidden').css({
'animation-duration': '4s'
})
}
})
}
})
})