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

你可以试试这样的...

<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 回答
0

也许尝试添加这一行：

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

另外，您可能应该将位置更改absolute为fixed我认为的位置。

编辑：这是不好的方式

在这里你有答案： 在 </body> 标记之前插入元素与 vanilla JavaScript

于 2013-02-10T19:36:51.023 回答