1 元素偏移量offset系列

1.1 offset概述

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

属性	说明
offsetLeft	返回元素与带有定位的父元素左边框的偏移
offsetTop	返回元素与带有定位的父元素上边框的偏移
offsetWidth	返回自身的宽度（2padding+2border+content），注意返回数值不带单位
offsetHeight	返回自身的高度（2padding+2border+content），注意返回数值不带单位
offsetParent	返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）

示例：写一个盒子，获取并输出鼠标指针在盒子内的坐标，下面是鼠标指针在盒子内的坐标位置示意图分析。

具体代码如下：

    <div id="box"></div><style>#box {width: 200px;height: 200px;background-color: pink;}</style><script>// 获取到该盒子var box = document.getElementById("box");// 给box绑定鼠标移动的事件box.addEventListener("mousemove", function (e) {// 获取box相对于父元素的偏移量var left = box.offsetLeft;var top = box.offsetTop;// 计算鼠标在box中的坐标var x = e.pageX - left;var y = e.pageY - top;console.log("坐标是：(" + x + "," + y + ")");})</script>

【案例】点击登录后弹出可拖拽的模态框
【案例】实现放大镜效果

1.2 offset与style的区别

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

2 元素可视区client系列

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

属性	说明
clientLeft	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回width+2*padding的宽度，返回数值不带单位
clientHeight	返回height+2*padding的宽度，返回数值不带单位

示例：输出元素上、左边框的大小，以及自身的宽度和高度

    <div></div><style>div {width: 100px;height: 100px;background-color: aqua;border: 3px solid yellow;}</style><script>//获取div元素let div = document.querySelector("div");//输出元素左边框和上边框的大小console.log("左边框的大小：", div.clientLeft);console.log("上边框的大小：", div.clientTop);//输出元素自身宽度和高度（不含边框）console.log("宽度为：", div.clientWidth);console.log("高度为：", div.clientHeight);</script>

3 元素滚动scroll系列

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

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

示例：获取自身的高度和宽度，获取div卷起来的高度

    <div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div><br><button>点击获取卷起来的高度和宽度</button><style>div {width: 200px;height: 100px;background-color: pink;/* 将放不下的元素滚动来显示 */overflow: scroll;}</style><script>//1、获取页面中的元素div和buttonlet div = document.querySelector("div");let button = document.querySelector("button");//2、输出自身的高度和宽度console.log("高度为：", div.scrollHeight);console.log("宽度为：", div.scrollWidth);//给按钮注册click点击事件，点击之后输出卷起来的高和宽button.addEventListener("click", function () {console.log("卷起来的高度：", div.scrollTop);console.log("卷起来的宽度：", div.scrollLeft);})</script>

【案例】实现固定侧边栏效果

JavaScript网页特效相关推荐

php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
JavaScript网页特效-“渔夫打鱼晒网”程序设计
程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
实用JavaScript网页特效编程百宝箱pdf
下载地址:网盘下载内容介绍编辑计算机的出现是人类历史上的伟大创举,因为它正在彻底改变着人们生活中的方方面面,网络化的计算机更是日益渗透到社会发展的各个应用领域,从20世纪五六十年代网络雏形发展到 ...
javascript网页特效_南通建网站哪些,网页设计维护
无锡邦程信息科技有限公司为您详细解读rKXvd南通建网站哪些的相关知识与详情,#末网页设想师根据差别站点的内容微风格,设想出完美的网页效果图.内容填充:不论是个人网站还是企业网站,都必需从内容那个动身 ...
JavaScript网页特效学习笔记1
在网络中有许多的特效都是用JavaScript编写的,这几天通过看书和看视频,简单的学习了几个网页常见的特效,和大家分享一下. 1.使HTML页面反向显示我们浏览网页的时候,都是正向显示的.可以通过 ...
JavaScript网页特效-留言板
留言板是一种可以用来记录.展示文字信息的载体,有比较强的时效性.网站中的留言板功能非常重要,可以实现和用户互动,例如人民网的"领导留言板"."领导留言板"是人民 ...

JavaScript网页特效