[js基础] pc端网页特效

最新推荐文章于 2024-09-22 11:17:00 发布

lk_kl

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量161

点赞数

分类专栏： # js 文章标签： javascript

本文链接：https://blog.csdn.net/lk_kl/article/details/106273224

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

元素偏移量 offset系列

使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

获取元素距离带有定位父元素的位置
获取元素自身的大小，即宽度和高度
！！返回的数值不带单位

element.offsetWith不包含margin值，仅包含自身width+padding+border

element.offsetParent：返回带定位的父元素
element.parentNode：返回最近的父元素，无论带不带定位
offset与style的区别

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lk_kl

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

PC端网页特效 | 常见网页特效案例

不爱吃菜的菜菜的博客

05-19

1040

目录案例：网页轮播图轮播图JS全部代码节流阀案例：返回顶部 JS代码为案例：筋头云案例案例：网页轮播图轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。图片播放的同时，下面小圆圈模块跟随一起变化。点击小圆圈，可以播放相应图片。鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过，轮播图模块，自动播放停止。首先要有两.

JS之PC端网页特效案例

qq_46655844的博客

07-27

246

学习黑马JS的PC端案例

参与评论您还未登录，请先登录后发表或查看评论

JavaScript—— PC 端网页特效

weixin_61920612的博客

04-03

1692

JavaScript—— PC 端网页特效

JavaScript学习7：PC端网页特效（offset、client、scroll、动画

2401_84435838的博客

07-04

364

立即执行函数：不需要调用，立马执行，最大的作用就是独立创建了一个作用域，避免了命名冲突问题。element.offsetParent：返回带有定位的父亲，否则返回body。(function(){})() ：第二个括号可以看作调用函数。注意：mouseenter和mouseover的区别（面试题）element.parentNode：返回最近一级的父亲。另一种写法：(function(){}())公式：（目标值 - 现在的位置） / 10。缓动动画（更好看）：减速效果。简单动画函数封装：匀速。

javascript二——PC端网页特效

0 error(s), 0 warning(s)

04-04

2606

文章目录元素偏移量offset系列概述offset和style区别获取鼠标位置案例拖拽模态框案例放大镜案例元素可视区client系列立即执行函数淘宝flexibleJS源码分析元素滚动scroll系列固定侧边栏三大系列总结主要用法：mouseenter和mouseover的区别动画函数封装动画实现原理封装缓动效果原理动画函数多个目标值之间移动动画函数添加回调函数动画函数封装到单独JS文件里常见网页特效案例轮播图节流阀带有动画的返回顶部筋斗云元素偏移量offset系列概述 offset,偏移量，使用off

黑马程序员-JS基础-PC端网页特效

weixin_65549185的博客

11-17

530

元素偏移量offset系列属性及说明示意图 offset与style的区别案例1 在登录页面中拖动登录框元素可视区client系列属性及说明示意图元素scroll系列属性及说明示意图案例淘宝固定右侧的侧边栏其他立即执行函数回调函数动画函数的封装 mouseenter和mouseover的区别节流阀

PC端网页特效-- JS

weixin_48009833的博客

12-28

472

一、元素偏移量offset系列 1. offset概述 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等获得元素距离带有定位父元素的位置获取元素自身的大小（宽度高度）注意：返回的数值都不带单位 offset系列常用属性： offset系列属性作用 element.offsetParent 返回该元素带有定位的父级元素，如果父级都没有定位则返回body element.offsetTop 返回元素相对父元

JavaScript-PC端网页特效

weixin_45768538的博客

05-22

269

（五）PC端网页特效 [!TIP] 在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。 1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位 offset 系列常用属性： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(

PC 端网页特效

既然选择远方，便只顾风雨兼程！

02-25

470

文章目录PC 端网页特效一、元素偏移量 offset 系列1、 offset 概述2、 offset 和 style 区别二、元素可视区 client 系列1、立即执行函数2、 pageshow 事件三、元素滚动 scroll 系列1、元素 scroll 系列属性四、三大系列总结五、 mouse1、 mouseenter 鼠标事件六、动画函数封装1、动画实现原理2、动画函数的封装3、缓冲动画原理4、动画函数添加回调函数5、节流阀 PC 端网页特效一、元素偏移量 offset 系列

PC端网页全屏雪花特效

12-09

全屏下雪特效，只需要把js引用一下就可以了，雪花落到浏览器底部还会有短暂的停留，适合圣诞或网站背景特效，效果很不错哦~~

js之pc端网页特效缓冲动画（2）

m0_61547956的博客

05-07

559

目录一、缓冲动画原理二、缓冲动画多个目标值之间移动三、缓冲动画添加回调函数四、动画函数的使用之问题反馈案例五、案例之品优购轮播图六、节流阀以及逻辑中断应用七、筋斗云案例一、缓冲动画原理让元素的速度有所变化，最常见的是让速度慢慢停下。原理：让盒子每次移动的距离越来越小，速度就会慢慢停下来，核心算法：（目标位置-当前位置）/10，作为每次移动的步长，比如目标位置是100，当前位置0，所以步长就会10...9、8、7...0，停止的条件，让当前盒子距离等于目标位置就停止..

JavaScript——PC端网页特效

Scccc_的博客

03-08

812

JavaScript学习笔记

计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）

最新发布

程序员阿龙的博客

09-22

3557

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。技术范围：我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方

运行VUE项目运行时候的报错汇总

W3306698294的博客

09-21

267

上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】

Babel

小秀的博客

09-20

679

它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。

RedisTemplate混用带来的序列化问题

咖啡煮码

09-18

894

RedisTemplate 不要乱用哦，否则极易出现序列化问题

vue 案例使用

buhuidage的博客

09-17

441

加上show-password就行。el-switch 按键的使用。

前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）

m0_51798113的博客

09-17

789

getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。

PC端页面能点击 MOBILE页面不能点击是什么原因

06-14

1. CSS样式问题：可能是因为PC端页面的某些元素被设置为 hover 或 active 时有特效，而这些特效在移动端不支持，导致无法点击。可以通过修改 CSS 样式来解决。 2. JavaScript事件绑定问题：可能是因为 PC 端页面的...