JavaScript实现三种常用网页特效(offset、client、scroll系列)
目录
- 一、元素偏移量 offset 系列
- 二、元素可视区 client 系列
- 三、元素滚动 scroll 系列
一、元素偏移量 offset 系列
offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意： 返回的数值都不带单位
offset常用的属性有：
例如：给定一个子盒子和一个父盒子，并给他们一定的大小，来看看这些属性是怎样获得的：
<style>
*{
margin: 0px;
padding: 0px;
}
.father{
position: relative;
margin-left: 50px;
margin-top: 10px;
width: 200px;
height: 200px;
background-color: brown;
}
.son{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son')
console.log('father.offsetLeft',father.offsetLeft);
console.log('father.offsetTop',father.offsetTop);
console.log('son.offsetWidth',son.offsetWidth);
console.log('son.offsetHeight',son.offsetHeight);
</script>
</body>
打印结果为：
我们知道，offset可以帮助我们得到元素的大小和父元素，但是style属性也可以获取到相关属性，那么，他们的区别又是什么呢？
offset
- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值是没有单位的
- offsetWidth 包含padding+border+width
- offsetWidth 等属性是只读属性，只能获取不能赋值
style
- style.width 获得的是带有单位的字符串
- style.width 获得不包含padding和border 的值
- style.width 是可读写属性，可以获取也可以赋值
二、元素可视区 client 系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
例如，给定一个带边框的盒子，返回这些属性，看看结果。
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientTop:'+box.clientTop);
</script>
结果为：
可以发现，通过client系列的得到的盒子大小并不包含盒子的边框。
三、元素滚动 scroll 系列
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
例如：还是上面案例的盒子，我们打印其scroll系列属性，看看结果
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.scrollWidth:'+box.scrollWidth);
console.log('box.scrollHeight:'+box.scrollHeight);
console.log('box.scrollLeft:'+box.scrollLeft);
console.log('box.scrollTop:'+box.scrollTop);
</script>
结果为：
我们发现得到的盒子高度和宽度都是我们的给定值，和client系列得到的值是一样的，那么他们的区别是什么呢？现在我们给盒子里面添加超过盒子高度的内容：
<div class="box"> 王欢在学前端<br><br> 王欢在学前端<br><br> 王欢在学前端<br><br> 王欢在学前端<br><br> 王欢在学前端<br><br> 王欢在学前端<br><br> 王欢在学前端 </div>
打印结果为：
可以发现此时打印的盒子高度变大了，其实这个值是指盒子加上文字后自身实际的高度。
大家还会发现两次打印的box.scrollLeft和box.scrollTop的值都是0，这又是什么意思呢？
现在我们通过overflow:auto将盒子内超出的内容让其以滚动条的形式显示，然后给他添加滚动事件，如下所示：
var box = document.querySelector('.box')
box.addEventListener('scroll',function(){
console.log('box.scrollTop:'+box.scrollTop);
})
效果为;
发现得到的值是随着滚动来变化的，其实，box.scrollTop返回的是被卷去的上侧距离，如下图所示：
以上就是JavaScript实现三种常用网页特效(offset、client、scroll系列)的详细内容，更多关于JavaScript网页特效的资料请关注我们其它相关文章！
相关推荐
-
js中offset,client , scroll 三大元素知识点总结
js 元素offset,client , scroll 三大系列总结 1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用scrollWidth 3,element.scrollWidth : 不包含边框 主要用法: 1,offset 系列 经常用于获得元素位置 offsetLeft offsetTop 2,client经常用于获取元素大小, clie
-
JavaScript三种常用网页特效详解
目录 1 元素偏移量offset系列 1.1 offset概述 1.2 offset与style的区别 2 元素可视区client系列 3 元素滚动scroll系列 1 元素偏移量offset系列 1.1 offset概述 offset含义:offset的含义是偏移量,使用offset的相关属性可以动态地获取该元素的位置.大小等. 属性 说明 offsetLeft 返回元素相对其带有定位的父元素左边框的偏移 offsetTop 返回元素相对其带有定位的元素上方的偏移父 offsetWidth 返
-
javascript的offset、client、scroll使用方法详解
offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像素. offsetHeight 指元素控件自身的高度,整型,单位像素. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网
-
javascript中offset、client、scroll的属性总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.
-
JS前端知识点offset，scroll，client，冒泡，事件对象的应用整理总结
本文实例讲述了JS前端知识点offset,scroll,client,冒泡,事件对象的应用.分享给大家供大家参考,具体如下: 关于offset 多用于检测盒子高度,宽度,位置等 - offsetWidth : 盒子的宽度, 包括(width, padding, border) - offsetHeight: 盒子的高度, 包括(height, padding, border) - offsetLeft: 返回自身距离带有定位的上级盒子左边的位置 - offsetTop: 返回自身距离带有定位的上
-
JavaScript实现三种常用网页特效(offset、client、scroll系列)
目录 一.元素偏移量 offset 系列 二.元素可视区 client 系列 三.元素滚动 scroll 系列 一.元素偏移量 offset 系列 offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意: 返回的数值都不带单位 offset常用的属性有: 例如:给定一个子盒子和一个父盒子,并给他们一定的大小,来看看这些属性是怎样获得的: <style> *{ m
-
javascript特殊文本输入框网页特效
本文实例为大家分享了特殊js文本输入框网页特效,供大家参考,具体内容如下 实例一:让文本框只带有下划线 <script type="text/javascript"> function changeTextStyle(){ //让文本框只带有下划线 //获得文本框的DOM var myText = document.getElementById("myText"); myText.style.borderColor = 'black'; //设置边框颜色
-
javascript实现随机显示星星特效
本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的 (2)星星随机大小:min=15,max=80 (3)星星的坐标是随机的: x_left=0,x_right=(浏览器宽-星星宽) y_top=0,y_bottom=? (4)单击某个星星,星星消失 (5)网页加载完成,开始显示星星 (6)定时器:每隔一个周期,插入一个星星 <html> <head> <meta h
-
JavaScript实现的简单烟花特效代码
本文实例讲述了JavaScript实现的简单烟花特效代码.分享给大家供大家参考,具体如下: 这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yh-explode-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
用javascript实现自动输出网页文本
用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家. 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=&q
-
七个基于JavaScript实现的情人节表白特效
目录 七夕情人节送花动画告白特效 玫瑰花盛开动画告白特效 3d旋转相册 点击爱心散开动画告白特效 雷电打出告白文字特效 粒子组合告白文字特效 小熊拉手CSS3情人节动画表白特效 七夕情人节送花动画告白特效 效果展示 代码展示: <div id='content'> <ul class='content-wrap'> <!-- 第一副画面 --> <li> <!-- 背景图 --> <div class="a_background&
-
十个利用JavaScript实现的爱心动画特效
目录 3d爱心跳动特效 效果展示 代码展示 线条合成的爱心动画特效 效果展示 代码展示 520爱心背景表白网页动画特效 效果展示 代码展示 爱心签到墙 效果展示 代码展示 粉色的情人节爱心飞出ui特效 效果展示 代码展示 酷炫表白爱心动画特效 效果展示 代码展示 烂漫爱心表白动画(程序员也浪漫) 效果展示 代码展示 飘落的爱心雨 效果展示 代码展示 线条的3D爱心动画 效果展示 代码展示 原生JS制作爱心表白代码 效果展示 代码展示 3d爱心跳动特效 效果展示 代码展示 <!DOCTYPE ht