JavaScript - PC端网页特效

已于 2022-03-27 21:10:06 修改
阅读量600 收藏 1
点赞数
文章标签： javascript 前端 html
于 2022-03-27 15:52:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52822043/article/details/123762199
版权

目录

1. 元素偏移量offset系列

1）offset系列属性

2）offset与style区别

2. 元素可视区client系列

1）client系列属性

​

2）立即执行函数

3. 元素滚动scroll系列

1）scroll系列属性

2）页面被卷去的头部兼容性解决方案

三大系列总结

​

mouseenter和mouseover的区别

mouseenter鼠标事件

4. 动画函数封装

1）动画实现原理

2）动画函数简单封装

3）动画函数给不同元素记录不同定时器

4）缓动动画效果原理

5） 缓动动画多个目标值之间移动

6）动画函数添加回调函数

7）动画函数封装到单独JS文件里面

5. 节流阀

1. 元素偏移量offset系列

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

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小（宽度高度）
  • 注意：返回的数值都不带单位

1）offset系列属性

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .father {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }
        .son {
            width: 50px;
            height: 50px;
            margin: 0 50px;
            background-color: purple;
        }
        .w {
            width: 200px;
            height: 200px;
            margin: auto;
            padding: 10px;
            border: 2px solid red;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        //父元素带有相对定位的为准，如果父元素没有定位则以body为准
        console.log(son.offsetTop);
        console.log(son.offsetLeft);

        var w = document.querySelector('.w');
        //得到元素的大小但是宽度、高度包含padding + border + width/height
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);

        //返回带有定位的父亲，如果父元素没有定位则返回body
        console.log(son.offsetParent);
        //返回的是最近一级的父亲，不管父元素有无定位
        console.log(son.parentNode);
    </script>
</body>

结果为：

2）offset与style区别

    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- style只能得到行内样式表中的样式值 -->
    <div class="box" style="width: 200px;"></div>
    <script>
        var box = document.querySelector('.box');
        //包含padding + border + width
        console.log(box.offsetWidth);
        //只包含width
        console.log(box.style.width);
        // 可以用style直接更改属性值
        box.style.width = '300px';
    </script>
</body>

 结果为：

2. 元素可视区client系列

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

1）client系列属性

2）立即执行函数

<body>
    <script>
        function fn() {
            console.log(1);
        }
        fn();
        //1.立即执行函数：不需要调用，能够立马执行的函数
        //2.写法：  (function() {})(); 或  (function(){} ());
        //3.可以传递参数
        //4.独立创建了一个作用域，里面所有的变量都是局部变量，所以不会有命名冲突的情况
        (function(a, b) {
            var num = 1;   //局部变量
            console.log(2);
            console.log(a + b);
        })(1, 2);

        (function(a, b) {
            console.log(3);
            console.log(a * b);
        }(1, 2));
    </script>
</body>

结果为：

3. 元素滚动scroll系列

scroll就是滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

1）scroll系列属性

2）页面被卷去的头部兼容性解决方案

三大系列总结

  1. offset系列经常用于获得元素位置 offsetLeft offsetTop
  2. client系列经常用于获取元素大小 clientWidth clientHeight
  3. scroll系列经常用于获取滚动距离  scrollTop scrollLeft
  4. 页面滚动的距离通过 window.pageXoffset 获得

mouseenter和mouseover的区别

mouseenter鼠标事件

  • 当鼠标移动到元素上时就会触发mouseenter时间
  • mouseover鼠标经过自身盒子会触发，经过子盒子还会触发；mouseenter只会经过自身盒子触发
  • 是因为mouseenter不会冒泡
  • 跟mouseenter搭配，鼠标离开mouseleave，同样不会冒泡
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        //mouseover会冒泡
        //当鼠标经过father时输出一次 1 
        //当鼠标经过son时通过冒泡 会再返回father 因此再输出一次 1
        father.addEventListener('mouseover',function() {
            console.log(1);
        })
    </script>
</body>

结果为：

    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        //mouseenter不会冒泡 
        //当鼠标经过father时输出一次 1 
        //当鼠标经过son时由于不会冒泡 因此不输出1
        father.addEventListener('mouseenter',function() {
            console.log(1);
        })
    </script>
</body>

结果为：

4. 动画函数封装

1）动画实现原理

核心原理：通过定时器setInterval()不断移动盒子位置

实现步骤：

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 此元素还需要添加定位，才能使用element.style.left
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1.获得盒子当前位置
        // 2.让盒子在当前位置加上1个移动距离
        // 3.利用定时器不断重复这个操作
        // 4.加一个结束定时器的条件
        // 5.此元素还需要添加定位，才能使用element.style.left
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if(div.offsetLeft >= 600) {
                //停止动画，本质：停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 5 + 'px';
        },30);
        
    </script>
