文字１３■実用■文字拡大ズーム

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字１３■実用■文字拡大ズーム</title>

<style type="text/css"><!--
.cat{border-radius: 50%;margin-top:30px;}/*★猫画像の角丸指定と位置指定。不要なら削除。猫画像自体がJavaScriptとは無関係です*/
--></style>

</head>
<body>

<input type="button" value="もう一度" onClick="location.reload()" style="margin-left:50px;"><!--←★この「もう一度」ボタンの1行は不要なら削除-->
<div style="text-align:center;"><img src="../hoka/gat21.jpg" class="cat"></div><!--★中央位置指定の猫画像。画像不要ならこの行は削除-->

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*=====================================================
文字拡大ズーム  by JAVAスクリプト～サンプル置き場 http://www3.ocn.ne.jp/~motiya/（サイト消滅）
★原本をHTML5対応に改造と旧ブラウザ対応分削除　2018/09/16
●●CSSで文字装飾指定すると、他のブラウザは動作するがIE11は動作がおかしくなる●●
=======================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

/*★文章指定。増減可能*/
var message=["民主主義を","破壊し","戦争を煽る","補助金詐欺の","安倍総理から","日本を","守るにゃあ！","おまえが国難！"];

/*★文章の色指定。増減可能。上記の文章の数より少なくても可*/
var colors=["#0f0","#00f","#ff0","#f00"];

/*★拡大文字の背景色に透過色の黒色30%指定。背景色を指定しない時は var bgc="rgba(0,0,0,0)"と記述*/
var bgc="rgba(0,0,0,0.3)";

var msg_size=30;/*★原本30。文字の拡大割合。小さいほど速く大きいほど遅い*/
var spd=50;/*★原本40。速度。数値が小さいほど速い*/

//指定ここまで----------------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var timer=null;
var mi=0, ci=0;
var mlen=message.length, clen=colors.length;
//■下記の原本6を修正。文字使用時、ブラウザChromeとOperaでは10px未満のフォントは全部10pxで表示されるため
var curr_step =10;
var step = 4;
var h=window.innerHeight, w=window.innerWidth, ypos=h/2, xpos=w/2;
var rndM=message[mi%mlen];
var rndC=colors[ci%clen];
var sss="";
sss +="<div id='T' style='position:fixed; text-align:center; font-family:Arial; font-size:0; colors:"+rndC+"; background:"+bgc+";'>"+rndM+"</div>";
document.write(sss);

function disp_msg() {
$("T").innerHTML = message[mi];
var ob=$("T").style;
ob.width = curr_step+"px";
ob.top=ypos/2-curr_step / 20+"px";//■原本16 
ob.left=(xpos)-curr_step/2+"px";
ob.fontSize=curr_step / 10+"px";//■原本8
ob.color=colors[ci];
step +=10;
curr_step += step;
if (curr_step >xpos * msg_size) {  /*■原本wをxposへ変更*/
curr_step=10;//■原本6
step=4; ++mi; ++ci;
}
if (ci >= clen) ci= 0;
timer=setTimeout(disp_msg,spd);
if (mi>=mlen) {clearTimeout(timer);ob.display="none";}
}
setTimeout(disp_msg,2000);//■ページ開いて2秒後に開始に修正
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>
文字１３■実用■文字拡大ズーム 最終修正日 : 2018/09/16

　文字１３■実用■文字拡大ズーム　　　　最終修正日 : 2018/09/16
