JavaScript学习笔记16

最新推荐文章于 2024-05-21 19:09:41 发布
最新推荐文章于 2024-05-21 19:09:41 发布
阅读量280 收藏 1
点赞数
分类专栏： JS 文章标签： javascript 学习 前端
原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha/?p=317&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=720efe45336d5eabd781d1ed31bafef8
版权

  • 目录

     拖动模态框案例

    触发事件是鼠标按下mousedown，鼠标移动：mousemove，鼠标松开：mouseup

    京东放大镜效果显示隐藏遮挡层和大盒子案例

    鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能

    当页面加载完毕再执行里面的JS代码：window.addEventListener('load' ,function(){})

    引入外部JS文件：

    鼠标经过：mouseover；鼠标离开：mouseout

    黄色的遮挡层跟随鼠标功能

    移动黄色遮挡层，大图片跟随移动功能

    大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离

    遮挡层最大移动距离：var maskMax = preview-img.offsetWidth - mask.offsetWidth

    大图片的移动距离 ：var bigImg = document.querySelect('.bigImg');  var bigImg = bigImg.offsetWidth - big.offsetWidth;

    client获取元素可视区相关信息

    淘宝flexible分析JS

    立即执行函数

    (function( ){ })( );

    (function( ){ }( ));

    devicePixelRatio物理像素比

    setBodyFontSize设置body字体大小

    DOMContentLoaded页面主要的DOM元素加载完毕再去设置字体大小   

    元素scroll系列属性

    element.scrollTop返回被卷上去的上侧

    element.scrollWidth包含padding但是不包含border

    仿淘宝侧边栏案例

  •  拖动模态框案例

    • 点击弹出层，模态框和遮挡层就会显现出来display：block;

    • 点击关闭按钮，模态框和遮盖层就会隐藏起来display:none;

    • 在页面中拖拽的原理:鼠标按下并且移动，之后松开鼠标

    • 触发事件是鼠标按下mousedown，鼠标移动：mousemove，鼠标松开：mouseup

    • 拖拽过程：鼠标移动过程中，获得最新的赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了

    • 鼠标按下触发的事件源是最上面一行，就是id为title

    • 鼠标的坐标减去鼠标在盒子内的坐标，才是模态框的真正位置

    • 鼠标按下，我们要得到鼠标在盒子的坐标

    • 鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。

    • 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除

    • 案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .btn {
            display: block;
            font-size: 20px;
            margin: 20px auto;
            padding: 10px 20px;
            border: 0;
        }

        .login {
            position: fixed;
            top: 50%;
            left: 50%;
            display: none;
            width: 500px;
            text-align: center;
            border: 1px solid skyblue;
            background-color: #fff;
            transform: translate(-50%, -50%);
        }

        h3 {
            height: 50px;
            line-height: 50px;
            background-color: skyblue;
        }

        table {
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-collapse: collapse;
            border-spacing: 0;
            text-align: left;
            margin-top: 30px;
        }

        table tr td:nth-child(1) {
            width: 100px;
            text-align: right;
        }

        tr {
            height: 70px;
        }

        input {
            margin-left: 10px;
            outline: none;
            width: 300px;
            height: 30px;
        }

        .button {
            width: 200px;
            height: 50px;
            line-height: 50px;
            background-color: skyblue;
            margin: 30px auto;
            border: 0;
            font-size: 20px;
        }

        span {
            position: absolute;
            right: 0;
            top: 0;
            display: inline-block;
            width: 30px;
            height: 30px;
            font-size: 25px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button class="btn">点击弹出登录框</button>
    <div class="login">
        <h3 class="title">登录界面</h3>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password"></td>
            </tr>
        </table>
        <button class="button">登录</button>
        <span>×</span>
    </div>
    <script>
        //  点击 btn 按钮,显示登录界面,同时body改变背景颜色
        // 鼠标拖动 登录框 h3(标题区) 登录框随鼠标移动
        // 1.获取元素
        var btn = document.querySelector('.btn');
        var login = document.querySelector('.login');
        var title = document.querySelector('.title');
        var span = document.querySelector('span');
        // 2.绑定事件
        // 点击 btn 显示登录框,改变body背景颜色
        btn.addEventListener('click', function (e) {
            login.style.display = 'block';
            document.body.style.backgroundColor = '#ccc';
        });
        // 点击 span(关闭) 隐藏登录框 恢复body背景颜色
        span.addEventListener('click', function (e) {
            login.style.display = 'none';
            document.body.style.backgroundColor = '#fff';
        });

        // 鼠标点击拖动 h3(标题区) ..登录框随着鼠标走
        title.addEventListener('mousedown', function (e) {
            // e.pageX e.pageY   鼠标所在页面的位置
            // login.offsetLeft login.offsetTop 登录框离页面的左距离/上距离
            var loginLeft = e.pageX - login.offsetLeft; // 鼠标离登录框左距离
            var loginTop = e.pageY - login.offsetTop; // 鼠标离登录框左距离
            document.addEventListener('mousemove', move);

            function move(e) {
                login.style.left = e.pageX - loginLeft + 'px';
                login.style.top = e.pageY - loginTop + 'px';
            }
            document.addEventListener('mouseup', function (e) {
                document.removeEventListener('mousemove', move);
            });
        });
    </script>
</body>

</html>

    • 结果

  • 京东放大镜效果显示隐藏遮挡层和大盒子案例

    • 整个案例可以分为三个功能板块

    • 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能

      • 当页面加载完毕再执行里面的JS代码：window.addEventListener('load' ,function(){})

      • 引入外部JS文件：<script src="js/detail.js"></script>

      • 鼠标经过：mouseover；鼠标离开：mouseout

    • 黄色的遮挡层跟随鼠标功能

      • 黄色遮挡层跟随鼠标功能

      • 把鼠标在盒子内的坐标给黄色遮挡层

      • 用到鼠标移动事件，将获得鼠标在盒子的坐标，之后吧数值给遮挡层作为left和top值

    • 移动黄色遮挡层，大图片跟随移动功能

      • 大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离

      • 遮挡层最大移动距离：var maskMax = preview-img.offsetWidth - mask.offsetWidth

      • 大图片的移动距离 ：var bigImg = document.querySelect('.bigImg');  var bigImg = bigImg.offsetWidth - big.offsetWidth;

      • 案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            top: 50px;
            left: 50px;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }

        .small {
            width: 300px;
        }

        .small_box {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: yellow;
            opacity: .3;
        }

        .big_box {
            display: none;
            position: absolute;
            top: 0;
            left: 330px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .bigImg {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/maomi.jpg" alt="" class="small">
        <div class="small_box"></div>
        <div class="big_box">
            <img src="images/maomi.jpg" alt="" class="bigImg">
        </div>
    </div>
    <script>
        // 鼠标移动到 box 盒子时..显示 small_box盒子 和 big_box 盒子,鼠标移出则隐藏
        // small_box盒子 跟随鼠标移动而移动,同时 big_box 里面的大图片,显示对应图片区域
        // 1.获取元素
        var box = document.querySelector('.box');
        var small_box = document.querySelector('.small_box');
        var big_box = document.querySelector('.big_box');
        var bigImg = document.querySelector('.bigImg');
        // 2.绑定事件
        // 3.鼠标经过 box盒子..显示 small_box盒子 和 big_box盒子
        box.addEventListener('mousemove', function (e) {
            small_box.style.display = 'block';
            big_box.style.display = 'block';
        });
        // 4.鼠标离开 box盒子..隐藏 small_box盒子 和 big_box盒子
        box.addEventListener('mouseout', function (e) {
            small_box.style.display = 'none';
            big_box.style.display = 'none';
        });
        // 5.让 small_box盒子 跟随鼠标移动
        box.addEventListener('mousemove', function (e) {
            // e.pageX  e.pageY  鼠标在页面的位置
            var x = e.pageX - box.offsetLeft; // 鼠标离 box盒子 左边的距离
            var y = e.pageY - box.offsetTop; // 鼠标离 box盒子 顶部的距离
            // 鼠标在 small_box盒子 内居中
            var small_box_x = (x - small_box.offsetWidth / 2);
            var small_box_y = (y - small_box.offsetHeight / 2);
            // small_box盒子 最大移动距离
            var small_box_max = box.offsetWidth - small_box.offsetWidth;//小盒子最大不能超过=盒子宽-小盒子宽
            // 限制 small_box盒子 的移动范围 限制小盒子在盒子内部不超出盒子
            if (small_box_x <= 0) {//当小盒子坐标小于0，就赋值为0
                small_box_x = 0;
            } else if (small_box_x >= small_box_max) {//当小盒子坐标大于最大移动距离，就赋值最大值
                small_box_x = small_box_max;
            }
            if (small_box_y <= 0) {
                small_box_y = 0;
            } else if (small_box_y >= small_box_max) {
                small_box_y = small_box_max;
            }
            small_box.style.left = small_box_x + 'px';
            small_box.style.top = small_box_y + 'px';

            // 6.大盒子图片跟随小黄盒子所在图片位置的移动而移动,按照比例移动
            // 大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层的最大移动距离
            // 大图片最大移动距离
            var bigImgMax = bigImg.offsetWidth - big_box.offsetWidth;
            // 大图片移动距离
            var bigImgX = small_box_x * bigImgMax / small_box_max;
            var bigImgY = small_box_y * bigImgMax / small_box_max;
            bigImg.style.left = -bigImgX + 'px';
            bigImg.style.top = -bigImgY + 'px';
        });
    </script>
</body>

</html>

      • 结果

         

  • client获取元素可视区相关信息

    • 不包含边框但是包含padding

  • 淘宝flexible分析JS

    • 立即执行函数

      • 独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况

      • 不需要调用，立马可以执行的函数

      • 常见写法：

        • (function( ){ })( );

        • (function( ){ }( ));

    • devicePixelRatio物理像素比

    • setBodyFontSize设置body字体大小

      • DOMContentLoaded页面主要的DOM元素加载完毕再去设置字体大小   

    • 元素scroll系列属性

      • element.scrollTop返回被卷上去的上侧

      • element.scrollWidth包含padding但是不包含border

    • 仿淘宝侧边栏案例

正在加载jjj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
Javascript入门学习笔记
weixin_61370021的博客
04-27 4529
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记16-if嵌套
Anthony_tester的博客
04-28 1392
前面介绍了if-else语句，本文来学习JavaScript中if嵌套。生活中，我们有时候需要根据两个或者两个以上的条件去判断一个事情。例如，假如事件A，在事件A的基础上又假如事件B，那么这个结果是一种情况，否则结果是别的情况。我们通过一个实例来解决这个问题。 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript学习笔记
学习笔记
03-17 1964
JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 JavaScript：直接写入 HTML 输出流 document.write("<h1>这是一个标题</h1>"); 效果如图 只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文
【javascript笔记】javascript学习笔记（一）
m0_61097007的博客
04-07 1041
在研习JavaScript的旅程中，我将不断积累并修正学习笔记，若其中存在谬误，敬请各位不吝赐教予以纠正。
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 119
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 197
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 758
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 856
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 188
【代码】echarts的柱状图使用。
Vue从入门到实战Day07
最新发布
ltt159264的博客
05-21 583
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 821
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
jQuery知识点（二）
shsjssnn的博客
05-21 467
1.获取节点： 通过各种选择器或选择器的组合来获取想要的网页元素。 2.创建节点： 元素节点通过工厂函数$()直接创建，文本节点和属性节点可以随着元素节点创建时一起创建，也可以通过先创建元素节点，再使用操作内容和属性的方法产生。 3.插入节点： append()、prepend(): 是父元素的方法 appendTo()、prependTo(): 是要插入的节点的方法 before()、after(): 是要插入
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 679
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值