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>

 

效果展示：

　　点我看效果

转载于:https://www.cnblogs.com/Random/archive/2009/03/21/1418433.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/423500.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用小程序·云开发打造运动圈小程序丨实战

用小程序·云开发打造运动圈小程序丨实战

乒乓圈小程序 和朋友合伙写了一个小程序&#xff0c;写了一个以共享乒乓信息和交流的平台———乒乓圈。我们使用了微信的云开发来完成数据和后台的作用。免去了租赁服务器。 我主要负责的是数据库的设计和云函数实现数据获取和触发器的功能和简单的两个页面。 正文 功能展示 页…
阅读更多...
hadoop join之semi join

hadoop join之semi join

SemiJoin&#xff0c;也叫半连接&#xff0c;是从分布式数据库中借鉴过来的方法。它的产生动机是&#xff1a;对于reduce side join&#xff0c;跨机器的数据传输量非常大&#xff0c;这成了join操作的一个瓶颈&#xff0c;如果能够在map端过滤掉不会参加join操作的数据&#x…
阅读更多...
git学习（9）:git 添加 ssh keys 出现如下错误

git学习（9）:git 添加 ssh keys 出现如下错误

git 添加 ssh keys 出现如下错误&#xff1a; Key is invalid. It must begin with ssh-ed25519, ssh-rsa, ssh-dss, ecdsa-sha2-nistp256, ends 在终端输入如下命令 $ ssh-keygen -t rsa -b 4096 -C "809753922qq.com" 最后得到 id_rsa.pub $ cd ~/.ssh $ vi id…
阅读更多...
BeanUtil使用例子：解析并转化HttpServletRequest到Bean的全面测试

BeanUtil使用例子：解析并转化HttpServletRequest到Bean的全面测试

在Web表单提交后解析表单时&#xff0c;一般框架都提供了某种方式可以自动从表单映射到我们的POJO类里面。属性会被自动填充的。 但如果我们在某个需求里&#xff0c;真的需要用程序来解析的话&#xff0c;那么如果有几百个属性&#xff0c;可就是一个噩梦了。 我们可以用java的…
阅读更多...
【vue开发】vue导出Excel表格教程demo

【vue开发】vue导出Excel表格教程demo

前端工作量最多的就是需求&#xff0c;需求就是一直在变&#xff0c;比如当前端数据写完之后&#xff0c;需要用Excel把数据下载出来&#xff1b;再比如前端在没有数据库想写些demo玩时&#xff0c;也是很好的选择。 第一步安装依赖包,修改配置 1、装依赖&#xff1a; cnpm ins…
阅读更多...
git学习（10）:Git的使用--如何将本地项目上传到Github（两种简单、方便的方法）

git学习（10）:Git的使用--如何将本地项目上传到Github（两种简单、方便的方法）

将本地项目上传到Github&#xff08;两种简单、方便的方法&#xff09; 一、第一种方法&#xff1a; 首先你需要一个github账号&#xff0c;所有还没有的话先去注册吧&#xff01; https://github.com/ 我们使用git需要先安装git工具&#xff0c;这里给出下载地址&#xff0…
阅读更多...
MapReduce 中的两表 join 几种方案简介

MapReduce 中的两表 join 几种方案简介

1. 概述 在传统数据库&#xff08;如&#xff1a;MYSQL&#xff09;中&#xff0c;JOIN操作是非常常见且非常耗时的。而在HADOOP中进行JOIN操作&#xff0c;同样常见且耗时&#xff0c;由于Hadoop的独特设计思想&#xff0c;当进行JOIN操作时&#xff0c;有一些特殊的技巧。 …
阅读更多...
.NET中栈和堆的比较1

.NET中栈和堆的比较1

原文出处&#xff1a; http://www.c-sharpcorner.com/UploadFile/rmcochran/csharp_memory01122006130034PM/csharp_memory.aspx 尽管在.NET framework下我们并不需要担心内存管理和垃圾回收(Garbage Collection)&#xff0c;但是我们还是应该了解它们&#xff0c;以优化我们的…
阅读更多...
前端学习（1）：HTML和CSS导学

前端学习（1）：HTML和CSS导学

最近为什么捡起前端&#xff0c;主要工作太忙&#xff0c;有时间就会抓一下后端&#xff0c;前端是我以前啃得比较多的 再来一次呢&#xff0c;工作在忙也不能停止学习勒 第一部分 第二部分 第三部分 第四部分 如何学习
阅读更多...
Spring Boot----Dubbo原理分析

Spring Boot----Dubbo原理分析

