今天完成的事情 | 1、前半天在复习JS的基础知识。其中写了一段item添加到数组的结尾,然后移出数组的第一个元素,最后返回被删除的元素。还有别的方法吗?就是不用push和shift,只用一个功能实现。 |
| function queue(arr, item) { |
| arr.push(item); |
| item = arr.shift(); |
| return item; |
| } |
| var testArr = [1,2,3,4,5]; |
| console.log("Before: " + JSON.stringify(testArr)); |
| console.log(queue(testArr, 6)); |
| console.log("After: " + JSON.stringify(testArr)); |
| 2、晚上跟着视频写了一段旋转浏览图片的代码。 |
| 2.1、使用了一些CSS3的知识,transform:rotateX(0deg) rotateY(0deg) translateZ(0px)。 |
| 2.1.1、transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。rotateX(0deg)定义沿着 X 轴的 3D 旋转。 |
| 2.1.2、rotateX(0deg):沿着 X 轴的 3D 旋转0度。 |
| 2.1.3、rotateY(180deg):沿着 X 轴的 3D 旋转180度。 |
| 2.1.4、translateZ(100px):3D转换,Z轴方向往外延伸100px。 |
| 2.2、过渡效果,transition:width 1s;从一个width变成另一个width使用1S事件。 |
| 2.3、使用了一些JS的代码,onmousedown、onmousemove、onmouseup。 |
| 2.4、复习了下计时器的使用,setInterval(function(){},1000);以及配套使用的关闭计时器clearInterval(); |
| 2.5、事件对象的获取,e = e || window.event;,不是很明白。 |
| 2.6、通过上文的方法,在e.clientX获取鼠标当前位置X轴坐标,Y轴同理。 |
遇到的问题 | 1、本打算发手机上也能旋转,结果是鼠标和触摸不一样…触摸事件效果还做不出来。简单了解了下。 |
| 1.1、touchstart //手指刚接触屏幕时触发 |
| 1.2、touchmove //手指在屏幕上移动时触发 |
| 1.3、touchend //手指从屏幕上移开时触发 |
| 1.4、pageX //相对于页面的 X 坐标 |
| 1.5、pageY //相对于页面的 Y 坐标 |
| 1.6、clientX //相对于视区的 X 坐标 |
| 1.7、clientY //相对于视区的 Y 坐标 |
| 1.8、screenX //相对于屏幕的 X 坐标 |
| 1.9、screenY //相对于屏幕的 Y 坐标 |
成果:http://119.10.57.69:880/jnshu039/js/keke/ow.html
评论