网页特效

最新推荐文章于 2024-07-17 23:28:09 发布

一麻袋小猫

最新推荐文章于 2024-07-17 23:28:09 发布

阅读量308

点赞数

分类专栏： JavaScript WebAPI 文章标签： javascript

本文链接：https://blog.csdn.net/Zmongo/article/details/104554612

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

WebAPI

8 篇文章 0 订阅

订阅专栏

元素偏移量 offset 系列

offset 就是偏移量，可以动态的得到该元素位置，大小等
获得元素距离带有定位的父元素的位置；获得元素自身的大小（宽度，高度）。注意：返回的数值都不带单位
offset常见属性

element.offsetLeft 以带有定位的父亲为准，如果没有父亲或者父亲没有定位则以body为准
element.offertWidth 包括，宽度，边框，padding 值
element.offsetParent 返回的是带有定位的父亲，如果直系父亲没有定位则继续往上找，直到找到有定位的父亲。如果都没有定位，则返回的是Body
element.parentNode 返回的是直系父亲，也就是最近一级的父亲
offset 与 style 的区别

		console.log(son.offsetWidth);
        console.log(son.style.width);

offset系列是只读属性，不能改变，用于获取。而style是可读写属性，用于改变值和内容

获取鼠标在盒子中的坐标

先获取鼠标在页面的坐标，减去盒子在页面的坐标

			var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

模态框拖拽案例

仿京东放大镜案例
10211927-10211929

遇到了滑铁卢，没有成功，周末再重写

元素可视区 client系列

client 是客户端
client.width 不包含边框
立即执行函数,不需要调用立即可以执行
创建了一个独立的作用域，避免了命名冲突问题：
（1）(function() {})() 第二个小括号可以看做是调用函数，也可以传递参数进来
（2）(function() {} ()); 第二个小括号可以看做是调用函数，也可以传递参数进来

resize 事件：当页面尺寸大小发生变化的时候
pageshow：是我们重新加载页面触发的事件
load事件与pageshow页面的区别：

pageshow照顾了大多数浏览器，更安全

元素滚动scroll系列

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

注意：元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset
scroll 滚动事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主题部分</div>
    <script>
        //获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop;
        //当侧边栏固定定位后 的值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        //获取main主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        //页面滚动事件
        document.addEventListener('scroll', function() {
            //当页面被卷去的头部大于等172 侧边栏改为固定定位
            //这个172 可以用bannerTop
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';

            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';

            } else {
                goBack.style.display = 'none';
            }
        })
    </script>
</body>

</html>

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

三大系列总结

在这里插入图片描述

mouseenter和mouseover的区别

在这里插入图片描述

动画函数封装

核心原理：通过定时器setInterval(不断移动盒子位置)
//动画原理
var div = document.querySelector(‘div’);
//利用定时器不断重复这个操作

 var timer = setInterval(function() {
     if (div.offsetLeft >= 400) { //获取元素位置 用offsetLeft
         //停止动画   ->停止定时器
         clearInterval(timer);  //停止定时器
     }
     div.style.left = div.offsetLeft + 1 + 'px';
 }, 30);

动画函数的封装
注意函数需要传递2个参数，动画对象和移动到的距离
function animate(obj,target) {
}
动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要 var 声明定时器，就要开辟一个新的内存空间。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）
原理是：利用js是一门动态语言，可以很方便的给当前对象添加属性。
它的执行原理：
函数定时器的Bug
当不断调用定时器时，这个元素的速度会越来越快，因为开启了太多的定时器。
解决方案是：让我们元素只有一个定时器执行
具体执行方案：先清除以前的定时器，只保留当前的一个定时器执行
在函数的第一句写上：clearInterval(obj.timer);
缓动动画
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：让盒子移动的距离慢慢变小，速度就会慢慢下来
缓动动画公式：（目标值-现在的位置） / 10 （10可以改变，多少都可以）做为每次移动的距离步长
var step = (target - obj.offsetLeft) / 10;
现在的位置用 offsetLeft 获取

 //函数封装
        function animate(obj, target) {
            var timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                if (obj.offsetLeft == target) { //获取元素位置 用offsetLeft
                    //停止动画   ->停止定时器
                    clearInterval(timer); //停止定时器
                }
                //步长公式：（目标值 - 现在的位置）/ 10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        //动画原理
        var div = document.querySelector('div');
        animate(div, 400);
        //利用定时器 不断重复这个操作

*****为防止走不到头，就要防止步长为小数，向上取整就好，所以为： var step =Math.ceil( (target - obj.offsetLeft) / 10);
==第二个问题== 后退的时候，如果步长是正值向上取整，如果是负值向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);

动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调
回调函数写到定时器结束里面

if (obj.offsetLeft == target) { //获取元素位置 用offsetLeft
                    //停止动画   ->停止定时器
                    clearInterval(timer); //停止定时器
                    //回调函数写到定时器结束里面
                    if (callback) {
                        callback();
                    }
                }

一麻袋小猫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页特效

元素偏移量 offset 系列offset 就是偏移量，可以动态的得到该元素位置，大小等获得元素距离带有定位的父元素的位置；获得元素自身的大小（宽度，高度）。注意：返回的数值都不带单位offset常见属性element.offsetLeft 以带有定位的父亲为准，如果没有父亲或者父亲没有定位则以body为准element.offertWidth 包括，宽度，边框，paddi...
复制链接

扫一扫

专栏目录