0

マウス座標を取得し、その値を使用して小さな半径を描画し、CSS の左と上の位置に挿入する関数を作成しようとしています。作成した div を html に追加する必要がある部分に行き詰まっています。私が十分に明確でない場合は、ご容赦ください。

              <script type="text/javascript">
           function getcoord(event) {
           var x=event.clientX  ;
           var y=event.clientY  ;
           follow(x,y);
           function follow(xcor,ycor) {
           folowHTML =
'<div style="'background-color:red;width:30px;height:30px;'
   +'border-radius:30px;position:absolute;left:''+xcor;'top:'+ycor';">' 
   +'</div>';
        
          };}
                 </script>
                 <body onmouseover="getcoord(event);">

                  </body>
4

2 に答える 2

0

たぶん、次の行を追加してみてください：

document.body.innerHtml = folowHTML + document.body.innerHtml;

また、おそらく位置absoluteを変更する必要があるfixedと思います。

編集：これは悪い方法でした

ここに答えがあります： バニラJavaScriptを使用した</body>タグの前に要素を挿入する

于 2013-02-10T19:36:51.023 に答える
0

あなたはこのようなことを試すことができます...

<style>
    #follow {
        background-color: #fff;
        border:1px solid red;
        border-radius: 50%;
        height: 20px;
        margin:-10px 0 0 -10px;
        position: absolute;
        width: 20px;
        z-index: 10;
    }
</style>
<script>
    function initFollow(){

        var follow = document.createElement('div');

        follow.setAttribute('id','follow');
        document.getElementsByTagName("body")[0].appendChild(follow);

        window.addEventListener('mousemove', function(e) {
            var left = e.pageX + 'px',
                top  = e.pageY + 'px';
            follow.style.left = left;
            follow.style.top = top;
        }, false);

    }
    window.addEventListener('load',initFollow,false);
</script>
于 2013-02-10T20:36:51.600 に答える