听指令的小方块(一)总结

题目地址 http://ife.baidu.com/course/detail/id/109

解题思路是

通过改变小方块的定位来实现移动。

遇到的几个问题

  1. 如何制作1/4的蓝色背景方块,余下的是红色背景方块?

一开始我的思路是定制不用的样式,可以根据水平方向和垂直方向来设置两个 class,给父元素相对定位,给子元素绝对定位,通过操作它们的 top、left控制它们的方向,但是这个做到后面就推翻了,因为发现只要将蓝色边在上面的做出来,其余方向直接通过 transform 来控制就可以了。

  1. 如何确定蓝色的边的指向

走了弯路,不过找到一种办法,就是看小方块旋转到哪边,然后通过判断旋转角度来实现效果。

注意两个坑。

  1. 考虑 transform 不存在的情况
  2. 考虑旋转角度是负数的情况
  3. 通过 getComputedStyle 得到的值是个矩阵变换,需要通过转换才能拿到真正的度数

参考资料:

https://css-tricks.com/get-value-of-css-rotation-through-javascript/

http://codepen.io/jjeaton/pen/bzolH

  1. 如何限制小方块的范围

使用 offsetTop\offsetLeft 来实现

 

遗留的问题:

因为我没有将父容器的宽度写死,而是根据元素的个数决定父容器的宽,并且使用了 margin: 50pxauto;问题来了,如果我改变了浏览器的宽度,那么有颜色的正方形就不能准确定位,只能通过刷新来解决,目前没想到可以用什么方式解决这个问题。

 

如何实现格子

js 实现http://jsfiddle.net/yijiang/nsYyc/1/

CSS 实现: http://jsfiddle.net/fexpxpq4/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值