JS11-scroll相关属性和缓动动画

news2025/2/27 2:10:04

scroll 相关属性

window.onscroll() 方法

当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）

如果你需要做滚动监听，可以使用这个方法。

我们来看看和 scroll 相关的有哪些属性。

1、ScrollWidth 和 scrollHeight

ScrollWidth 和 scrollHeight：获取元素整个滚动区域的宽、高。包括 width 和 padding，不包括 border和margin。

注意：

scrollHeight 的特点是：如果内容超出了盒子，scrollHeight为内容的高（包括超出的内容）；如果不超出，scrollHeight为盒子本身的高度。ScrollWidth同理。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 3px;
            border: 8px solid red;
        }
    </style>
</head>
<body>

<div class="box">
    静，能寒窗苦守；动，能点石成金。
    静，能寒窗苦守；动，能点石成金。
    静，能寒窗苦守；动，能点石成金。
    静，能寒窗苦守；动，能点石成金。
    静，能寒窗苦守；动，能点石成金。
    静，能寒窗苦守；动，能点石成金。
</div>
<script>

    var div = document.getElementsByTagName("div")[0];

    // `scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。
    //IE8以下（不包括IE8），为盒子本身内容的高度。
    console.log(div.scrollWidth);
    console.log(div.scrollHeight);

</script>
</body>
</html>

打印结果：

2、scrollTop 和 scrollLeft

  • scrollLeft：获取水平滚动条滚动的距离。

  • scrollTop：获取垂直滚动条滚动的距离。

实战经验：

当某个元素满足scrollHeight - scrollTop == clientHeight时，说明垂直滚动条滚动到底了。

当某个元素满足scrollWidth - scrollLeft == clientWidth时，说明水平滚动条滚动到底了。

这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“长长的活动规则”，才允许触发接下来的表单操作。

scrollTop 的兼容性

如果要获取页面滚动的距离，scrollTop 这个属性的写法要注意兼容性，如下。

（1）如果文档没有 DTD 声明，写法为：

    document.body.scrollTop

在没有 DTD 声明的情况下，要求是这种写法，chrome浏览器才能认出来。

（2）如果文档有 DTD 声明，写法为：

   document.documentElement.scrollTop

在有 DTD 声明的情况下，要求是这种写法，IE6、7、8才能认出来。

综合上面这两个，就诞生了一种兼容性的写法：

    document.body.scrollTop || document.documentElement.scrollTop //方式一

    document.body.scrollTop + document.documentElement.scrollTop  //方式二

另外还有一种兼容性的写法：window.pageYOffset 和 window.pageXOffset。这种写法无视DTD的声明。这种写法支持的浏览器版本是：火狐/谷歌/ie9+。

综合上面的几种写法，为了兼容，不管有没有DTD，最终版的兼容性写法：

    window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

判断是否已经 DTD 声明

方法如下：

    document.compatMode === "CSS1Compat"   // 已声明
    document.compatMode === "BackCompat"   // 未声明

将 scrollTop 和 scrollLeft 进行封装

这里，我们将 scrollTop 和 scrollLeft 封装为一个方法，名叫scroll()，返回值为 一个对象。以后就直接调用scroll().top 和 scroll().left就好。

代码实现：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 6000px;
            width: 5000px;
        }
    </style>
</head>
<body>

<script>

    //需求：封装一个兼容的scroll().返回的是对象，用scroll().top获取scrollTop，用scroll().left获取scrollLeft

    window.onscroll = function () {
//        var myScroll = scroll();
//        myScroll.top;
        console.log(scroll().top);
        console.log(scroll().left);
    }

    //函数封装（简单封装，实际工作使用）
    function scroll() {
        return { //此函数的返回值是对象
            left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            right: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>
</body>
</html>

上方代码中，函数定义的那部分就是要封装的代码。

另外还有一种比较麻烦的封装方式：（仅供参考）

function scroll() {  // 开始封装自己的scrollTop
    if(window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

获取 html 文档的方法

获取title、body、head、html标签的方法如下：

  • document.title 文档标题；

  • document.head 文档的头标签

  • document.body 文档的body标签；

  • document.documentElement （这个很重要）。

document.documentElement表示文档的html标签。也就是说，基本结构当中的 html 标签而是通过document.documentElement访问的，并不是通过 document.html 去访问的。

scrollTop 举例：固定导航栏

完整版代码实现：

（1）index.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;

        }

        #Q-nav1 {
            overflow: hidden;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

    <!--引入工具js-->
    <script src="tools.js"></script>
    <script>
        window.onload = function () {
            //需求1：当我们滚动界面的时候，被卷曲的头部如果超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            //需求2：当我们滚动界面的时候，被卷曲的头部如果小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed

            //1.老三步。
            var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");

            window.onscroll = function () {
                //2.判断 ，被卷曲的头部的大小
                if (scroll().top > height) {
                    //3.满足条件添加类，否则删除类
                    middle.className += " fixed";
                    //第二个盒子也要占位置，为了避免重叠，我们给第三个盒子一个上padding的空间，把这个空间留给第二个盒子
                    main.style.paddingTop = middle.offsetHeight + "px";
                } else {
                    middle.className = "";
                    //清零
                    main.style.paddingTop = 0;
                }
            }

        }
    </script>
</head>
<body>
<div class="top" id="top">
    <img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
    <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
    <img src="images/main.png" alt=""/>
</div>
</body>
</html>

上方代码中，有一个技巧：

main.style.paddingTop = middle.offsetHeight + "px";

仔细看注释就好。

（2）tools.js：

/**
 * Created by smyhvae on 2018/02/03.
 */
function scroll() {  // 开始封装自己的scrollTop
    if (window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if (document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

缓动动画

三个函数

缓慢动画里，我们要用到三个函数，这里先列出来：

  • Math.ceil() 向上取整

  • Math.floor() 向下取整

  • Math.round(); 四舍五入

缓动动画的原理

缓动动画的原理就是：在移动的过程中，步长越来越小。

设置步长为：目标位置和盒子当前位置的十分之一。用公式表达，即：

    盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；

代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<button>运动到left = 400px</button>
<div></div>

<script>

    var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];

    btn.onclick = function () {
        setInterval(function () {
            //动画原理：盒子未来的位置 = 盒子当前的位置+步长
            div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";
        }, 30);
    }

</script>
</body>
</html>

效果：

缓慢动画的封装（解决四舍五入的问题）

我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：

原因是：JS在取整的运算时，进行了四舍五入。

我们把打印396.04px这个left值打印出来看看：

我么发现，通过div.style.left获取的值是精确的，通过div.offsetLeft获取的left值会进行四舍五入。

此时，我们就要用到取整的函数了。

通过对缓动动画进行封装，完整版的代码实现如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div></div>

<script>

    var btn = document.getElementsByTagName("button");
    var div = document.getElementsByTagName("div")[0];

    btn[0].onclick = function () {
        animate(div, 200);
    }

    btn[1].onclick = function () {
        animate(div, 400);
    }

    //缓动动画封装
    function animate(ele, target) {
        //要用定时器，先清定时器
        //一个萝卜一个坑儿，一个元素对应一个定时器
        clearInterval(ele.timer);
        //定义定时器
        ele.timer = setInterval(function () {
            //获取步长
            //步长应该是越来越小的，缓动的算法。
            var step = (target - ele.offsetLeft) / 10;
            //对步长进行二次加工(大于0向上取整,小于0向下取整)
            //达到的效果是：最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置。
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //动画原理： 目标位置 = 当前位置 + 步长
            ele.style.left = ele.offsetLeft + step + "px";
            console.log(step);
            //检测缓动动画有没有停止
            console.log("smyhvae");
            if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
                //处理小数赋值
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        }, 30);
    }

</script>
</body>
</html>

实现效果：

window.scrollTo()方法举例：返回到顶部小火箭

（1）index.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }

        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="tools.js"></script>
    <script>
        window.onload = function () {
            //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
            //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
            //      技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
            //步骤：
            //1.老三步
            var img = document.getElementsByTagName("img")[0];
            window.onscroll = function () {
                //被卷去的距离大于200显示小火箭，否则隐藏
                //2.显示隐藏小火箭
                if (scroll().top > 1000) {
                    img.style.display = "block";
                } else {
                    img.style.display = "none";
                }
                //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
                leader = scroll().top;
            }
            //3.缓动跳转到页面最顶端（利用我们的缓动动画）
            var timer = null;
            var target = 0; //目标位置
            var leader = 0; //显示区域自身的位置
            img.onclick = function () {
                //技术点：window.scrollTo(0,0);
                //要用定时器，先清定时器
                clearInterval(timer);
                timer = setInterval(function () {
                    //获取步长
                    var step = (target - leader) / 10;
                    //二次处理步长
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step; //往上移动的过程中，step是负数。当前位置减去步长，就等于下一步的位置。
                    //显示区域移动
                    window.scrollTo(0, leader);
                    //清除定时器
                    if (leader === 0) {
                        clearInterval(timer);
                    }
                }, 25);
            }
        }
    </script>
</head>
<body>
<img src="images/Top.jpg"/>
<div>
    我是最顶端.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>

</div>
</body>
</html>

（2）tools.js:

/**
 * Created by smyhvae on 2015/12/8.
 */

//函数：获取scrollTop和scrollLeft的值
function scroll() {  // 开始封装自己的scrollTop
    if (window.pageYOffset != null) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if (document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

实现效果：

y smyhvae on 2015/12/8.
*/

//函数：获取scrollTop和scrollLeft的值
function scroll() { // 开始封装自己的scrollTop
if (window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode === “CSS1Compat”) { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}


实现效果：

![](https://img-blog.csdnimg.cn/img_convert/13ea851333e9bf557702f1d0da4c75f2.gif)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1528601.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用C语言打造自己的Unix风格ls命令

用C语言打造自己的Unix风格ls命令

在Unix或类Unix操作系统中&#xff0c;ls是一个非常基础且实用的命令&#xff0c;它用于列出当前目录或指定目录下的文件和子目录。下面&#xff0c;我们将通过C语言编写一个简化的ls命令&#xff0c;展示如何利用dirent.h头文件提供的函数接口实现这一功能。 #include "…
阅读更多...
开始喜欢上了runnergo，JMeter out了?

开始喜欢上了runnergo，JMeter out了?

RunnerGo是一款基于Go语言、国产自研的测试平台。它支持高并发、分布式性能测试。和JMeter不一样的是&#xff0c;它采用了B/S架构&#xff0c;更灵活、更方便。而且&#xff0c;除了API测试和性能测试&#xff0c;RunnerGo还加上了UI测试和项目管理等实用功能&#xff0c;让测…
阅读更多...
Jenkins Pipeline中when的用法

Jenkins Pipeline中when的用法

目录 概述内置条件branchbuildingTagchangesetchangeRequestequalsexpressiontriggeredBytagenvironmentnotallOfanyOf 在进入 stage 的 agent 前评估 whenbeforeAgentbeforeInputbeforeOptions 示例单一条件、声明性流水线多条件、声明式管道嵌套条件&#xff08;与前面的示例…
阅读更多...
综合实验---Web---进阶版

综合实验---Web---进阶版

目录 实验配置&#xff1a; 1.PHP调整主配置文件时&#xff0c;修改文件内容 1.原内容调整(在编译安装的情况下) 2.调整如下 3.没有调整的&#xff0c;根据之前配置就行 2.配置Nginx支持PHP解析 1.原内容如下 2.调整如下 3.验证PHP测试页 1.原内容如下 2.调整如下 4…
阅读更多...
U盘安装Linux系统报dracut-initqueue错误，解决方案

U盘安装Linux系统报dracut-initqueue错误，解决方案

U盘安装Linux系统报dracut-initqueue错误&#xff0c;是因为系统所在U盘路径不对&#xff0c;需要修改 解决方法&#xff1a; dracut:/# cd dev >dracut:/# ls |grep sdb 查看你的u盘是哪个一般是sdbX,X是一个数字&#xff0c;也有可能是sda等&#xff0c;如果上边都不对…
阅读更多...
C语言数据结构基础——二叉树学习笔记（二）topk问题

C语言数据结构基础——二叉树学习笔记（二）topk问题

1.top-k问题 1.1思路分析 TOP-K 问题&#xff1a;即求数据结合中前 K 个最大的元素或者最小的元素&#xff0c;一般情况下数据量都比较大 。 比如&#xff1a;专业前 10 名、世界 500 强、富豪榜、游戏中前 100 的活跃玩家等。 对于 Top-K 问题&#xff0c;能想到的最简单直…
阅读更多...
词令微信小程序怎么添加到我的小程序？

词令微信小程序怎么添加到我的小程序？

微信小程序怎么添加到我的小程序&#xff1f; 1、找到并打开要添加的小程序&#xff1b; 2、打开小程序后&#xff0c;点击右上角的「…」 3、点击后底部弹窗更多选项&#xff0c;请找到并点击「添加到我的小程序」&#xff1b; 4、添加成功后&#xff0c;就可以在首页下拉我的…
阅读更多...
代码随想录算法训练营第二十七天 |131.分割回文串，一些思考

代码随想录算法训练营第二十七天 |131.分割回文串，一些思考

实际上&#xff0c;分割子集问题也是组合问题 &#xff08;图源代码随想录网站&#xff09; 一个套路&#xff0c;也就是说&#xff0c;每次递归函数参数列表传入start的时候&#xff0c;选中的元素相当于是在最后面划了一条分割线 回文子串的判断剪枝操作就很简单了&#xf…
阅读更多...
AIGC元年大模型发展现状手册

AIGC元年大模型发展现状手册

零、AIGC大模型概览 AIGC大模型在人工智能领域取得了重大突破&#xff0c;涵盖了LLM大模型、多模态大模型、图像生成大模型以及视频生成大模型等四种类型。这些模型不仅拓宽了人工智能的应用范围&#xff0c;也提升了其处理复杂任务的能力。a.) LLM大模型通过深度学习和自然语…
阅读更多...
什么是闭包？闭包的优缺点？闭包的应用场景？

什么是闭包？闭包的优缺点？闭包的应用场景？

什么是闭包&#xff1f; 闭包是指有权访问另外一个函数作用域中的变量的函数。 闭包形成的必要条件&#xff1a; 函数嵌套内部函数使用外部函数的变量内部函数作为返回值 举个栗子&#xff1a;实现每隔1s递增打印数字 使用闭包实现 for(var i1; i<5; i) {(function(i) {se…
阅读更多...
Cointelegraph 策略主管 JASON CHOI确认出席Hack.Summit() 2024区块链开发者大会

Cointelegraph 策略主管 JASON CHOI确认出席Hack.Summit() 2024区块链开发者大会

随着区块链技术的蓬勃发展和广泛应用&#xff0c;一场备受瞩目的盛会即将拉开帷幕。Hack.Summit() 2024区块链开发者大会&#xff0c;由Hack VC主办&#xff0c;AltLayer和Berachain协办&#xff0c;Solana、The Graph、Blockchain Academy、ScalingX、0G、SNZ和数码港等机构的…
阅读更多...
Python——模块

Python——模块

自定义模块 module_exercise.py文件 data 100 def func01():print("func01执行喽") class Myclass:def func02(self):print("func02执行喽")classmethoddef func03(cls):print("func03执行喽") exercise.py文件 # 调用方法1&#xff1a;&quo…
阅读更多...
Unity2D实现鼠标拖动物体移动（简单好抄）

Unity2D实现鼠标拖动物体移动（简单好抄）

1.新建脚本&#xff0c;并将脚本拖到你想要拖动的物体上即可 using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; using UnityEngine;public class text : MonoBehaviour {private Vector3 offset;public int x 1;void OnMouseDown(…
阅读更多...
入门：vue使用Echarts绘制地图的步骤

入门：vue使用Echarts绘制地图的步骤

匠心接单中...8年前端开发和UI设计接单经验&#xff0c;完工项目1000&#xff0c;持续为友友们分享有价值、有见地的干货观点&#xff0c;有业务需求的老铁&#xff0c;欢迎关注发私信。 安装echarts和echarts-map插件 npm install echarts --save npm install echarts-map --…
阅读更多...
深入理解mysql 从入门到精通

深入理解mysql 从入门到精通

1. MySQL结构 由下图可得MySQL的体系构架划分为&#xff1a;1.网络接入层 2.服务层 3.存储引擎层 4.文件系统层 1.网络接入层 提供了应用程序接入MySQL服务的接口。客户端与服务端建立连接&#xff0c;客户端发送SQL到服务端&#xff0c;Java中通过JDBC来实现连接数据库。 …
阅读更多...
YOLOV5 部署：基于web网页的目标检测（本地、云端均可）

YOLOV5 部署：基于web网页的目标检测（本地、云端均可）

1、前言 YOLOV5推理的代码很复杂，大多数都是要通过命令行传入参数进行推理，不仅麻烦而且小白不便使用。 本章介绍的web推理，仅仅需要十几行代码就能实现本地推理，并且只需要更改单个参数就可以很方便的部署云端，外网也可以随时的使用 之前文章介绍了QT的可视化推理界面，…
阅读更多...
代码随想录day25（2）二叉树：验证二叉搜索树（leetcode98）

代码随想录day25（2）二叉树：验证二叉搜索树（leetcode98）

题目要求&#xff1a;给定一个二叉树&#xff0c;判断其是否是一个有效的二叉搜索树。 思路&#xff1a;首先对于二叉搜索树&#xff0c;它的中序遍历是有序的。最简单的想法就是将二叉搜索树转成一个数组&#xff0c;验证数组是否有序就可以&#xff08;二叉搜索树中没有重复…
阅读更多...
ResNet模型结构

ResNet模型结构

一、ResNet网路模型 ResNet模型由堆叠残差结构所得到 ResNet34 实线和虚线的残差结构不同&#xff1a; 虚线是conv2_x&#xff0c;conv3_x&#xff0c;conv4_x&#xff0c;conv4_x&#xff0c;第一层的残差结构。要将上一层的残差特征矩阵的尺寸和深度调整为当前层所需要的 二…
阅读更多...
Aigtek超声功率放大器产品介绍

Aigtek超声功率放大器产品介绍

超声功率放大器是一种特殊类型的功率放大器&#xff0c;专门用于增强和放大超声信号的功率。它在医疗、工业和科学领域中得到广泛应用。 一、超声功率放大器的基本概述 超声功率放大器是一种能够将低功率超声信号放大到更高功率水平的设备。它是超声系统的关键组成部分&#xf…
阅读更多...
OPPO 后端二面，凉凉。。。

OPPO 后端二面，凉凉。。。

美众议院通过 TikTok 法案 之前我们讲了 老美要求字节跳动在 165 天内剥离短视频应用 TikTok&#xff0c;当时的最新进度是 TikTok 给 1.7 亿美国用户发弹窗&#xff0c;发动用户群众给国会打电话进行抗议。 但显然这点力度的抗议并不会造成什么实质影响。 昨晚&#xff0c;美国…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023