</body>

结果为：

2）动画函数简单封装

函数需要传递2个参数，动画对象和移动到的距离。

    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        span {
            display: block;
            position: absolute;
            left: 0;
            top: 150px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <script>
        //简单动画函数封装 动画对象obj 目标位置target
        function animation(obj, target) {
            var timer = setInterval(function() {
            if(obj.offsetLeft >= target) {
                //停止动画，本质：停止定时器
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        },30);
        }
        
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        animation(div, 600);
        animation(span, 500);
    </script>
</body>

结果为：

3）动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器，可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。

    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        span {
            display: block;
            position: absolute;
            left: 0;
            top: 150px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <button>点击按钮之后span才走</button>
    <div></div>
    <span>span</span>
    <script>
        //var obj = {}
        //obj.name = '';
        //简单动画函数封装 动画对象obj 目标位置target
        function animation(obj, target) {
            //使得每个元素只有一个定时器
            //先清除以前的定时器，保证现在只有一个定时器在走
            clearInterval(obj.timer);

            //给不同的元素指定了不同的定时器    
            obj.timer = setInterval(function() {
                if(obj.offsetLeft >= target) {
                    //停止动画，本质：停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
        },30);
        }
        
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        animation(div, 600);
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            //当我们不断点击按钮，这个动画的移动速度会越来越快
            //解决方案：让元素只有一个定时器
            animation(span, 500);
        })
        
    </script>
</body>

结果为：

4）缓动动画效果原理

缓动动画就是让元素运动速度有所变化，最常见的事让速度慢慢停下来

匀速动画：盒子当前的位置 + 固定的值

缓动动画：盒子当前的位置 + 变化的值（目标值 - 现在的位置）/ 10

思路：

  1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
  2. 核心算法：（目标值 - 现在的位置）/ 10，作为每次移动的距离步长
  3. 停止的条件是：让当前盒子位置等于目标位置就停止计时器 
  4. 注意步长需要取整

    <style>
        span {
            display: block;
            position: absolute;
            left: 0;
            top: 150px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <button>点击按钮之后span才走</button>
    <span>span</span>
    <script>
        // 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
        // 2.核心算法：（目标值 - 现在的位置）/ 10，作为每次移动的距离步长
        // 3.停止的条件是：让当前盒子位置等于目标位置就停止计时器 
        function animation(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                //核心算法：（目标值 - 现在的位置）/ 10，作为每次移动的距离步长
                var step = Math.ceil((target - obj.offsetLeft) / 10);
                if(obj.offsetLeft == target) {
                    //停止动画，本质：停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            },15);
        }
        var btn = document.querySelector('button');
        var span = document.querySelector('span');
        btn.addEventListener('click', function() {
            animation(span, 600);
        })
    </script>
</body>

 结果为：

5） 缓动动画多个目标值之间移动

    <style>
        span {
            display: block;
            position: absolute;
            left: 0;
            top: 150px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <button class="btn500">点击按钮之后走到500px</button>
    <button class="btn800">点击按钮之后走到800px</button>
    <span>span</span>
    <script>
        // 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
        // 2.核心算法：（目标值 - 现在的位置）/ 10，作为每次移动的距离步长
        // 3.停止的条件是：让当前盒子位置等于目标位置就停止计时器 
        function animation(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                //核心算法：（目标值 - 现在的位置）/ 10，作为每次移动的距离步长
                var step = (target - obj.offsetLeft) / 10;
                //步长需要取整 8.1 -> 9  -8.1 -> -8 
                step = step > 0? Math.ceil(step) : Math.floor(step);
                if(obj.offsetLeft == target) {
                    //停止动画，本质：停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            },15);
        }
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');
        var span = document.querySelector('span');
        btn500.addEventListener('click', function() {
            animation(span, 500);
        });
        btn800.addEventListener('click', function() {
            animation(span, 800);
        });
    </script>
</body>

结果为：

6）动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完毕之后，再执行传进去的这个函数，这个过程就叫做回调。 

回调函数写在定时器结束里面

    <style>
        span {
            display: block;
            position: absolute;
            left: 0;
            top: 150px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <button class="btn500">点击按钮之后走到500px</button>
    <button class="btn800">点击按钮之后走到800px</button>
    <span>span</span>
    <script>
        function animation(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0? Math.ceil(step) : Math.floor(step);
                if(obj.offsetLeft == target) {
                    //停止动画，本质：停止定时器
                    clearInterval(obj.timer);
                    //在定时器结束里面添加回调函数
                    if(callback) {
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            },15);
        }
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');
        var span = document.querySelector('span');
        btn500.addEventListener('click', function() {
            animation(span, 500,function() {
                span.style.backgroundColor = 'skyblue';
            });
        });
        btn800.addEventListener('click', function() {
            animation(span, 800, function() {
                span.style.backgroundColor = 'red';
            });
        });
    </script>
</body>

结果为：

7）动画函数封装到单独JS文件里面

由于经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。

  1. 单独新建一个JS文件

5. 节流阀

防止轮播图按钮连续点击造成播放过快。

目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

核心实现思路：

  • 利用回调函数，添加一个变量来控制，锁住函数和解锁函数
  • 开始设置一个变量 var flag = true;
  • if(flag){ falg = false; do something }    //关闭水龙头
  • 利用回调函数，动画执行完毕，flag = true，打开水龙头

qq_52822043
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript——PC端网页特效
Scccc_的博客
03-08 770
JavaScript学习笔记
JavaScript——移动端网页特效
shhghvvh的博客
12-04 459
触屏事件对象1.3.1概述1.3.2常见的触摸事件对象1.4移动端拖动元素移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件），Android和IOS都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔）对屏幕或者触控板操作。 1.2.2.效果图
JS操作属性及其样式
von_ming的博客
06-28 259
js操作元素样式 1.元素.style.属性='属性值’ var div=document.getElementById('box') div.style.width='300px'; div.style.height='300px'; div.style.backgroundColor='red'; //css中有-的属性，在js中要改成驼峰命名法
让你一口变成一个胖子 BOM2
奶茶控
09-24 151
一、pc端网页特效 1、三大系列 元素偏移量offset系列 作用：使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等 注意： 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 返回的数值不带单位 节点也可以返回父亲 返回的是最近一级的父亲 不管父亲有没有定位 属性： 属性 说明 element.offsetParent 返回做为该元素带有定位的父级元素 如果父级都没有定位则返回body element.offsetTop 返回.
JavaScript-PC端网页特效
weixin_45768538的博客
05-22 258
（五）PC端网页特效 [!TIP] 在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。 1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 offset 系列常用属性： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(
滑动解锁-适配移动端PC端
06-01
这种技术通常结合JavaScript（js）和jQuery库来实现，因此在"滑动解锁-适配移动端PC端"的场景中，我们需要关注的主要知识点包括JavaScript编程基础、jQuery库的应用以及响应式设计。 首先，JavaScript是网页动态...
html5手机端网页电子书翻页特效.zip
07-04
总的来说，HTML5手机端网页电子书翻页特效是一项结合了HTML5、CSS3和JavaScript技术的创新应用，它提供了富有互动性和真实感的阅读体验，适应了多设备阅读的需求。通过合理的设计和优化，这种特效能够在保证性能的...
WEB网页radio按钮美化仿开关效果二合一jquery特效
05-22
WEB网页radio按钮美化仿开关效果二合一 1.利用jQuery技术支持...2.适用于PC端网页或手机端网页表单美化应用 3.实用性强，适合网页前端设计师使用 4.资源提供CSDN供下载，用于学习和交流或商用，切勿作为非法用途使用！
html5手机端pc端兼容网页电子书翻页特效代码
05-17
"html5手机端pc端兼容网页电子书翻页特效代码"这个项目正体现了这一特性，它旨在实现一个既能在个人电脑（PC）上运行，也能在移动设备（如手机）上流畅展示的电子书翻页效果。这个特效代码利用了HTML5的多媒体支持、...
支持PC端手机端幻灯片代码.zip
07-05
本压缩包"支持PC端手机端幻灯片代码.zip"提供了适用于个人电脑及手机设备的幻灯片实现方案，特别强调了对移动触摸和鼠标交互的支持，以及带有进度条的自动播放功能。下面将深入探讨这些关键知识点。 1. **跨平台...
Webkit简介以及工作流程
读心悦
07-10 311
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 194
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 167
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1273
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 346
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 245
系列文章之：如何在 TypeScript 中导入导出局部类型
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 113
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
React:useState和useEffect
最新发布
读万卷书 行万里路
07-12 411
最近因为想要开发一个简单的应用才开始接触React。但是并没有系统学习React，所以这篇博客可能会写的不够专业。
javascript网页设计期末大作业
11-06
JavaScript网页设计期末大作业是一个综合性的项目，要求学生运用所学的JavaScript知识和网页设计技巧，设计并实现一个功能完善、界面美观的网页。 首先，我会选择一个主题或者业务场景作为项目的基础，比如电子商务...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值