耀极客论坛

 找回密码
 立即注册
查看: 386|回复: 0

JavaScript实现三种常用网页特效(offset、client、scroll系列)

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:06:35 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了三种常用的PC端网页特效:元素偏移量offset系列,元素可视区client系列和元素滚动scroll系列,文中示例代码介绍详细,需要的可以参考一下

一、元素偏移量 offset 系列
  offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
       
  • 获得元素距离带有定位父元素的位置   
  • 获得元素自身的大小(宽度高度)   
  • 注意: 返回的数值都不带单位
  offset常用的属性有:

  例如:给定一个子盒子和一个父盒子,并给他们一定的大小,来看看这些属性是怎样获得的:
  1.     ‹style>
  2.         *{
  3.             margin: 0px;
  4.             padding: 0px;
  5.         }
  6.         .father{
  7.             position: relative;
  8.             margin-left: 50px;
  9.             margin-top: 10px;
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: brown;
  13.         }
  14.         .son{
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: cornflowerblue;
  18.         }
  19.     ‹/style>
  20. ‹/head>
  21. ‹body>
  22.     ‹div class="father">
  23.         ‹div class="son">‹/div>
  24.     ‹/div>
  25.     ‹script>
  26.         var father = document.querySelector('.father');
  27.         var son = document.querySelector('.son')
  28.         console.log('father.offsetLeft',father.offsetLeft);
  29.         console.log('father.offsetTop',father.offsetTop);
  30.         console.log('son.offsetWidth',son.offsetWidth);
  31.         console.log('son.offsetHeight',son.offsetHeight);
  32.     ‹/script>
  33. ‹/body>
复制代码
  打印结果为:

  我们知道,offset可以帮助我们得到元素的大小和父元素,但是style属性也可以获取到相关属性,那么,他们的区别又是什么呢?
  offset
       
  • offset 可以得到任意样式表中的样式值   
  • offset 系列获得的数值是没有单位的   
  • offsetWidth 包含padding+border+width   
  • offsetWidth 等属性是只读属性,只能获取不能赋值
  style
       
  • style.width 获得的是带有单位的字符串   
  • style.width 获得不包含padding和border 的值   
  • style.width 是可读写属性,可以获取也可以赋值

二、元素可视区 client 系列
  client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。


  例如,给定一个带边框的盒子,返回这些属性,看看结果。
  1. ‹style>
  2.         .box{
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: darkorchid;
  6.             border: 20px solid #ccc;
  7.         }
  8.     ‹/style>
  9. ‹/head>
  10. ‹body>
  11.     ‹div class="box">‹/div>
  12. ‹/body>
  13. ‹script>
  14.     var box = document.querySelector('.box')
  15.     console.log('box.clientWidth:'+box.clientWidth);
  16.     console.log('box.clientWidth:'+box.clientWidth);
  17.     console.log('box.clientWidth:'+box.clientWidth);
  18.     console.log('box.clientTop:'+box.clientTop);
  19. ‹/script>
复制代码
  结果为:

  可以发现,通过client系列的得到的盒子大小并不包含盒子的边框。

三、元素滚动 scroll 系列
  scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

  例如:还是上面案例的盒子,我们打印其scroll系列属性,看看结果
  1. ‹style>
  2.         .box{
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: darkorchid;
  6.             border: 20px solid #ccc;
  7.         }
  8.     ‹/style>
  9. ‹/head>
  10. ‹body>
  11.     ‹div class="box">‹/div>
  12. ‹/body>
  13. ‹script>
  14.     var box = document.querySelector('.box')
  15.     console.log('box.scrollWidth:'+box.scrollWidth);
  16.     console.log('box.scrollHeight:'+box.scrollHeight);
  17.     console.log('box.scrollLeft:'+box.scrollLeft);
  18.     console.log('box.scrollTop:'+box.scrollTop);
  19. ‹/script>
复制代码
  结果为:

  我们发现得到的盒子高度和宽度都是我们的给定值,和client系列得到的值是一样的,那么他们的区别是什么呢?现在我们给盒子里面添加超过盒子高度的内容:
  1. ‹div class="box">
  2.    王欢在学前端‹br>‹br>
  3.    王欢在学前端‹br>‹br>
  4.    王欢在学前端‹br>‹br>
  5.    王欢在学前端‹br>‹br>
  6.    王欢在学前端‹br>‹br>
  7.    王欢在学前端‹br>‹br>
  8.    王欢在学前端
  9. ‹/div>
复制代码
  打印结果为:

  可以发现此时打印的盒子高度变大了,其实这个值是指盒子加上文字后自身实际的高度。
  大家还会发现两次打印的box.scrollLeft和box.scrollTop的值都是0,这又是什么意思呢?
  现在我们通过overflow:auto将盒子内超出的内容让其以滚动条的形式显示,然后给他添加滚动事件,如下所示:
  1. var box = document.querySelector('.box')
  2.     box.addEventListener('scroll',function(){
  3.         console.log('box.scrollTop:'+box.scrollTop);
  4.     })
复制代码
  效果为;

  发现得到的值是随着滚动来变化的,其实,box.scrollTop返回的是被卷去的上侧距离,如下图所示:

  以上就是JavaScript实现三种常用网页特效(offset、client、scroll系列)的详细内容,更多关于JavaScript网页特效的资料请关注脚本之家其它相关文章!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:16 , Processed in 0.070427 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表