zoukankan      html  css  js  c++  java
  • Web中的鼠标自动移动

    其实只是一个模拟,思路是这样的:让鼠标消失,再用一个跟鼠标一样的图片跟随鼠标移动,这样我们就可以控制这个图片的移动了。。。囧~

    怎样让鼠标消失呢,就是做一个高宽1px的透明cur文件,并把其设置为鼠标光标就行了。。。。囧囧~~~

     这里是我们需要的两个素材:

      透明cur:http://www.net320.com/random/images/hidden.cur

      鼠标图片:http://www.net320.com/random/images/arrow.gif

    ok,现在思路和素材都有了,我们就可以编码实现了:

      

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        
    <head>
            
    <style type="text/css">
                body
    {
                    cursor
    :url('http://www.net320.com/random/images/hidden.cur'),auto;
                
    }
            
    </style>
            
    <script type="text/javascript">
                
    function $I(id){
                    
    return typeof(id)=="string"?document.getElementById(id):id;
                };

                
    var isMoving=false;
                window.onload
    =function(){
                    $I(
    "arrow").style.position="absolute";
                    $I(
    "arrow").style.zIndex=1000;
                    
                    document.body.onmousemove
    =function(e){
                        e
    =e||event;
                        
    if(!isMoving){
                            $I(
    "arrow").style.left=e.clientX+document.documentElement.scrollLeft+1+"px";
                            $I(
    "arrow").style.top=e.clientY+document.documentElement.scrollTop+1+"px";
                        }
                    };
                    document.oncontextmenu
    =function(e){
                        e
    =e||event;
                        
    if(isMoving){
                            e.returnValue
    =false;
                        }
                    };
                    $I(
    "btn1").onclick=function(){
                        alert(
    "lalala~~~~");
                    };
                    
                    window.setInterval(
    function(){
                        
    if(!isMoving){
                            move(parseInt($I(
    "arrow").style.left),parseInt($I("arrow").style.top),
                                 parseInt($I(
    "btn1").style.left)+$I("btn1").offsetWidth/2,
                                 parseInt($I("btn1").style.top)+$I("btn1").offsetHeight/2)
                            
                        }
                    },
    5000);
                }
                
                
    function getAngle(startX,startY,endX,endY)
                {
                    
    var angle;
                    
    var tanx;
                    
    if(endX-startX!=0){
                        tanx
    =Math.abs(endY-startY)/Math.abs(endX-startX);
                    }else{
                        
    return 90+(endY-startY>0?180:0);
                    }
                    angle
    =Math.atan(tanx)/2/Math.PI*360;
                
                    
    if(endX-startX<0 && endY-startY<=0){
                        angle
    =180-angle;
                    }
                    
    if(endX-startX<0 && endY-startY>0){
                        angle
    +=180;
                    }
                    
    if(endX-startX>=0 && endY-startY>0){
                        angle
    =360-angle;
                    }
                    
    return angle;
                };
                
                
    function move(startX,startY,endX,endY){
                    
    var currentDistance=0;
                    
    var currentX=startX;
                    
    var currentY=startY;
                    
    var angle=getAngle(startX,startY,endX,endY);
                    
    var speed=5;
                    
    var intervalId=window.setInterval(function(){
                        
    if(Math.abs(parseInt($I("arrow").style.left)-endX)>speed
                        
    || Math.abs(parseInt($I("arrow").style.top)-endY)>speed){
                            
    var newX,newY;
                            
    var xAngle=angle*(2*Math.PI/360);
                            var xDirection=Math.abs(Math.cos(xAngle))/Math.cos(xAngle);
                            var yDirection=Math.abs(Math.sin(xAngle))/Math.sin(xAngle);
                    
                            
    if(Math.abs(Math.tan(xAngle))<=1){
                                
    var deltaX=Math.abs(speed*Math.cos(xAngle))*xDirection;
                                newX
    =currentX+deltaX;
                                newY
    =-(newX-startX)*Math.tan(xAngle)+startY;
                            }
                            
    else{
                                
    var deltaY=Math.abs(speed*Math.sin(xAngle))*yDirection;
                                newY
    =currentY-deltaY;
                                newX
    =-(newY-startY)/Math.tan(xAngle)+startX;
                            }
                            currentX
    =newX;
                            currentY
    =newY;
                            $I(
    "arrow").style.left=currentX+"px";
                            $I(
    "arrow").style.top=currentY+"px";
                            isMoving
    =true;
                        }
                        
    else{
                            window.clearInterval(intervalId);
                            isMoving
    =false;
                            $I(
    "btn1").click();
                            $I(
    "btn1").focus();
                        }
                    },
    10);
                }

            
    </script>
        
    </head>
        
    <body>
            
    <input style="position:absolute;left:100px;top:30px;" type="button" id="btn1" value="I am a Button"/>
            
    <div style="height:900px;"></div>
            
    <img id="arrow" src="http://www.net320.com/random/images/arrow.gif"/>
        
    </body>
    </html>

    效果展示:

      点我看效果

  • 相关阅读:
    视觉SLAM(五)特征点法视觉里程计 后续作业
    在TUMVI数据集上测试VINS-Fusion算法
    视觉SLAM作业(四) 相机模型与非线性优化
    视觉SLAM(三)李群与李代数 后续作业
    -- Could not find the required component 'pcl_ros'. The following CMake error indicates that you either
    ZED stereolabs 配置踩过的坑
    视觉SLAM十四讲实验补充
    视觉SLAM十四讲(第二版)第十二讲笔记
    视觉SLAM十四讲(第二版)第十一讲笔记
    视觉SLAM十四讲(第二版)第十讲笔记
  • 原文地址:https://www.cnblogs.com/Random/p/1418433.html
Copyright © 2011-2022 走看看