其实只是一个模拟思路是这样的让鼠标消失再用一个跟鼠标一样的图片跟随鼠标移动这样我们就可以控制这个图片的移动了囧～
怎样让鼠标消失呢就是做一个高宽px的透明cur文件并把其设置为鼠标光标就行了囧囧～～～
这里是我们需要的两个素材
透明cur
鼠标图片
ok现在思路和素材都有了我们就可以编码实现了
<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head>
<style type=text/css>
body{
cursor:url()auto;
}
</style>
<script type=text/javascript>
function $I(id){
return typeof(id)==string?documentgetElementById(id):id;
};
var isMoving=false;
windowonload=function(){
$I(arrow)styleposition=absolute;
$I(arrow)stylezIndex=;
documentbodyonmousemove=function(e){
e=e||event;
if(!isMoving){
$I(arrow)styleleft=eclientX+documentdocumentElementscrollLeft++px;
$I(arrow)styletop=eclientY+documentdocumentElementscrollTop++px;
}
};
documentoncontextmenu=function(e){
e=e||event;
if(isMoving){
ereturnValue=false;
}
};
$I(btn)onclick=function(){
alert(lalala~~~~);
};
windowsetInterval(function(){
if(!isMoving){
move(parseInt($I(arrow)styleleft)parseInt($I(arrow)styletop)
parseInt($I(btn)styleleft)+$I(btn)offsetWidth/
parseInt($I(btn)styletop)+$I(btn)offsetHeight/)
}
});
}
function getAngle(startXstartYendXendY)
{
var angle;
var tanx;
if(endXstartX!=){
tanx=Mathabs(endYstartY)/Mathabs(endXstartX);
}else{
return +(endYstartY>?:);
}
angle=Mathatan(tanx)//MathPI*;
if(endXstartX< && endYstartY<=){
angle=angle;
}
if(endXstartX< && endYstartY>){
angle+=;
}
if(endXstartX>= && endYstartY>){
angle=angle;
}
return angle;
};
function move(startXstartYendXendY){
var currentDistance=;
var currentX=startX;
var currentY=startY;
var angle=getAngle(startXstartYendXendY);
var speed=;
var intervalId=windowsetInterval(function(){
if(Mathabs(parseInt($I(arrow)styleleft)endX)>speed
|| Mathabs(parseInt($I(arrow)styletop)endY)>speed){
var newXnewY;
var xAngle=angle*(*MathPI/);
var xDirection=Mathabs(s(xAngle))/s(xAngle);
var yDirection=Mathabs(Mathsin(xAngle))/Mathsin(xAngle);
if(Mathabs(Mathtan(xAngle))<=){
var deltaX=Mathabs(speed*s(xAngle))*xDirection;
newX=currentX+deltaX;
newY=(newXstartX)*Mathtan(xAngle)+startY;
}
else{
var deltaY=Mathabs(speed*Mathsin(xAngle))*yDirection;
newY=currentYdeltaY;
newX=(newYstartY)/Mathtan(xAngle)+startX;
}
currentX=newX;
currentY=newY;
$I(arrow)styleleft=currentX+px;
$I(arrow)styletop=currentY+px;
isMoving=true;
}
else{
windowclearInterval(intervalId);
isMoving=false;
$I(btn)click();
$I(btn)focus();
}
});
}
</script>
</head>
<body>
<input type=button id=btn value=I am a Button/>
<div ></div>
<img id=arrow src=>
</body>
</html>