环境&#xff1a;需要创建一个dubbo.xml 通过ImportResource()导入xml&#xff1a; 1、首先spring启动解析配置文件的每一个标签的总接口是 org.springframework.beans.factory.xml.BeanDefinitionParser 2、DubboBeanDefinitionParser是它的一个实现类&#xff0c;通过调用par…
阅读更多...
hive中order by,sort by, distribute by, cluster by作用以及用法

hive中order by,sort by, distribute by, cluster by作用以及用法

1. order by Hive中的order by跟传统的sql语言中的order by作用是一样的&#xff0c;会对查询的结果做一次全局排序&#xff0c;所以说&#xff0c;只有hive的sql中制定了order by所有的数据都会到同一个reducer进行处理&#xff08;不管有多少map&#xff0c;也不管文件有多少…
阅读更多...
最有价值的100句话

最有价值的100句话

1:能不抽烟最好不抽&#xff0c;它或许可以帮助你吸引一些女生&#xff0c;但不抽绝不会招来厌烦&#xff0c;表现男子气概的途径有很多&#xff0c;没必要拿健康做赌注。 　　 2&#xff1a;给自己定目标&#xff0c;一年&#xff0c;两年&#xff0c;五年&#xff0c;也许你…
阅读更多...
前端学习（2）：什么是html和css

前端学习（2）：什么是html和css

什么是HTML&#xff1f; W3C&#xff1a;万维网联盟&#xff0c;是目前web技术领域最具权威和影响力的标准机构&#xff0c;目前为止&#xff0c;W3C已发布了200多项影响深远的web技术标准及实施指南。 Hypertext markup language:超文本标记语言&#xff0c;该语言书写的代码通…
阅读更多...
基于小程序·云开发构建高考查分小程序丨实战

基于小程序·云开发构建高考查分小程序丨实战

2019高考报名人数达到了 1031 万的新高&#xff0c;作为一名三年前参考高考的准程序猿&#xff0c;赶在高考前&#xff0c;加班加点从零开始做了一款高考查分小程序&#xff0c;算是一名老学长送给学弟学妹们的高考礼。上线仅 1 个月&#xff0c;用户数就突破了 1k&#xff0c;…
阅读更多...
浅谈 DML、DDL、DCL的区别

浅谈 DML、DDL、DCL的区别

一、DML DML&#xff08;data manipulation language&#xff09;数据操纵语言&#xff1a;就是我们最经常用到的 SELECT、UPDATE、INSERT、DELETE。 主要用来对数据库的数据进行一些操作。 SELECT 列名称 FROM 表名称 UPDATE 表名称 SET 列名称 新值 WHERE 列名称 某值 IN…
阅读更多...
前端学习（3）：vs code编辑器

前端学习（3）：vs code编辑器

下载地址 https://code.visualstudio.com 下载安装教程 变成中文 在编辑器中运行我们的网页 open in browser view in browser 选中文件----首选项----设置 常用快捷键
阅读更多...
QuickPart应用系列

QuickPart应用系列

在上一篇解决方案包部署与收回篇章中&#xff0c;我只是稍微提了下QuickPart.也许刚接触这块内容的朋友&#xff0c;可能还不是很清楚&#xff0c;QuickPart具体的功能能实现什么。首先要告诉你的是QuickPart的人性化之处&#xff0c;那就是给开发人员开发webpart提供更简洁的方…
阅读更多...
spring----IOC知识点

spring----IOC知识点

//可以修改Bean定义的属性(不是修改Bean) Component public class TulingBeanFactoryProcessor implements BeanFactoryPostProcessor {Overridepublic void postProcessBeanFactory(ConfigurableListableBeanFactory beanFactory) throws BeansException {beanFactory.getBean…
阅读更多...
Hive分析窗口函数(五) GROUPING SETS,GROUPING__ID,CUBE,ROLLUP

Hive分析窗口函数(五) GROUPING SETS,GROUPING__ID,CUBE,ROLLUP

GROUPING SETS 该关键字可以实现同一数据集的多重group by操作。事实上GROUPING SETS是多个GROUP BY进行UNION ALL操作的简单表达&#xff0c;它仅仅使用一个stage完成这些操作。GROUPING SETS的子句中如果包含()数据集&#xff0c;则表示整体聚合。 Aggregate Query with GRO…
阅读更多...
前端学习（4）：chome浏览器

前端学习（4）：chome浏览器

一、认识浏览器 浏览器是网页显示、运行的平台&#xff0c;常用的浏览器有IE、火狐&#xff08;Firefox&#xff09;、谷歌&#xff08;Chrome&#xff09;、Safari和Opera等。我们平时称为五大浏览器。IE最新版为Edge。 常用浏览器 二、浏览器市场份额 可以通过百度的统计网…
阅读更多...
最新文章

Copyright @ 2022~2023