0

マウスの後にオブジェクトをフォローする機能があり、オブジェクトを非表示にすることなく、自由にフォローを停止および開始できるようにしたいと考えています。

ほぼ思った通りに動作し、実際にマウスを追いかけていますが、実際にマウスを動かさないと初期位置に動かせません。

EG関数をトリガーすると、マウスを動かすまでオブジェクトは別の場所にありますが、私がやろうとしているのは、mousemoveイベントをアタッチする前に、最初に初期位置に移動することです。

関数をトリガーする方法は次のとおりです。

showtrail();

function showtrail(shit){
//this is how I tried to set the initial position first, but this get me an error:..
//followmouse(); 
document.onmousemove=followmouse; //and this is how I attach the event.
}

これはオブジェクトを動かす実際の関数の一部ですが、最初の動きを初期化/模倣しようとすると座標を取得できません。

    function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){  //This- if triggered by mousemove, and it works
xcoord+=e.pageX
ycoord+=e.pageY
}
else {   //this was meant for the initial call, but... for some reason
xcoord+=document.body.scrollLeft+event.clientX // it triggers an error,
ycoord+=document.body.scrollTop+event.clientY // saying event.clientX undefined.
}
}

したがって、event.clientXは機能していないようで、実際のマウス位置を取得する方法がわかりません。

案内してください。

4

3 に答える 3

0

event.clientXとevent.clientYが間違っています。それらはe.clientXとe.clientYである必要があります

followmouse（e）でxcoordとycoordを取得するためのよりエレガントなクロスブラウザーの方法は次のとおりです。

xcoord = e.pageX||(e.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft));
ycoord = e.pageY||(e.clientY+(document.body.scrollTop||document.documentElement.scrollTop));

正しければ、次のオブジェクトは最初の絶対位置を持ち、ブロックとして表示されると予想されます。つまり、最初のxとy（左と上）があります。したがって、グローバルbool varを使用して、現在フォローしているかどうかを確認します。

<style>
...
#trail {position:absolute;left:0;top:0;display:none}
...
</style>

<script>
var following = false;
...
function followmouse(e){
   if (!following){
       document.getElementById('trail').style.display='none';
       return;
   }
   ...
   document.getElementById('trail').style.display='block';
}
</script>

表示を変更することにより、＃trailを初期位置に移動してからマウスを追跡するオプションと、移動を回避して最新の追跡位置からマウスを追跡するオプションがあります。

于 2012-06-14T07:38:47.267 に答える
0

編集1：

この目的のために、requestAnimationFrame従来のDOMイベントではなく、APIを使用することをお勧めします。APIは、アニメーションを作成して一時停止するのにより効率的であると述べました。

これも見てください：スマートアニメーションのためのrequestAnimationFrame

これは悲しいことですが、Webページ上でマウスを移動する前にマウスの初期位置を取得することはできません。mousemoveつまり、イベントの前にオブジェクトを調整することはできません。これは私が同様のプロジェクトで行うことです：

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <script type="text/javascript">
            var targetID = 'mydiv'; // div that is to follow the mouse
            var pauseFollowing = false;
            // (must be position:absolute)
            var offX = 15;          // X offset from mouse position
            var offY = 15;          // Y offset from mouse position

            function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
            function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

            function follow(evt) {
                if(pauseFollowing) {
                    //or do something else at pause
                    return false;
                }
                var obj = document.getElementById(targetID).style;
                obj.visibility = 'visible';
                obj.left = (parseInt(mouseX(evt))+offX) + 'px';
                obj.top = (parseInt(mouseY(evt))+offY) + 'px';
            }

            function toggleFollow() {
                pauseFollowing = !pauseFollowing;
            }

            window.onload = function() {
                window.onclick = toggleFollow;
                document.onmousemove = follow;
            }
        </script>
    </head>
    <body>
        <div id="mydiv" style="visibility: hidden; top:0; left:0 ;width: 100px; height: 100px; background: #ff0; position: absolute;"></div>
    </body>
</html>
于 2012-06-14T07:56:02.483 に答える
0

さて、それは私がそれをした方法です。最良のアイデアは、常にグローバル変数の位置を設定するための動きをキャプチャすることでした。これで、特定の場所に固定して表示するか（座標をshowtrailに渡す場合）、実際にマウスを追跡するかを選択できます。イベントリスナーも追加したので、フォロー中にマウスがウィンドウの外に出ると非表示になります。これまでのところ、私が望んでいたとおりに機能します。

var trailimage=["scripts/loading_mouse.gif", 24, 24] //image path, plus width and height
var offsetfrommouse=[2,10] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var global_coord=[0,0]
var follow=false;

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="z-index: 10;position:absolute;display:none;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function hidett(){  gettrailobj().display="none";   }
function showtt(){  gettrailobj().display="block";  }

function truebody(){    return (document.body||document.documentElement);   }

function showtrail(shit){
    if (typeof shit == "undefined"){    //Follow Mouse
        follow=true;
        setmousepos(global_coord[0],global_coord[1]);
    }
    else {              //Set fixed in specific place
        follow=false;
        showtt()
        gettrailobj().left=shit.left+6+"px"
        gettrailobj().top=shit.top-5+"px"
    }
}

function hidetrail(){
    hidett()
    follow=false;
}

function setcoord(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
var xxcoord = e.pageX||(e.clientX+truebody().scrollLeft);
var yycoord = e.pageY||(e.clientY+truebody().scrollTop);
if (typeof xxcoord != "undefined"&&typeof yycoord != "undefined"){
    xcoord+=xxcoord;
    ycoord+=yycoord;
    global_coord=[xcoord,ycoord];
    if (follow) setmousepos(xcoord,ycoord);
}}

function setmousepos(xcoord,ycoord){
    var docwidth=truebody().scrollLeft+truebody().clientWidth   
    var docheight=Math.max(truebody().scrollHeight, truebody().clientHeight)
    if ((xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight ||!follow)){
        hidett()
    }
    else{
        showtt();
        gettrailobj().left=xcoord+"px"
        gettrailobj().top=ycoord+"px"
    }
}

window.addEventListener("mouseout",
    function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
        if ((mouseY >= 0 && mouseY <= window.innerHeight)
        && (mouseX >= 0 && mouseX <= window.innerWidth)){
            return false;
        }else{
            if (follow) hidett()
        }
    },
    false);

document.onmousemove=setcoord;
于 2012-06-14T19:04:40.793 に答える