为了账号安全,请及时绑定邮箱和手机立即绑定

秒针在40秒到50秒时候,秒针指的方向与表盘的数字不能对齐,如何解决?[如图所示]

秒针从40秒到50秒,秒针指的方向与表盘的数字不能对其?角度有点超前,请问如何解决?http://img1.sycdn.imooc.com//552baaf40001131103730284.jpg

正在回答

2 回答

Hi,@Zhong_Yuan 同学你好:

秒针的方向和表盘刻度没对齐,是因为刻度的CSS样式有问题,在旋转时对Y轴上的位置进行了重复设置。

以小时的刻度为例(分钟刻度的类似):

(1)在JS中绘制小时刻度时,设置了内联样式 style="transform:rotate(0deg) translate(80px,-50%)"

其中,translate(80px,-50%) 设置了刻度本身在Y轴方向上以其中心位置垂直居中。

(2)但同时在CSS中又设置了

.line-hour li, .line-min li {

  transform-origin: left center;  // 设置了基点在Y轴方向上是center(即以Y轴刻度的中心位置处旋转)

}

此时(1)和(2)同时对Y轴上的位置进行了设置,重复了。导致刻度的绘制有偏差。


解决办法:

将(2)中的基点设置为刻度的左上角,即 transform-origin: 0 0; 

Y轴上垂直居中就交由(1)translate(80px,-50%)中的 translateY(-50%) 去设定。

修改后的效果见 http://codepen.io/anjia/pen/KwEzwQ


说明:

保留(1)是考虑到当表盘静止时(即注释掉 move();)指针依然能和刻度保持垂直对齐。

1 回复 有任何疑惑可以回复我~

秒针+角度就可以啦

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

秒针在40秒到50秒时候,秒针指的方向与表盘的数字不能对齐,如何解决?[如图所示]

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信