请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2025-9-14 14:06 编辑
<style>
#pa {
margin: 20px auto;
padding: 10px;
width: 700px;
height: 600px;
border: 1px solid gray;
background:
linear-gradient(gray,gray) no-repeat 50%/100% 1px,
linear-gradient(gray,gray) no-repeat 50%/1px 100%;
position: relative;
}
#son {
--deg: 0deg;
position: absolute;
left: 50%;
top: calc(50% - 10px);
width: 150px;
height: 20px;
background: linear-gradient(90deg, teal 90%, red 91%, red);
transform-origin: 0 50%;
transform: rotate(var(--deg));
}
</style>
<div id="pa">
<div id="son"></div>
<output id="aMsg">0</output>
</div>
<script>
pa.onmousemove = (e) => {
// 旋转中心 : pa元素中央
const center = {x: pa.clientWidth/2, y: pa.clientHeight/2};
// 动态点(A): 鼠标指针所在点
const point = {x: e.clientX, y: e.clientY};
// 获取角度 : 参数是pa父元素和两个坐标点对象
let a = getAngle(pa, center, point);
// 驱动son子元素旋转
son.style.setProperty('--deg', a + 'deg');
// 输出角度信息
aMsg.value = '角度 : ' + a;
};
function getAngle(element, pointC, pointA) {
const rect = element.getBoundingClientRect();
// 旋转中心
const cx = pointC.x, cy = pointC.y;
// 计算点A的X、Y坐标
const px = pointA.x - rect.left, py = pointA.y - rect.top;
// 计算点A和旋转中心的坐标差值
const dx = px - cx, dy = py - cy;
// 计算西塔（θ）夹角
let angle = Math.atan2(dy, dx) * 180 / Math.PI;
// 1、2象限角度为负数，若需要处理
//if (angle < 0) angle += 360;
return angle;
}
</script>
| 
发表于 2025-9-14 12:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-9-14 17:24
