概要

在东方马达的VIRTUAL INTERNSHIP文科参观路线中，可以模拟体验现场销售和内部销售的两种销售工作。

コンテンツ検索用フィールド

/recruit/virtualinternship/01

本文

CSSファイル

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" id="aos-css" href="//cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" type="text/css" media="all">
<link rel="stylesheet" id="swiper-css" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css" type="text/css" media="all">
<link rel="stylesheet" id="app-css" href="/sites/default/files/custom/css/recruit/app.css" type="text/css" media="all">
<link rel="stylesheet" href="/sites/default/files/custom/css/recruit/virtualinternship/commonstyle.css" type="text/css">
<link rel="stylesheet" href="/sites/default/files/custom/css/recruit/virtualinternship/v01.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/sites/default/files/custom/css/recruit/virtualinternship/jquery.fullpage.css">

JSファイル

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script src="/sites/default/files/custom/js/recruit/app.js"></script>

JSファイル(ヘッダ)

<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/sites/default/files/custom/js/recruit/virtualinternship/jquery.fullpage.js"></script>
<script>
$(document).ready(function() {
const $header = $(`header#header`).prop('outerHTML')
$(`header#header`).remove()
$(`#fullpage > section:nth-child(1) .sectioninner > .maintitle`).before($header)
$('#pagetop').remove()
$(`#menu`).html(`<div data-menuanchor="section0" class="active"><a href="#section0"><i class="fas fa-chevron-up"></i></a></div>`)
$(`.video-wrap01`).html(`<div class="text01 pc_block"><img src="/sites/default/files/image/recruit/virtualinternship/01/02text01.png" alt="请多关照。" width="144" height="287"></div>
<div class="youtubebox">
<a href="javascript:void(0);" id="movie01" data-mvnum="1">
<div class="video-btn" id="video-btn"></div>
</a>
</div>`)
$(`.video-wrap02`).html(`<div class="youtubebox">
<a href="javascript:void(0);" id="movie02" data-mvnum="2">
<div class="video-btn"></div>
</a>
</div>`)
$(`.video-wrap03`).html(`<div class="youtubebox">
<a href="javascript:void(0);" id="movie03" data-mvnum="3">
<div class="video-btn"></div>
</a>
</div>`)
$(`.video-wrap04`).html(`<div class="youtubebox">
<a href="javascript:void(0);" id="movie04" data-mvnum="4">
<div class="video-btn"></div>
</a>
</div>`)
$(`.video-wrap05`).html(`<div class="youtubebox">
<a href="javascript:void(0);" id="movie05" data-mvnum="5">
<div class="video-btn"></div>
</a>
</div>`)
setTimeout(()=>{
var ytData = [{
id: 'movie01',
movie: 'K5tMuqbLPf0'
}, {
id: 'movie02',
movie: 'cyDFl-W7yfU'
}, {
id: 'movie03',
movie: 'bJ7Pmp3vwrY'
}, {
id: 'movie04',
movie: 'f2ot1p5XZJA'
}, {
id: 'movie05',
movie: 'qZN5ER3gwzE'
}];
var ytPlayer = [],
ytPlaying, ytStop, ytPlay;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
ytPlayer[thisIndex] = new YT.Player('player', {
controls: 0,
disablekb: 0,
iv_load_policy: 3,
modestbranding: 1,
rel: 0,
showinfo: 0,
videoId: ytData[thisIndex]['movie'],
playerVars: {
autoplay: 1,
playsinline: 1
},
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
}

function onPlayerReady(event) {
event.target.playVideo();
ytPlayer.setPlaybackQuality('hd720');
}

function onPlayerStateChange(event) {
var ytStatus = event.target.getPlayerState();
if(ytStatus == YT.PlayerState.ENDED) {
$('.video-wrap').removeClass('active');
$('.youtubebox iframe').remove();
}
if(ytStatus == YT.PlayerState.PAUSED) {
$('.video-wrap').addClass('stop');
}
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
$("#menu a").click(function() {
$.fn.fullpage.moveTo(1);
return false;
});
$('.youtubebox a').on('click', function() {
var movie_id = $(this).attr('id');
$(this).append('<div id="player"></div>');
$(this).removeClass('pause');
$(this).parents().find('.video-wrap').addClass('active');
var self = $(this),
thisId = self.prevAll('id');
thisIndex = self.attr('data-mvnum') - 1;
onYouTubeIframeAPIReady()
});
$(document).on('click', '.moveUp', function() {
$.fn.fullpage.moveSectionUp();
});
$(document).on('click', '.moveDown', function() {
$.fn.fullpage.moveSectionDown();
});
$(window).on('load resize', function() {
var hSize = $(window).height();
if(hSize < 600) {
$('body').addClass('minisp');
} else {}
s2moviewidth = $("#fullpage #section2 .moviebox").width();
$("#fullpage #section2 .moviebox").css("height", s2moviewidth + "px");
s5moviewidth = $("#fullpage #section5 .moviebox").width();
s5movieheight = s5moviewidth * "0.626";
$("#fullpage #section5 .moviebox").css("height", s5movieheight + "px");
s6moviewidth = $("#fullpage #section6 .moviebox").width();
s6movieheight = s6moviewidth * "0.562";
$("#fullpage #section6 .moviebox").css("height", s6movieheight + "px");
s9moviewidth = $("#fullpage #section9 .moviebox").width();
s9movieheight = s9moviewidth * "0.626";
$("#fullpage #section9 .moviebox").css("height", s5movieheight + "px");
s12moviewidth = $("#fullpage #section12 .moviebox").width();
s12movieheight = s12moviewidth * "0.626";
$("#fullpage #section12 .moviebox").css("height", s12movieheight + "px");
});
$(window).on('load resize', function() {
var w = $(window).width();
if(w <= 820) {
$("#fullpage #section2 .textboxinner").css("width", "100%");
} else {
stextwidth = $("#fullpage #section2 .textbox .text02").width();
$("#fullpage #section2 .textboxinner").css("width", stextwidth + "px");
}
});
$(window).on('load resize', function() {
var w = $(window).width();
var defH = $(window).innerHeight();
var defH2 = defH - "41";
if(w <= 1080) {
$(".sectioninner").css("height", defH2 + "px");
} else {
$(".sectioninner").css("height", "auto");
}
if(w <= 780) {
$('body').addClass('sp');
} else {
$('body').addClass('pc');
}
});
//methods
$(window).on('load resize', function() {
responsive();
});

function responsive() {
var w = $(window).width();
if(w <= 1180) {
$.fn.fullpage.setAllowScrolling(true);
} else {
$.fn.fullpage.setAllowScrolling(true);
//$.fn.fullpage.setAllowScrolling(false);//后来改为false
}
}
},100)
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['section0', 'section1', 'section2', 'section3', 'section4', 'section5', 'section6', 'section7', 'section8', 'section9', 'section10', 'section11', 'section12', 'section13', 'section14'],
menu: '#menu',
'onLeave': function(index, nextIndex, direction) {
$('.moveUpdummy').addClass('hide');
$('.moveDown').addClass('hide');
$('.moveUp').addClass('hide');
$('.video-wrap').removeClass('active');
$('.youtubebox #player').remove();
},
'afterLoad': function(anchorLink, index) {
$('.moveUpdummy').removeClass('hide');
$('.moveDown').removeClass('hide');
$('.moveUp').removeClass('hide');
$('.video-wrap').removeClass('active');
$('.youtubebox #player').remove();
}
});

});
</script>