杂谈transform3D,鼠标拖动,手机端拖动

今天又复习了一下css3的transform3D部分,说个印象深的就是rotateX正值是从右往左看的顺时针方向,rotateY正值时是从下往上看时的顺时针方向。虽然注意这个好像没啥意思,有人会觉得测试一下就知。我也觉得,但刻意留意下,会提高点点效率,积少成多,熟能生巧嘛。然后看了小龙老师的3D盒子源码。然后自己也模仿了个。附上网址(审查可以看源码,都写在网页里了):http://www.huangjunyong,club

有趣的地方在于鼠标能拖动来转换视角。用坐标对应旋转角度,利用3对变量(X,Y),第一对存着角度状态(坐标),第二对存着鼠标点击时的坐标,第三对存着鼠标移动时产生的坐标,进而做出鼠标拖动旋转的效果。因为源码移动端没效果,移动端没有onmousedown这些方法,所以我加了ontouchstart等来替换(百度的,学习了!),要注意的是,要取得X坐标,如onmousedown的话有

document.onmousedown=function(e){

var e = e || event;//event在IE下就有,而在FF事件执行时才有产生

var x = e.pageX;

}

如果是ontouchstart的话,有

 

document.ontouchstart=function(e){

e=e||event;
var touch = e.touches[0];
var x = touch.pageX;

}

大家可以发现除了方法对应着换了外,还有个e.touches[0]的东西。touches对象嘛,想一下为什么鼠标没有呢?因为鼠标只有一个嘛,你只有一根手指?

源码中值得注意的还有元素节点中有个ondragstart='return false'

ondragstart在IE9以后才支持,不加的话图片会被拖到新窗口,别的元素要可以拖动的话得加draggable="true"

完。

发表评论

电子邮件地址不会被公开。 必填项已用*标注