如何判断鼠标的移动方向！！！

兄弟姐妹们
很急啊 帮帮忙
在html里面 用js也好 jquery也好
怎么判断鼠标是向上移动 还是向下移动呢!!!!!!!!!!!!!

解决方案 »

  1.   

    onmousemove = ...
    检测鼠标所在x、y坐标，再计算比较下
      

  2.   

    Control.MousePosition.Y 的变化？
      

  3.   

    在body上加onmosusmove
    然后用
    event.clientX
    event.screenX
    event.offsetXevent.clienty
    event.screeny
    event.offsety
      

  4.   

    不知道这样行不
    上：event.y<document.boyd.clientHeight/2
    下：event.y>document.boyd.clientHeight/2
    左边： event.x<document.boyd.clientWitdh/2
    右边： event.y<document.boyd.clientWitdh/2
      

  5.   

    主要是怎样判断 以为我想做的是
    判断出 如果向上移多少px 那么一个指定的层它也跟着向上移多少px
      

  6.   

    js判断鼠标移动方向JavaScript 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>判断鼠标移动</title>
    </head>
    <script language="javascript">
    var sx=event.x                          //声明两个变量存放鼠标X,Y坐标
    var sy=event.y
    function aa(){
     if(sx==event.x){
      zc.innerHTML="鼠标X轴没有移动 "                  //对鼠标X轴进行判断
     }else if(sx>event.x){
      zc.innerHTML="鼠标X轴左移 "
     }else if(sx<event.x){
      zc.innerHTML="鼠标X轴右移 "
     }
     
     if(sy==event.y){
      zz.innerHTML="鼠标Y轴没有移动 "
     }else if(sy>event.y){
      zz.innerHTML="鼠标Y轴上移 "                     //对鼠标Y轴进行判断
     }else if(sy<event.y){
      zz.innerHTML="鼠标Y轴下移 "
     }
     sx=event.x
     sy=event.y                                         //重新赋值
    }
    </script>
    <body onMouseMove="aa()">                <!--鼠标移动时调用函数-->
    <span id="zc"> </span> 
    <span id="zz"></span>
    <br/>
    <br/>
    <br/>
    <br/>
    鼠标放在页面上移动
    </body>
    </html>
      

  7.   


    我们常在一些网站中看到，鼠标在网页上移到时，有一行文字、一张小图片或一个小动画总是跟着鼠标，除非把鼠标移出页面，否则，它就总是紧跟鼠标不放。你知道这种效果是怎么做出来的吗？你可能感到比较复杂。其实它是用Javascript编一段小程序来实现的，且程序也不长，也比较好理解。下面让我们来揭下它的面纱看看。
    　　程序思路：图层可以用绝对坐标来确定其在页面中的位置，那么我们把图片、动画或文字放到图层上，再想办法动态获取鼠标的当前位置，再把图层移到鼠标的当前位置，那图层上的内容（图片、动画或文字）不也就移到当前鼠标的位置了吗？这样就达到了图片、动画或文字随鼠移动的目的了。　　一、一个简单的图片、动画或文字随鼠标移动的例子
    　　制作方法：
    　　1、在 Dreamweaver3中，插入一个图层，在图层上写上要跟随鼠标移到的文字或图片。
    　　2、在图层的属性面板上把“Layer ID”（图层的ID号）改为“div1”，以便程序操作；“T”值改为“-50”，使其初始位置在页面外；“Z-index”（层序号）值改为“50”，使其在最上层，不被其它层遮盖。完成后的图层代码如下，不是使用 Dreamweaver的网友可把代码复制到<body>标记的后面：
    <div id=“div1“ style=“position:absolute; left:250px; top:118px; width:60px; height:37px; z-index:“50“><img src=“image/0050.gif“ width=“32“ height=“32“>图、文跟鼠标试验</div> ，这里的图片和文字可换成你所需要的。
    　　3、在<head>与</head>之间加上这样一段程序：
    <SCRIPT language=“javascript“>
    <!--
    var x,y; //声明存放当前鼠标位置坐标的变量
    var can=0 //声明能否移动的控制变量
    function canmove() { //控制能否移动的函数
    x=document.body.scrollLeft+event.clientX; //获取当前鼠标位置的X坐标
    y=document.body.scrollTop+event.clientY; //获取当前鼠标位置的Y坐标
    can=1;} //设置为可以移动
    function move() { //移动图层的函数
    if (can) {
    div1.style.posLeft=x+20; //设置图层位置的X坐标
    div1.style.posTop=y;} // 设置图层位置的Y坐标
    setTimeout(“move()“,30)} //每30毫秒刷新一次图层位置坐标
    -->
    </SCRIPT>
    　　只要这几行代码就能使图片或文字跟着鼠标跑，有点出乎意料吧！事实就是这么简单。当然，这是最简单的一种，你可能看到的有些网页上的效果在移动的过程比这要复杂一些，但都是在这个基础上增加一些移动的变化过程而已。
    　　4、当然要使真正的效果出现，还得在<body>标记中加上触发事件调用程序，使程序动作起来。在<body>标记中加上代码：onload=“move()“ onmousemove=“canmove()“，前一个函数的作用是在网页加载时就调用“move()”程序，使其开始刷新图层的位置坐标；后一个事件的作用是，一旦在页面上移动鼠标，就重新计算它的位置坐标。　　二、稍复杂一点的效果
    　　在上例的基础上稍作一些改动，可获得更好的效果，如使“欢迎光临！”这几个字不仅是分开移动，在移到新位置后，还不停地左右移动，似乎在列队欢迎。要实现移动过程的变化，就要把每个文字分开，一个图层放一个字（或一张图片），然后分开移动到新的位置。所以为了方便，用数组来存放图层的位置坐标。另外，由于图层较多，插入图层比较麻烦，也会使代码大增加，因此采用了动态编写图层代码的办法。制作方法如下：
    　　1、在<head>与</head>之间插入下面这段程序：
    <SCRIPT language=“javascript“>
    <!--
    var x,y
    var step=20
    var can=0
    var information=“欢迎光临！“; //在这里写入跟随鼠标移动的文字
    information=information.split(““); //把字符串拆分成单个的文字
    Il=information.length; //获取字符的个数，存放在Il变量中
    k=0;
    var xpos=new Array() //声明一个数组，存放各图层的X位置坐标
    for (i=0;i<=Il-1;i++){ //给数组赋初值
    xpos[i]=-50}
    var ypos=new Array() //声明一个数组，存放各图层的Y位置坐标
    for (i=0;i<=Il-1;i++){ //给数组赋初值
    ypos[i]=-50}
    function canmove() {
    x=document.body.scrollLeft+event.clientX;
    y=document.body.scrollTop+event.clientY;
    can=1; k=0;step=20}
    function move() {
    if (can) {
    k++;
    if (k<20) {step++;}else
    if (k<40) {step--;}else {k=0;} //计算图层左右移动的偏移量
    for (i=Il-1;i>=1;i--){ //计算各图层在新位置的X、Y坐标
    xpos[i]=xpos[i-1]+step;
    ypos[i]=ypos[i-1]}
    xpos[0]=x+step;
    ypos[0]=y
    for (i=0;i<Il-1;i++){ //改变各图层位置的X、Y坐标，使其移到新的位置
    var thisdiv=eval(“div“+(i)+“.style“);
    thisdiv.posLeft=xpos[i];
    thisdiv.posTop=ypos[i]}}
    setTimeout(“move()“,30)} //每30秒刷新一次
    -->
    </SCRIPT> 
    　　2、在<body>标记的后面加上这段程序：
    <script language=“Javascript“>
    <!--
    for (i=0;i<=Il-1;i++){
    document.write(“<div id=‘div“+i+“‘ style=‘position:absolute;top:-50px; font-size: 9pt;font-weight: 800; color: #0000FF‘>“+information[i]+“</div>“);
    }
    -->
    </script>
    　　这段程序的作用是动态自动编写存放移动文字图层的HTML代码，并把相应的文字写在上面。
    　　3、在<body>标记中加上代码：onload=“move()“ onmousemove=“canmove()“。
    　　这样在浏览器中，“欢迎光临！”这几个字就会紧跟鼠标移动，到达新位置后还会左右移动。
    文章来自: 帮助联盟(http://www.help-union.net/) 详文参考：http://www.help-union.net/home/display.asp?id=562
    如果想实现div的效果 将文字换成 层即可 。
    呵呵 希望对你有用
      

  8.   

    其实我想做的是拖动页面中间的内容
    但是只上下动http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
    和这里的效果是一样的 但是不要滚动条，外加一个拖动效果