麻烦老师来解决一下我的疑问。

来源:6-2 上升到面向对象-炫彩小球小案例

weixin_慕移动6442865

2020-12-05 15:34:21

    ​    ​ 问题1: 请问老师,为什么这里的宽高要在JS里设置,而不在style里直接设置呢??

    ​    ​    ​​this.dom.style.width=this.r*2+'px'

            this.dom.style.height=this.r*2+'px'

    ​    ​    问题2:​为什么这里left和top值必须圆心减半径???只是为了起始从左上角吗??不是很明白。

            this.dom.style.left=this.x-this.r+'px'

            this.dom.style.top=this.y-this.r+'px'


写回答

2回答

好帮手慕慕子

2020-12-05

同学你好,不减去小圆的半径,实现的效果确实没有多大的差别。但是从老师上一条回答中的分析可知,因为小圆距离页面的距离是从小圆的边框处开始计算的,而不是从圆心开始计算,所以必须要减去小圆的半径,代码才会更加规范与严谨。当然了,同学如果不考虑这些,自己练习时减不减去this.r都是可以的,但是老师更推荐同学按着老师的写法减去小圆的半径this.r,保持严谨

祝学习愉快~

0

好帮手慕慕子

2020-12-05

同学你好,  对于你的问题解答如下:

  1. 因为直接style里面设置的样式是固定的,但是实际要实现的效果,小彩球的宽高,在鼠标移动过程中宽高是要发生变化的,并不是一个固定的值,所以要通过js设置。

  2. 是的,因为小圆距离页面的距离是从小圆的边框处开始计算的,而不是从圆心开始计算,所以必须减去小圆的半径。

    老师以水平方向为例,简单画了一个图,帮助同学更好的理解,垂直方向是相同的道理,如下图所示:

    http://img.mukewang.com/climg/5fcb55180923070d11690573.jpg

祝学习愉快~

0
heixin_慕移动6442865
hp>老师你好,第二个问题我的意思是为什么一定要减去r,

就算这样写:

    ​    ​    ​this.dom.style.left=this.x+'px'

            this.dom.style.top=this.y+'px'

感觉实现的效果也没什么区别啊。所以我不明白为什么要减?

h020-12-05
共1条回复

0 学习 · 15276 问题

查看课程