2017年11月26日

javascript練習記録4




element.appendChild - 指定要素へ子要素追加










続きを読む


posted by イエティ at 21:02| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

javascript練習記録3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="id1">id1</div>
    <div id="id2">id2</div>
    <div id="id3">id3</div>
</body>
<style>
    div{
        position:absolute;
        width: 150px;height: 150px;
        left:5px;
        border: 2px solid #000;
    }
    #id1{
        background-color: aqua;
        top:0px;
    }
    #id2{
        background-color:brown;
        top:200px;
    }
    #id3{
        background-color:darkorange;
        top:400px;
    }
</style>
<script>
    var elmar=[];
    var rect;
    var ofsx=0;
    var ofsy=0;
    var id=0;
    function touchst(ev){
        ev.preventDefault();
        rect=this.getBoundingClientRect();
        ofsx=rect.left-ev.touches[0].pageX;
        ofsy=rect.top-ev.touches[0].pageY;
    }
    function touchmv(ev){
        ev.preventDefault();
        this.style.left=ev.touches[0].pageX+ofsx+"px";
        this.style.top=ev.touches[0].pageY+ofsy+"px";
    }
    function touched(ev){
        ofsx=0;
        ofsy=0;
    }
    function setListener(elm){
        elm.addEventListener('touchstart',touchst,false);
        elm.addEventListener('touchmove',touchmv,false);
        elm.addEventListener('touchend',touched,false);
    }
for (var i=0;i<3;i++){
    id=i+1;
    elmar[i]=document.getElementById('id'+id);
    setListener(elmar[i]);
}


</script>
</html>
posted by イエティ at 20:37| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

javascript練習記録3


id1

id2

id3




posted by イエティ at 20:34| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

javascript練習記録

id1

id2

id3



posted by イエティ at 09:16| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

javascript練習記録



posted by イエティ at 08:54| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。