JavaScript常见的网页特效（元素样式相关属性）

JavaScript常见的网页特效

特效样式1、模态框拖曳效果2、放大镜效果3、固定侧边栏效果4、上下图片无间断滚动5、左右图片无间断滚动

如何实现这些效果呢？元素偏移量offset系列元素可视区client系列元素滚动scroll系列如何实现上面那些效果呢模态框拖曳效果代码实现放大镜效果代码实现固定侧边栏效果代码实现上下图片无间断滚动代码实现左右图片无间断滚动代码实现

特效样式

1、模态框拖曳效果

2、放大镜效果

3、固定侧边栏效果

4、上下图片无间断滚动

5、左右图片无间断滚动

如何实现这些效果呢？

我想介绍一下元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列相关的知识。

元素偏移量offset系列

offset含义：offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。

属性说明offsetLeft返回元素相对其带有定位的父元素左边框的偏移offsetTop返回元素相对其带有定位的元素上方的偏移offsetWidth返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位offsetHeight返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位offsetParent返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）

offset与style的区别

Offsetstyleoffset可以得到任意样式表中的样式值style只能得到行内样式表中的样式值offset系列获得的数值是没有单位的style.width获得的是带有单位的字符串offsetWidth包含padding、border、width的值style.width获得的是不包含padding、border的值offsetWidth等属性是只读属性，只能获取不能赋值style.width是可读写属性，可以获取也可以赋值

案例

获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。 效果展示 JavaScript代码如下

元素可视区client系列

client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。

属性说明clientLeft返回元素左边框的大小clientTop返回元素上边框的大小clientWidth返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位clientHeight返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位

案例

获取元素client。

效果展示

JavaScript代码如下

元素滚动scroll系列

scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。

属性说明scrollLeft返回被卷去的左侧距离，返回数值不带单位scrollTop返回被卷去的上方距离，返回数值不带单位scrollWidth返回自身的宽度，不含边框。注意返回数值不带单位scrollHeight返回自身的高度，不含边框。注意返回数值不带单位

案例 获取scrollHeight。

效果展示

JavaScript代码如下

如何实现上面那些效果呢

模态框拖曳效果代码实现

放大镜效果代码实现

固定侧边栏效果代码实现

上下图片无间断滚动代码实现

左右图片无间断滚动代码实现