當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Web中的鼠标自动移动

發布時間：2023/12/10 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

總結

以上是生活随笔為你收集整理的Web中的鼠标自动移动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Web
鼠标