概要

东方马达的VIRTUAL INTERNSHIP 理科参观路线中，可以通过筑波事业所和土浦事业所的工作场所体验工程师的工作。

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

/recruit/virtualinternship/02

本文

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">
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<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/v02.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="youtubebox">
<a href="javascript:void(0);" id="movie01" data-mvnum="1">
<div class="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>`)
$(`.video-wrap06`).html(`<div class="youtubebox">
<a href="javascript:void(0);" id="movie06" data-mvnum="6">
<div class="video-btn"></div>
</a>
</div>`)
$(`.video-wrap07`).html(`<div class="youtubebox">
<a href="javascript:void(0);" id="movie07" data-mvnum="7">
<div class="video-btn"></div>
</a>
</div>`)
$(`.video-wrap08`).html(`<div class="youtubebox">
<a href="javascript:void(0);" id="movie08" data-mvnum="8">
<div class="video-btn"></div>
</a>
</div>`)
setTimeout(()=>{
//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
}
}

$(document).on('click', '.moveUp', function() {
$.fn.fullpage.moveSectionUp();
});
$(document).on('click', '.moveDown', function() {
$.fn.fullpage.moveSectionDown();
});
$(window).on('load resize', function() {
wSize = $(window).width();
var hSize = $(window).height();
if(hSize < 600) {
$('body').addClass('minisp');
} else {}
s2moviewidth = $("#fullpage #section2 .moviebox").width();
s2movieheight = s2moviewidth * "0.626";
$("#fullpage #section2 .moviebox").css("height", s2movieheight + "px");
s7moviewidth = $("#fullpage #section7 .moviebox.pc_block").width();
s7movieheight = s7moviewidth * "0.484";
$("#fullpage #section7 .moviebox.pc_block").css("height", s7movieheight + "px");
s7moviewidthsp = $("#fullpage #section7 .moviebox.sp_block").width();
s7movieheightsp = s7moviewidthsp * "1.309";
$("#fullpage #section7 .moviebox.sp_block").css("height", s7movieheightsp + "px");
s8moviewidth = $("#fullpage #section8 .moviebox").width();
$("#fullpage #section8 .moviebox").css("height", s8moviewidth + "px");
s13moviewidth = $("#fullpage #section13 .moviebox").width();
s13movieheight = s13moviewidth * "0.847";
$("#fullpage #section13 .moviebox").css("height", s13movieheight + "px");
s14moviewidth = $("#fullpage #section14 .moviebox").width();
s14movieheight = s14moviewidth * "0.484";
$("#fullpage #section14 .moviebox").css("height", s14movieheight + "px");
s14moviewidthsp = $("#fullpage #section14 .moviebox.sp_block").width();
s14movieheightsp = s14moviewidthsp * "1.309";
$("#fullpage #section14 .moviebox.sp_block").css("height", s14movieheightsp + "px");
s15moviewidth = $("#fullpage #section15 .moviebox").width();
s15textboxwidth = wSize - s15moviewidth - "130";
$("#fullpage #section15 .textbox").css("width", s15textboxwidth + "px");
$("#fullpage #section15 .moviebox").css("height", s15moviewidth + "px");
});
var ytData = [{
id: 'movie01',
movie: 'eRaF3kktZQY'
}, {
id: 'movie02',
movie: 'U94SBeTWEEc'
}, {
id: 'movie03',
movie: '0rcLdGIsbX0'
}, {
id: 'movie04',
movie: 'kAEoRw5cvhI'
}, {
id: 'movie05',
movie: 'CwAzTL0vPKQ'
}, {
id: 'movie06',
movie: '2nMWxFCe0MQ'
}, {
id: 'movie07',
movie: 'MSvVvjc-2FI'
}, {
id: 'movie08',
movie: 'qlWCj1HhJeA'
}];
// 加载IFrame Player API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// YouTube嵌入
var ytPlayer;

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;
jQuery(function() {
$("#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()
});
});
$(window).on('load resize', function() {
var w = $(window).width();
if(w > 820) {
s17imgwidth = $("#fullpage #section17 .imgbox").width();
s17imgheight = $("#fullpage #section17 .imgbox").height();
s17textboxwidth = w - s17imgwidth - "100";
$("#fullpage #section17 .flexbox").css("height", s17imgheight + "px");
$("#fullpage #section17 .imgbox").css("height", s17imgheight + "px");
$("#fullpage #section17 .textbox").css("width", s17textboxwidth + "px");
$("#fullpage #section17 .textbox").css("height", s17imgheight + "px");
$("#fullpage #section7").addClass('pc07');
$("#fullpage #section14").addClass('pc14');
} else {
//窗口大小小于768时的处理
s17imgwidth = $("#fullpage #section17 .imgbox img").width();
s17imgheight = $("#fullpage #section17 .imgbox img").height();
s17textboxwidth = w - s17imgwidth - "40";
$("#fullpage #section17 .flexbox").css("height", "auto");
$("#fullpage #section17 .imgbox").css("height", "auto");
$("#fullpage #section17 .textbox").css("width", "100%");
$("#fullpage #section17 .textbox").css("height", "40vh");
$("#fullpage #section7").addClass('sp07');
$("#fullpage #section14").addClass('sp14');
}
});
$(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");
}
});
},100)
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['section0', 'section1', 'section2', 'section3', 'section4', 'section5', 'section6', 'section7', 'section8', 'section9', 'section10', 'section11', 'section12', 'section13', 'section14', 'section15', 'section16', 'section17', 'section18'],
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>