60歳お婆ちゃんはホームページのお勉強してます

ホームページ作成の為にいろいろ勉強しています。
そんな最中、今まで見たこともない大きなクモに出くわしました。

脚も入れるとCD1枚弱くらいの大きさ。恐怖で身が氷るような感覚に。
蜘蛛は大の苦手ですが、この衝撃的なビジュアルを残したくて怯えながらデジカメを撮る事に。
世間から「不快害虫」として認定されてるので、準備なく見せられると不快に思われるかもしれません。
そこで、見る見ないの選択ができるようスライドの機能をつけてみました。

アシダカ軍曹

※矢印の円形部分をクリックすると画像が現れます。

やっぱり隠す

この大蜘蛛の正体はアシダカ蜘蛛。
アシダカ軍曹と呼ばれているそうです。

なんと軍曹の好物はゴキブリ。
夜な夜なゴキブリを捕まえて、多い時は一晩に20匹捉えることも。
ゴキブリだけでなく、ハエやネズミといった害獣も食べてくれる。
糸を貼ることはなく徘徊性で、毒は持っていないし人を襲うこともない。もちろん人の食べ物にも手を出さない。

しかも見かけによらず、動きはゴキブリより早いらしい。
ゴキブリが普通車だったら、軍曹はF1並みのスピードだという。

どうもここのところゴキブリが少ないなと思っていた。
軍曹のおかげだったのかな…?エコで無料のゴキブリ駆除剤。

だから、地方によっては「家の守り神」と呼ばれているそう。
そしてゴキブリを食べ尽くすと、その家からは去ってくれるらしい。

調べてみると何とも有難い存在だけど、やはり見かけが…

そんな軍曹はネットで購入もできるそうで。
1,500円前後でヤフオクに出展されていました。
飼う人、いるんですね…。

数日後、軍曹の子供らしき2,3cmの同じ型の蜘蛛も発見。
1人前の軍曹になる前だから伍長かな。
どうやら我が家には軍曹の家族が暮らしているようで。
同居するのは構いませんが、どうか遭遇することなく平和な毎日が過ごせるよう願ってる次第です。

スライドのコードについて

ハテナブログの記事入力欄はHTML入力できるので、javascriptも試してみました。
jQueryは効かなかったので、DOMで組み込んでいます。

四角のピースに当たるliはjsから書き出すと、変更しやすくなります。

<script>
const photo = document.querySelector('#wrapper2');
const start = document.querySelector('#start');
const close = document.querySelector('#close p');
let box = document.querySelector('#wrapper2 ul');   

//li書出し
for(let i=0; i < 8; i++){
    let box = document.createElement('ul');
    photo.appendChild(box);       
    box.classList.add('box');
    for(let i=0; i < 10; i++){
        let boxItem = document.createElement('li');
        box.appendChild(boxItem);
        boxItem.classList.add('item');
    }
}
//li要素配列で取得
let item = document.getElementsByClassName('item');
const max = item.length;
const speed = 50;
//順番にliを消していく
start.addEventListener('click',function(){
    start.style.display = 'none';
    for(let i=0; i < max; i++){
        setTimeout(function(){
        item[i].style.opacity = '0';
        }, speed*i);
    }

    setTimeout(function(){
        close.style.display = 'block';
    }, speed*(max-10));

});
//逆再生
close.addEventListener('click',function(){
    close.style.display = 'none';
    let la = 0;
    for(let i=max-1; i >= 0; i--){
        setTimeout(function(){
            item[i].style.opacity = '1';  
        }, speed*la);
        la++;
    }
    setTimeout(function(){
        start.style.display = 'block';
    }, speed*max);
});
</script>

createElementでタグを生成し、classList.addでclassを付与します。 getElementsByClassNameで全部のピース要素を配列形式で取得して、出力はsetTimeoutでタイミングをずらしながら、for文で処理を繰り返し。