codepen & js demos
codepen & js demos
Mutation Observer & customize resize event listener & demo
https://codepen.io/webgeeker/pen/YjrZgg
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
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
codepen & js demos的更多相关文章
- 使用zip.js压缩文件和解压文件
zip.js官方网站为:https://stuk.github.io/jszip/ 在此说明,下面的例子基本上来自官方示例,大家可以做参考,官方示例地址为:https://stuk.github.io ...
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
- 前端资料QQ群交流
转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...
- 【JavaScript&jQuery】前端资源大全
综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...
- JavaScript资源分享
一. 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 ...
- github上最全的资源教程-前端涉及的所有知识体系【转】
github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...
- 终极教程【zhong】
just for a better future! 资源教程 aiim 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...
- 我们是怎么管理QQ群的
文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...
- 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得
1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...
随机推荐
- ubuntu下pycharm快捷方式创建
终端输入:sudo gedit /usr/share/applications/Pycharm.desktop 粘贴模板: [Desktop Entry] Type=Application Name= ...
- flex Datagrid checkbox
<?xml version="1.0" encoding="utf-8"?><!-- http://blog.flexexamples.com ...
- 【转】odoo学习之:开发字段解析
odoo新API中,字段类型不变,继承改变 1.旧的API定义模型: from openerp.osv import osv,fields class oldmodel(osv.osv): #模型名称 ...
- 银行业务-Excel文件的拆分逻辑
一.问题: 随着银行业务数据量的急剧增加,原始的人力统计数据已经不能满足要求, 需要开发一款可以实现自动化数据统计的系统平台,进行数据的采集.加工.过滤.统计.预测 其中数据采集方式又以[Excel] ...
- jQuery Validate (登录页面相关验证)
$(function() { var submit = false; var superHtml = []; /** * 匹配企业帐号,以字母开头,长度在6-20之间,只能包含字符.数字和下划线. * ...
- 搜索引擎ElasticSearch系列(五): ElasticSearch2.4.4 IK中文分词器插件安装
一:IK分词器简介 IK Analyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包.从2006年12月推出1.0版开始, IKAnalyzer已经推出了4个大版本.最初,它是以开源 ...
- Spring学习(七)-----Spring Bean的5种作用域
在Spring中,bean作用域用于确定哪种类型的 bean 实例应该从Spring容器中返回给调用者.bean支持的5种范围域: 单例(singleton) - 每个Spring IoC 容器返回一 ...
- linux 同步 rsync的使用——远程服务器同步配置
一.背景介绍 由于需要和其他系统进行对接.文件的逻辑地址通过接口传递,而文件的实体需要通过服务器间的同步进行传输.在同事的建议下选择了rsync. 二.RSYNC介绍 RSYNC 有多种方式进行同步, ...
- Hexo+gitment
Gitment是一个基于GitHub问题的评论系统,可以在没有任何服务器端实现的前端使用. 演示页面 中文简介 特征 入门 方法 定制 关于安全 特征 GitHub登录 Markdown / GFM支 ...
- Jenkins 自动化测试
学习 Jenkins 自动化测试的系列文章 Robot Framework 概念 Robot Framework 安装 Pycharm + Robot Framework 环境搭建 Robot Fra ...