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>
<html>
<head>
<meta charset="UTF-8">
<title>viewport test - iframe parent</title>
<style>
html,body{
background-color:#ffffff;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#container{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
iframe{
border: none;
}
</style>
<meta charset="UTF-8">
<title>viewport test - iframe parent</title>
<style>
html,
body {
background-color: #ffffff;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
iframe {
border: none;
}
</style>
</head>
<body>
<div id="container">
<!--
<div id="container">
<!--
動作確認済みのブラウザ
Mac　-　chrome
PC用にフォントを設定
部分的にプルプルするのを何とかする（問題の選択肢）
-->
<iframe src="index_ie.html" width="990" height="660" scrolling="no">
</div>
</iframe>
<iframe src="index_ie.html" width="990" height="660" scrolling="no">
</div>
</iframe>
</body>
</html>
takumi-style/js/doctor.js
// doctor
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];
function doctorMaster() {
//---------------------------------------------------------------------博士を消します。
myObj.hideFunc = function(){
fuki.classList.add("vanish");
anime({targets: "#doctor",left:"-20vw",easing:"easeOutQuad" , duration: 300, complete:function(){
doctor.classList.add("vanish");
}});//------ 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
}
//---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];
//---------------------------------------------------------------------フキダシの大きさを変更します
myObj.setLargeFuki = function(){
fuki.classList.remove("small");
}
myObj.setSmallFuki = function(){
fuki.classList.add("small");
}
return myObj;
}
\ No newline at end of file
//---------------------------------------------------------------------博士を消します。
myObj.hideFunc = function () {
fuki.classList.add("vanish");
anime({
targets: "#doctor",
left: "-20vw",
easing: "easeOutQuad",
duration: 300,
complete: function () {
doctor.classList.add("vanish");
}
}); //------ 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 selectLevel = 0;
var aspect = 2/3;//---ターゲットの縦横比
var aspect = 2 / 3; //---ターゲットの縦横比
var jsonData;
......@@ -15,71 +15,67 @@ var quizMaster;
//-----環境判定
var ua = navigator.userAgent;
var myOS = 'pc';
var androidConnect = false;//------PCの場合はfalse
if (ua.indexOf("Android") > 0){
androidConnect = true;//------androidの場合ははtruに
myOS='android';
}else if (ua.indexOf("iPad") > 0 || ua.indexOf("iPhone") > 0 ) {
myOS='ios';
var androidConnect = false; //------PCの場合はfalse
if (ua.indexOf("Android") > 0) {
androidConnect = true; //------androidの場合ははtruに
myOS = 'android';
} else if (ua.indexOf("iPad") > 0 || ua.indexOf("iPhone") > 0) {
myOS = 'ios';
}
var eventTypeList;
if (myOS == 'pc'){
eventTypeList = ['click','mouseover', 'mouseout','mousedown', 'mouseup', 'mousemove'];
}else{
eventTypeList = ['touchend','touchstart','touchend','touchstart','touchend','touchmove'];
if (myOS == 'pc') {
eventTypeList = ['click', 'mouseover', 'mouseout', 'mousedown', 'mouseup', 'mousemove'];
} else {
eventTypeList = ['touchend', 'touchstart', 'touchend', 'touchstart', 'touchend', 'touchmove'];
}
//---ダブルタップの拡大防止
var lastTouch = 0;
window.addEventListener('touchend', function(event) {
const now = window.performance.now();
if (now - lastTouch <= 500) {
event.preventDefault();
}
lastTouch = now;
window.addEventListener('touchend', function (event) {
const now = window.performance.now();
if (now - lastTouch <= 500) {
event.preventDefault();
}
lastTouch = now;
}, true);
//---------------------------------------------------------------------------------------------------main routine
document.addEventListener("DOMContentLoaded",main);
function main(){
document.addEventListener("DOMContentLoaded", 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 main() {
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";
}
//---- 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 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
function takumiMaster(){
//---init
var myObj = new Object();
var takumi = document.getElementById("takumi");
var fuki = document.getElementById("takumi_fuki");
var fuki_text = fuki.getElementsByClassName("fuki_text")[0];
//---------------------------------------------------------------------たくみ君を消します。
myObj.hideFunc = function(){
fuki.classList.add("vanish");
anime({targets: "#takumi",right:"-13vw",easing:"easeOutQuad" , duration: 300, complete:function(){
takumi.classList.add("vanish");
}});//------ anime
}
myObj.directHide = function(){//-------------演出無しで消します
fuki.classList.add("vanish");
takumi.classList.add("vanish");
}
//---------------------------------------------------------------------たくみ君を表示します。
myObj.dispFunc = function(){
takumi.classList.remove("vanish");
anime({targets: "#takumi",right:["-13vw","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");
anime({targets: "#takumi_fuki",scale:[0,1], duration: 1000});//------ anime
}
//---------------------------------------------------------------------吹き出しの内容を変更します。
myObj.setFukiText = function(str){
//パスは"images/...."から記述してください。
fuki_text.src = str;
}
return myObj;
}
\ No newline at end of file
function takumiMaster() {
//---init
var myObj = new Object();
var takumi = document.getElementById("takumi");
var fuki = document.getElementById("takumi_fuki");
var fuki_text = fuki.getElementsByClassName("fuki_text")[0];
//---------------------------------------------------------------------たくみ君を消します。
myObj.hideFunc = function () {
fuki.classList.add("vanish");
anime({
targets: "#takumi",
right: "-13vw",
easing: "easeOutQuad",
duration: 300,
complete: function () {
takumi.classList.add("vanish");
}
}); //------ anime
}
myObj.directHide = function () { //-------------演出無しで消します
fuki.classList.add("vanish");
takumi.classList.add("vanish");
}
//---------------------------------------------------------------------たくみ君を表示します。
myObj.dispFunc = function () {
takumi.classList.remove("vanish");
anime({
targets: "#takumi",
right: ["-13vw", "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");
anime({
targets: "#takumi_fuki",
scale: [0, 1],
duration: 1000
}); //------ anime
}
//---------------------------------------------------------------------吹き出しの内容を変更します。
myObj.setFukiText = function (str) {
//パスは"images/...."から記述してください。
fuki_text.src = str;
}
return myObj;
}
takumi-style/viewport.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>viewport test</title>
<meta name="viewport" content="width=1500">
<style>
html,body{
margin: 0;
padding: 0;
background-color: brown;
}
body{
}
#container{
width: 80vw;
height: 80vw;
background-color: antiquewhite;
display: flex;
align-items: center;
justify-content: center;
font-size: 3vw;
}
</style>
<script defer>
document.addEventListener("DOMContentLoaded",main);
function main(){
console.log("body.clientWidth = " + document.body.clientWidth);
console.log("body.clientWidth *0.8= " + Number(document.body.clientWidth)*0.8);
console.log(document.getElementById("container").clientWidth);
}
</script>
<meta charset="UTF-8">
<title>viewport test</title>
<meta name="viewport" content="width=1500">
<style>
html,
body {
margin: 0;
padding: 0;
background-color: brown;
}
body {}
#container {
width: 80vw;
height: 80vw;
background-color: antiquewhite;
display: flex;
align-items: center;
justify-content: center;
font-size: 3vw;
}
</style>
<script defer>
document.addEventListener("DOMContentLoaded", main);
function main() {
console.log("body.clientWidth = " + document.body.clientWidth);
console.log("body.clientWidth *0.8= " + Number(document.body.clientWidth) * 0.8);
console.log(document.getElementById("container").clientWidth);
}
</script>
</head>
<body>
<div id="container">
container width = 80vw<br>
container height = 80vw<br>
font size = 3vw
</div>
<div id="container">
container width = 80vw<br>
container height = 80vw<br>
font size = 3vw
</div>
</body>
</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