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())+"%";
}
JS实现元素指向某位置
最新推荐文章于 2024-04-29 23:01:06 发布