JS实现元素指向某位置

function createTurret(){//创建指向元素
    var turret =document.createElement("div");
    var a=document.getElementById("main");
    turret.className="Turret";
    turret.style.backgroundImage='url(箭头.png)';
    turret.style.position="relative";
    turret.style.left=""+parseInt(100*Math.random())+"%";//随机生成位置
    turret.style.top=""+parseInt(100*Math.random())+"%";
    turret.style.height="40px";
    turret.style.width="40px";
    a.appendChild(turret);
    console.info(mouse_x,mouse_y)
}
function getAngle(x1,y1,x2,y2){//计算角度
    var diff_x = x2 - x1,diff_y = y2 - y1;
    return 360*Math.atan(diff_y/diff_x)/(2*Math.PI);
}
function target(){//指向方法
    var turret = document.getElementsByClassName("Turret");
    var target_x=document.getElementById("target").getBoundingClientRect().left;//获取目标坐标
    var target_y=document.getElementById("target").getBoundingClientRect().top;
    for(var i=0;i<turret.length;i++){
        if(turret[i].getBoundingClientRect().left<target_x){
            turret[i].style.webkitTransform = 'rotate('+(getAngle(turret[i].getBoundingClientRect().left,turret[i].getBoundingClientRect().top,target_x,target_y)+90)+'deg)';
        }
        else{
            turret[i].style.webkitTransform = 'rotate('+(getAngle(turret[i].getBoundingClientRect().left,turret[i].getBoundingClientRect().top,target_x,target_y)-90)+'deg)';
        }
        // console.info(getAngle(turret[i].getBoundingClientRect().left,turret[i].getBoundingClientRect().top,target_x,target_y));
    }
}
function move(){
    var target =document.getElementById("target");
    target.style.left=""+parseInt(100*Math.random())+"%";
    target.style.top=""+parseInt(100*Math.random())+"%";
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值