codepen & js demos

Mutation Observer & customize resize event listener & demo

https://codepen.io/webgeeker/pen/YjrZgg

https://codepen.io/dashboard?type=search&opts_itemType=pen&opts_searchTerm=js&opts_order=newest&opts_depth=everything&opts_showForks=false&displayType=list&previewType=iframe&page=0

Mutation Observer

https://javascript.ruanyifeng.com/dom/mutationobserver.html

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

// todo

resize & response width

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event



const heightOutput = document.querySelector('#height');

const widthOutput = document.querySelector('#width');

function reportWindowSize() {

  heightOutput.textContent = window.innerHeight;

  widthOutput.textContent = window.innerWidth;

}

window.onresize = reportWindowSize;

// OR

window.addEventListener('resize', reportWindowSize);

https://codepen.io/xgqfrms/pen/dyyWrWb?&editable=true

&copyxgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

codepen & js demos的更多相关文章

  1. 使用zip.js压缩文件和解压文件

    zip.js官方网站为:https://stuk.github.io/jszip/ 在此说明,下面的例子基本上来自官方示例,大家可以做参考,官方示例地址为:https://stuk.github.io ...

  2. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  3. 前端资料QQ群交流

    转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...

  4. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  5. JavaScript资源分享

    一. 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 ...

  6. github上最全的资源教程-前端涉及的所有知识体系【转】

    github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...

  7. 终极教程【zhong】

    just for a better future! 资源教程               aiim                   综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...

  8. 我们是怎么管理QQ群的

    文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...

  9. 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得

    1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...

随机推荐

  1. CALL TRANSACTION

    概要 SUBMITと違い.トランザクションコードで呼び出すのが特徴. アドオンからの伝票照会やバッチインプットによるSAPへのデータ登録/更新処理にも利用される. なお.呼び出された側から呼び出し元へ ...

  2. Linux入门第五天——shell脚本入门（中）基础语法之判断与条件

    一.判断式 利用 test 命令进行执行结果的判断(例如判断是否存在该文件):关于test  test:test 示例:结合回传值 $? 进行判断:关于$?:$? [root@localhost tm ...

  3. mfc通过MapWinGIS控件读取shp文件（不通过#import实现）

    1.首先注册MapWinGIS ActiveX组件, 引入MapWinGIS.ocx产生的MapWinGIS_i.h和MapWinGIS_i.c文件,利用CoCreateInstance函数来调用 演 ...

  4. 微信 msg_sec_check接口PHP 调用

    $checkContent = '要检测的内容'; $url = 'https://api.weixin.qq.com/wxa/msg_sec_check?access_token='. $res[& ...

  5. 概念这种东西--node.js

    概念是一个既简单又复杂.既招人爱又招人恨的东西.概念是对一事务或现象的抽象.抽象好了,那就太方便问题的解决了,抽象坏了,那就驴唇不对马嘴,反而会让逻辑一塌糊涂.现实中经常有这样的概念:东北人怎么怎么样 ...

  6. Python爬虫下载Bilibili番剧弹幕

    本文绍如何利用python爬虫下载bilibili番剧弹幕. 准备: python3环境 需要安装BeautifulSoup,selenium包 phantomjs 原理: 通过aid下载bilibi ...

  7. Python 3 利用 Dlib 实现摄像头人脸检测特征点标定

    0. 引言 利用 Python 开发,借助 Dlib 库捕获摄像头中的人脸,进行实时人脸 68 个特征点标定: 支持多张人脸: 有截图功能: 图 1 工程效果示例( gif ) 图 2 工程效果示例( ...

  8. Tree - Gradient Boosting Machine with sklearn source code

    This is the second post in Boosting algorithm. In the previous post, we go through the earliest Boos ...

  9. 利用Tensorflow进行自然语言处理（NLP）系列之一Word2Vec

    同步笔者CSDN博客(https://blog.csdn.net/qq_37608890/article/details/81513882). 一.概述 本文将要讨论NLP的一个重要话题:Word2V ...

  10. 算法笔记（c++）--使用一个辅助栈排列另一个栈

    算法笔记(c++)--使用一个辅助栈排列另一个栈 仅仅使用一个辅助栈,不使用其他数据结构来排列一个栈,要求,上大下小. 分析下.肯定是先吧主栈中的数据都放到辅助栈中,在辅助栈中上小下大. 1.首先循环 ...