Skip to content

sora / sanitary-net

Go to a project
Commit b959eafe by o.kimura
Options

インデント変更

parent 23b03b9a
Expand all
Inline Side-by-side
Showing with 269 additions and 230 deletions
takumi-style/iframe.html
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>viewport test - iframe parent</title> <title>viewport test - iframe parent</title>
<style> <style>
html,body{ html,
background-color:#ffffff; body {
height: 100%; background-color: #ffffff;
width: 100%; height: 100%;
margin: 0; width: 100%;
padding: 0; margin: 0;
} padding: 0;
#container{ }
height: 100%;
width: 100%; #container {
display: flex; height: 100%;
align-items: center; width: 100%;
justify-content: center; display: flex;
} align-items: center;
iframe{ justify-content: center;
border: none; }
}
</style> iframe {
border: none;
}
</style>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<!-- <!--
動作確認済みのブラウザ 動作確認済みのブラウザ
Mac　-　chrome Mac　-　chrome
PC用にフォントを設定 PC用にフォントを設定
部分的にプルプルするのを何とかする（問題の選択肢） 部分的にプルプルするのを何とかする（問題の選択肢）
--> -->
<iframe src="index_ie.html" width="990" height="660" scrolling="no"> <iframe src="index_ie.html" width="990" height="660" scrolling="no">
</div> </div>
</iframe> </iframe>
</body> </body>
</html> </html>
takumi-style/js/doctor.js
// doctor // doctor
function doctorMaster(){ function doctorMaster() {
//---init
var myObj = new Object();
var doctor = document.getElementById("doctor");
var doctorImg = doctor.getElementsByTagName("img")[0];
var fuki = document.getElementById("doctor_fuki");
var fuki_text = fuki.getElementsByClassName("fuki_text")[0];
//---init
//---------------------------------------------------------------------博士を消します。 var myObj = new Object();
myObj.hideFunc = function(){ var doctor = document.getElementById("doctor");
fuki.classList.add("vanish"); var doctorImg = doctor.getElementsByTagName("img")[0];
anime({targets: "#doctor",left:"-20vw",easing:"easeOutQuad" , duration: 300, complete:function(){ var fuki = document.getElementById("doctor_fuki");
doctor.classList.add("vanish"); var fuki_text = fuki.getElementsByClassName("fuki_text")[0];
}});//------ anime
}
myObj.directHide = function(){//-------------演出無しで消します
fuki.classList.add("vanish");
doctor.classList.add("vanish");
}
//---------------------------------------------------------------------博士を表示します。
myObj.dispFunc = function(str){
doctorImg.src = "images/doctor/doctor_smile.png";
if (str != undefined){
window.setTimeout(function(){doctorObj.dispFuki(str)}, 500);
}
doctor.classList.remove("vanish");
anime({targets: "#doctor",left:["-20vw","0"], duration: 1000});//------ anime
}
//---------------------------------------------------------------------吹き出しを消します。
myObj.hideFuki = function (){
fuki.classList.add("vanish");
}
//---------------------------------------------------------------------吹き出しを表示します。
myObj.dispFuki = function (str){
if (str != undefined){
this.setFukiText(str);
}
fuki.classList.remove("vanish");
}
//---------------------------------------------------------------------吹き出しの内容を変更します
myObj.setFukiText = function(str){
fuki_text.src = "images/doctor/"+str;
if (str == "fuki_text_ng.png"){
doctorImg.src = "images/doctor/doctor_disgust.png";
}else{
doctorImg.src = "images/doctor/doctor_smile.png";
}
anime({targets: "#doctor_fuki",scale:[0,1], duration: 1000});//------ anime
}
//---------------------------------------------------------------------フキダシの大きさを変更します
myObj.setLargeFuki = function(){ //---------------------------------------------------------------------博士を消します。
fuki.classList.remove("small"); myObj.hideFunc = function () {
} fuki.classList.add("vanish");
myObj.setSmallFuki = function(){ anime({
fuki.classList.add("small"); targets: "#doctor",
} left: "-20vw",
easing: "easeOutQuad",
return myObj; duration: 300,
complete: function () {
} doctor.classList.add("vanish");
\ No newline at end of file }
}); //------ anime
}
myObj.directHide = function () { //-------------演出無しで消します
fuki.classList.add("vanish");
doctor.classList.add("vanish");
}
//---------------------------------------------------------------------博士を表示します。
myObj.dispFunc = function (str) {
doctorImg.src = "images/doctor/doctor_smile.png";
if (str != undefined) {
window.setTimeout(function () {
doctorObj.dispFuki(str)
}, 500);
}
doctor.classList.remove("vanish");
anime({
targets: "#doctor",
left: ["-20vw", "0"],
duration: 1000
}); //------ anime
}
//---------------------------------------------------------------------吹き出しを消します。
myObj.hideFuki = function () {
fuki.classList.add("vanish");
}
//---------------------------------------------------------------------吹き出しを表示します。
myObj.dispFuki = function (str) {
if (str != undefined) {
this.setFukiText(str);
}
fuki.classList.remove("vanish");
}
//---------------------------------------------------------------------吹き出しの内容を変更します
myObj.setFukiText = function (str) {
fuki_text.src = "images/doctor/" + str;
if (str == "fuki_text_ng.png") {
doctorImg.src = "images/doctor/doctor_disgust.png";
} else {
doctorImg.src = "images/doctor/doctor_smile.png";
}
anime({
targets: "#doctor_fuki",
scale: [0, 1],
duration: 1000
}); //------ anime
}
//---------------------------------------------------------------------フキダシの大きさを変更します
myObj.setLargeFuki = function () {
fuki.classList.remove("small");
}
myObj.setSmallFuki = function () {
fuki.classList.add("small");
}
return myObj;
}
takumi-style/js/main.js
//-----初期設定 //-----初期設定
var container; var container;
var selectLevel = 0; var selectLevel = 0;
var aspect = 2/3;//---ターゲットの縦横比 var aspect = 2 / 3; //---ターゲットの縦横比
var jsonData; var jsonData;
...@@ -15,71 +15,67 @@ var quizMaster; ...@@ -15,71 +15,67 @@ var quizMaster;
//-----環境判定 //-----環境判定
var ua = navigator.userAgent; var ua = navigator.userAgent;
var myOS = 'pc'; var myOS = 'pc';
var androidConnect = false;//------PCの場合はfalse var androidConnect = false; //------PCの場合はfalse
if (ua.indexOf("Android") > 0){ if (ua.indexOf("Android") > 0) {
androidConnect = true;//------androidの場合ははtruに androidConnect = true; //------androidの場合ははtruに
myOS='android'; myOS = 'android';
}else if (ua.indexOf("iPad") > 0 || ua.indexOf("iPhone") > 0 ) { } else if (ua.indexOf("iPad") > 0 || ua.indexOf("iPhone") > 0) {
myOS='ios'; myOS = 'ios';
} }
var eventTypeList; var eventTypeList;
if (myOS == 'pc'){ if (myOS == 'pc') {
eventTypeList = ['click','mouseover', 'mouseout','mousedown', 'mouseup', 'mousemove']; eventTypeList = ['click', 'mouseover', 'mouseout', 'mousedown', 'mouseup', 'mousemove'];
}else{ } else {
eventTypeList = ['touchend','touchstart','touchend','touchstart','touchend','touchmove']; eventTypeList = ['touchend', 'touchstart', 'touchend', 'touchstart', 'touchend', 'touchmove'];
} }
//---ダブルタップの拡大防止 //---ダブルタップの拡大防止
var lastTouch = 0; var lastTouch = 0;
window.addEventListener('touchend', function(event) { window.addEventListener('touchend', function (event) {
const now = window.performance.now(); const now = window.performance.now();
if (now - lastTouch <= 500) { if (now - lastTouch <= 500) {
event.preventDefault(); event.preventDefault();
} }
lastTouch = now; lastTouch = now;
}, true); }, true);
//---------------------------------------------------------------------------------------------------main routine //---------------------------------------------------------------------------------------------------main routine
document.addEventListener("DOMContentLoaded",main); document.addEventListener("DOMContentLoaded", main);
function main(){
function main() {
//---- set public variables
container = document.getElementById("container");
topAnime = topAnime(eventTypeList);
doctorObj = doctorMaster();
takumiObj = takumiMaster();
levelSelectMenu = levelSelectMenu(eventTypeList);
quizMaster = quizMaster(eventTypeList);
//---- contents start
/*
if (myOS == "pc"){
topAnime.dispFunc();//---PCの場合はすぐに再生ｎ
}else{
window.setTimeout(function(){topAnime.dispFunc()}, 2500);//----Androidは起動後に少し待ってからアニメ再生
}
*/
//---- resize
window.addEventListener( "resize", resizeFunc);
resizeFunc();
}
function resizeFunc(){ //---- set public variables
//----- set container size container = document.getElementById("container");
var docWidth = window.innerWidth; topAnime = topAnime(eventTypeList);
container.style.width = docWidth + "px"; doctorObj = doctorMaster();
var myHeight = docWidth*aspect; takumiObj = takumiMaster();
var conHeight = myHeight > window.innerHeight ? window.innerHeight : myHeight; levelSelectMenu = levelSelectMenu(eventTypeList);
container.style.height = (conHeight-0) + "px"; quizMaster = quizMaster(eventTypeList);
}
//---- contents start
/*
if (myOS == "pc"){
topAnime.dispFunc();//---PCの場合はすぐに再生ｎ
}else{
window.setTimeout(function(){topAnime.dispFunc()}, 2500);//----Androidは起動後に少し待ってからアニメ再生
}
*/
//---- resize
window.addEventListener("resize", resizeFunc);
resizeFunc();
}
function resizeFunc() {
//----- set container size
var docWidth = window.innerWidth;
container.style.width = docWidth + "px";
var myHeight = docWidth * aspect;
var conHeight = myHeight > window.innerHeight ? window.innerHeight : myHeight;
container.style.height = (conHeight - 0) + "px";
}
takumi-style/js/takumi.js
// takumi // takumi
function takumiMaster(){ function takumiMaster() {
//---init //---init
var myObj = new Object(); var myObj = new Object();
var takumi = document.getElementById("takumi"); var takumi = document.getElementById("takumi");
var fuki = document.getElementById("takumi_fuki"); var fuki = document.getElementById("takumi_fuki");
var fuki_text = fuki.getElementsByClassName("fuki_text")[0]; var fuki_text = fuki.getElementsByClassName("fuki_text")[0];
//---------------------------------------------------------------------たくみ君を消します。 //---------------------------------------------------------------------たくみ君を消します。
myObj.hideFunc = function(){ myObj.hideFunc = function () {
fuki.classList.add("vanish"); fuki.classList.add("vanish");
anime({targets: "#takumi",right:"-13vw",easing:"easeOutQuad" , duration: 300, complete:function(){ anime({
takumi.classList.add("vanish"); targets: "#takumi",
}});//------ anime right: "-13vw",
} easing: "easeOutQuad",
myObj.directHide = function(){//-------------演出無しで消します duration: 300,
fuki.classList.add("vanish"); complete: function () {
takumi.classList.add("vanish"); takumi.classList.add("vanish");
} }
}); //------ anime
//---------------------------------------------------------------------たくみ君を表示します。 }
myObj.dispFunc = function(){ myObj.directHide = function () { //-------------演出無しで消します
takumi.classList.remove("vanish"); fuki.classList.add("vanish");
anime({targets: "#takumi",right:["-13vw","0"], duration: 1000});//------ anime takumi.classList.add("vanish");
} }
//---------------------------------------------------------------------たくみ君を表示します。
//---------------------------------------------------------------------吹き出しを消します。 myObj.dispFunc = function () {
myObj.hideFuki = function (){ takumi.classList.remove("vanish");
fuki.classList.add("vanish"); anime({
} targets: "#takumi",
right: ["-13vw", "0"],
//---------------------------------------------------------------------吹き出しを表示します。 duration: 1000
myObj.dispFuki = function (str){ }); //------ anime
if (str != undefined){ }
this.setFukiText(str);
}
fuki.classList.remove("vanish"); //---------------------------------------------------------------------吹き出しを消します。
anime({targets: "#takumi_fuki",scale:[0,1], duration: 1000});//------ anime myObj.hideFuki = function () {
} fuki.classList.add("vanish");
}
//---------------------------------------------------------------------吹き出しの内容を変更します。
myObj.setFukiText = function(str){ //---------------------------------------------------------------------吹き出しを表示します。
//パスは"images/...."から記述してください。 myObj.dispFuki = function (str) {
fuki_text.src = str; if (str != undefined) {
} this.setFukiText(str);
}
return myObj; fuki.classList.remove("vanish");
anime({
} targets: "#takumi_fuki",
\ No newline at end of file scale: [0, 1],
duration: 1000
}); //------ anime
}
//---------------------------------------------------------------------吹き出しの内容を変更します。
myObj.setFukiText = function (str) {
//パスは"images/...."から記述してください。
fuki_text.src = str;
}
return myObj;
}
takumi-style/viewport.html
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>viewport test</title> <title>viewport test</title>
<meta name="viewport" content="width=1500"> <meta name="viewport" content="width=1500">
<style> <style>
html,body{ html,
margin: 0; body {
padding: 0; margin: 0;
background-color: brown; padding: 0;
} background-color: brown;
body{ }
}
#container{ body {}
width: 80vw;
height: 80vw; #container {
background-color: antiquewhite; width: 80vw;
display: flex; height: 80vw;
align-items: center; background-color: antiquewhite;
justify-content: center; display: flex;
font-size: 3vw; align-items: center;
} justify-content: center;
</style> font-size: 3vw;
<script defer> }
document.addEventListener("DOMContentLoaded",main);
function main(){ </style>
console.log("body.clientWidth = " + document.body.clientWidth); <script defer>
console.log("body.clientWidth *0.8= " + Number(document.body.clientWidth)*0.8); document.addEventListener("DOMContentLoaded", main);
console.log(document.getElementById("container").clientWidth);
function main() {
} console.log("body.clientWidth = " + document.body.clientWidth);
</script> console.log("body.clientWidth *0.8= " + Number(document.body.clientWidth) * 0.8);
console.log(document.getElementById("container").clientWidth);
}
</script>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
container width = 80vw<br> container width = 80vw<br>
container height = 80vw<br> container height = 80vw<br>
font size = 3vw font size = 3vw
</div> </div>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment