その他　面白６-１■マウスドラッグで文章が出る

安倍自民と
電通支配のテレビは
日本を滅ぼす!
共謀罪反対!!

●2017/06/15：即時関数で囲んで、グローバル変数を消しました。
ブロック（タイル）をマウスドラッグすると、次々にブロック（タイル）が消えていくJavaScriptです。
OpenSpace と気まぐれ雑記帳の二つの原本を合体しました。

消えるブロック（タイル）を画像にすることも可能です。ブロックの色を指定する部分で背景画像を指定します。
var bc="url(画像名)";　//★ブロックの背景画像
自動でランダムにブロック消しで画像を指定しているので、参考にして下さい。

■消えるのではなく落ちるJavaScriptはこちら → 面白６■マウスオンでブロック落とし
■自動でランダムに消えるJavaScriptはこちら → 面白７-２■自動でランダムにブロック消し・色

<!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"><!--
body{background:#acf;}/*★背景色　水色*/

.title{
margin-top:-20px;
color: #00f;
font-size: 80px;
font-weight: bold;
text-shadow: 10px 10px 5px #999;
text-align:center;
line-height:100px;
}
--></style>

</head>
<body>

<!--■記述参考例：JavaScriptの上に記述すれば、全部ブロックの下の表示になります。JavaScriptよりも下に記述した文章や画像の位置指定に、position:absolute;指定があると、ブロックの上に表示されてしまうので注意して下さい。-->

<p style="margin-left:2em; color:#000;">ブロックの色や大きさ（数）の指定ができます。</p><!--■文章の記述参考例-->

<p class="title">安倍自民と<br>電通支配のテレビは<br>日本を滅ぼす!<br>
<span style="color:red;">共謀罪反対!!</span></p><!--■文章の記述参考例-->

<!--★ここからコピー。位置はbodyの中ですが、ブロックを一番上に表示するためにbodyの一番下に記述して下さい。-->
<script type="text/javascript"><!--
/*===========================================================================
マウスドラッグで文章が出る By OpenSpace：http://www.openspc2.org/HTML_JS_CSS/image/020/
落とすから消すへ変更：http://www.notus.dti.ne.jp/~hikousen/java115.htm　★即時関数へ　2017/06/15
==============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var bc="#f00";　　//★ブロックの色。赤色。背景画像を指定する時は　var bc="url(画像名)";で
var wb=30;　　　　//★ブロックの横幅。単位px
var hb=30;　　　　//★ブロックの縦幅。単位px
var sp=0;         //★ブロック同士の隙間。単位px
//★↓CSSでブロックの内側にボカシの影指定。不要ならvar Bcss="";で。
var Bcss=""; 

//指定ここまで--------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var ww=window.innerWidth, hh=window.innerHeight;
function setTile(){
var w=Math.floor(ww/wb), h=Math.floor(hh/hb);
var wTag="";
var n=1;
for (var j=0; j<=h; j++){
for (var i=0; i<=w; i++){
wTag += "<div id='block"+n+"' style='position:absolute; width:"+(wb-sp)+"px; top:"+j*hb+"px; left:"+i*wb+"px;height:"+(hb-sp)+"px; background:"+bc+";"+Bcss+"'></div>";/*■即時関数にするためonMouseover='this.style.visibility=\"hidden\"'を削除*/
n++;
}}
$("tile").innerHTML=wTag;
$("tile").style.visibility="visible";
//■下記２行追加
var suu=(w+1)*(h+1);
for (n=1; n<=suu; n++) {$("block"+n).onmouseover=function (){this.style.visibility='hidden';}}
}
document.write("<div id='tile' style='position:fixed;top:0;left:0;'></div>");//■原本のhtml記述をこちらへ変更。absoluteをfixedへ変更
setTile();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

その他 面白６-１■マウスドラッグで文章が出る UP日時 : 2017/06/15

　その他　面白６-１■マウスドラッグで文章が出る　　　　UP日時 : 2017/06/15