三里屯摇滚 发表于 2012-02-13 17:08

js学习笔记

js学习笔记








之前做了一个图片随鼠标移动效果,但是在ff下就是没效果,自习琢磨,只怪自己是个菜鸟 不懂得浏览器之间的兼容性问题:

火狐下没有posLeft和posTop可以直接用left和top不过在参数后面要加+ "px"

火狐下不用scrollLeft+event.clientX 火狐的event有event.pageX

所以多对比一下 还有记得看firebug的console里面有没有错误提示 还有单步调试或者alert看看变量有没有出现undefined的值 等等 尽量使用都兼容的属性。



之前犯过另一个错误,找了很久都没找到,后来请教大师,大师曰:

为什么要把onmousemove加在body上呢

其实在你这个页面里面body加上style = "2px solid black" 你就可以看到body有多小了--只有一条线

为什么因为body里面没有元素(div是absolute的 脱离了文档流)所以body其实没有大小也就不会有onmouse了

你把body的onmousemove去掉 在move函数底下(函数外)加上document.onmousemove = move;就行



上网一搜文档流相关内容得知:

定位知识:
html页面块元素的定位(DIV,Table,UL,LI等) 文档流:html页面元素按照书写顺序,自上而下,自左而右的次序,线性的输出流。html元素在没有指定定位方式 (Position:absolute,Position:relative,Position:fixed等),或是指定定位方式为 Position:static的情况下,浏览器就会按照html元素在文档流中的次序进行显示。判断html元素定位的步骤:
1、首先,我们要判断被定位元素是否脱离普通文档流。是否脱离文档流将会影响文档流中其余元素的定位。对于脱离了文档流的元素,其显示已经不再受普通文档流的束缚,而文档流中的其余元素的定位就如同该元素已经不在页面上一样。而对于未脱离文档流的元素,其无论偏移到了页面的何处,实际上占据的仍然是其原来的位置。文档流中的其余元素定位时,也就会相应的留出该元素的位置。在几种定位方式中, position:absolute和float是脱离文档流的,而position:relative不会使被定位的对象脱离普通的文档流。
2、其次,确定被定位元素偏移的参照物。找准参照物,被定位元素的位置也就明晰了。由position:absolute定位的元素参照的对象是其最近的已定位(包括position:absolute和position:relative两种方式)的祖先元素(祖先元素即位于外层,嵌套其的元素),若该祖先元素不存在,则其参照最初的包含块,如页面画布。float和position:relative两种定位方式参照的是被定位元素在普通文档流中的原本的位置。被 position:absolute和position:relative定位的元素,其偏移量由top、left、bottom和right确定。 float定位指示了其是向右(right)、向左 (left),还是同时向左右(both)漂移。

清风鸟儿 发表于 2012-02-13 17:09

谢谢分享

冷翎月 发表于 2012-02-15 09:37

值得学习
页: [1]
查看完整版本: js学习笔记