JavaScript笔记(20)

PC端网页特效

我们终于要进入PC端网页特效的阶段了,看看我们的目标吧:

offset概述

offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等.

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小
• 注意:返回的数值都不带单位

offset常用属性

我们试验一下:

我们可以得到盒子距上沿100px.距左侧309px

如果我们在里面再加个son盒子呢?我们能测量出son距离父盒子左侧是多少吗?

我们将box的外边距都设置为100px,然后son盒子距离父元素左侧50px,按道理来说应该得到的是50px.

但是我们得到的却是150px

注意说明中有'带有定位'四个字,所以它以带有定位的父亲为准,如果没有父亲hip父亲没有定位,则以body为准,由于我们的box没有定位,所以得到的就是距离body左侧的长度,为100px+50px

加了定位以后

但是我发现如果使用transform:translate(-50%,-50%)就会出错

现在放置一个200*200,padding为20px的盒子

所以是offsetWidth和offsetHeight是包括内边距在内的.

前几天期中还有生日聚会,所以没有学习,内心很不安...今天继续

offset和style的区别

重点:

想要获取元素位置大小,用offset

想要给元素更改值,用style改变

小案例:得到鼠标在盒子中的位置

思路:

写起来不是很难

但是在实际案例中,通常不是点击,而是鼠标移动就会触发事件,所以我们新学了一个鼠标移动事件: mousemove

我们将click换成mousemove,将打印的内容放入盒子:

看看现在的效果吧:

自己做了两遍,把结构和样式自己写了下,所以花了比较多时间,现在写一下过程:

跟着老师把class 和id还有该写的name都写上了

结构比较多,挑几个比较重要的地方吧:

注意这两个地方,如果不这样写的话,遮罩层就会跑到这个的上面一层.

当心外边库塌陷的问题

有些东西不自己写一遍是不会知道为什么要这样写的,所以要自己多动手写才行...

现在写script部分:

获取元素:

先做第一步:点击弹出登录框是登录框会出来,然后遮罩层出现;点击关闭时,登录界面关闭,遮罩层消失

第二步就是比较困难的地方了

分析一下,总算是懂了...

看看效果吧:

明天继续做案例,现在先去休息啦,虽然天天都很划水...