queryselector | 易学教程

Shadow DOM系列2-基础

阅读更多关于 Shadow DOM系列2-基础

英文链接： Shadow DOM: The Basics , 27 AUGUST 2013 on Web Components, Shadow DOM 在我的上一篇博文里，我介绍了 Shadow DOM 并举例说明为啥它这么重要。今天，我们要干点苦力活——“码”上见分晓！在本文的最后，你将能够创建自己的封装组件——它封装了外部的内容，并重新整理内部结构来产生一个完全不同的东西。让我们开始吧！环境支持为了能尝试下面的实例，建议使用 Chrome 33 或者更高版本的 Chrome。一个简单的例子让我们看一个非常简单的 HTML 文档。 <body> <div class="my-widget"> <h1>我的组件的标题</h1> <p>一些组件的内容</p> </div> <div class="my-other-widget"> <h1>我的另一个组件的标题</h1> <p>一些另一个组件的内容</p> </div> </body> 当 HTML 转化成 DOM，每个元素都会变成一个节点（node）。而一组互相嵌套的一组节点则被称为节点树（node tree）。 Shadow DOM 的独特之处在于它允许我们创建自己的节点树，这种节点树被称为影子树（shadow trees）。影子树对其中的内容进行了封装，有选择性的进行渲染。这就意味着我们可以插入文本

原生js轮播图自动切换

阅读更多关于原生js轮播图自动切换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin:0; padding:0; } a{ text-decoration: none; } .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px #FF3366; overflow: hidden; } .container .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 5px; bottom:40px; width: 150px; height: 10px; z-index: 2; } .container .buttons span { margin-left: 5px; display: inline-block;

原生js实现简单的放大镜效果

阅读更多关于原生js实现简单的放大镜效果

前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如下图，它由两部分组成。 html： <div id="box"> <div id="small"></div> </div> <div id="big"> <img src="12.png" id="imgs"/> </div> 第一部分的原理是：设置box的background为需要放大的图片，同时背景的宽高为100%。再将box的宽高设为300px，这样背景图片就可以撑满box了。然后通过监听box的mousemove事件，控制红色小框块的移动。这个红色小框块就是要放大的地方。第二部分的原理是：设置big里面的img为box的宽度的3倍（这里的3倍就是放大镜的放大倍数，当然这个值是可以自由选择的。）。同时big块的宽高为350px，用来限制img的显示。然后通过移动img的left，top来达到放大镜的效果。 css代码： html,body { margin: 0; padding:0; } #box{ width: 300px; height: 300px; position: relative; background: url(12.png); background-size:100% 100%;

靓仔靓女如何用浏览器自拍和保存

阅读更多关于靓仔靓女如何用浏览器自拍和保存

一、前言 1.核心技术 Web Real-Time Communication：网页即时通信，可以在浏览器进行实时语音或者视频对话的API Canvas：HTML5中的新元素,可以用来来绘制图形、图标、以及其它任何视觉性图像 2.音频采集的基本概念摄像头：用于采集图像和视频麦克风：采集音频数据帧率：一秒钟采集图像的次数。帧率越高，越平滑流畅轨：借鉴了多媒体的概念，每条轨数据都是独立的，如MP4中的音频轨、视频轨，是分别被存储的流：可以理解为容器。在WebRTC中，流可以分为媒体流（MediaStream）和数据流（DataStream）。分辨率：2K、1080P、720P等，越清晰，占用带宽越多 3.音视频设备的基本原理音频设备音频输入设备主要是采集音数据，而采集音频数据的本质是模拟信号转成数字信号，采集到的数据经过量化、编码，最终开成数字信号，这就是音频设备要完成的工作。人的听觉范围的频率是20Hz~20kHz之间，日常语音交流8kHz就哆了。为了追求高品质、高保真，需要将音频输入设备采样率设置在40kHz上才能完整保留原始信号视频设备当实物光通过镜头进行摄像机后，它会通过视频设备的模数转换（A/D）模块，即光学传感器，将光转换成数字信号，即RGB数据，获得RGB数据后，再通过DSP进行优化处理，如自动增强、白平衡、色彩饱和等，等到24位的真彩色图片

vue 中固定导航栏

阅读更多关于 vue 中固定导航栏

点击按钮回顶 <template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div> </template> <script> export default { methods: { gotop: function () { // 点击回顶按钮返回顶部 setTimeout(()=>{ document.body.scrollTop = 0 document.documentElement.scrollTop = 0 },1000) } } } window.onscroll = function() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop const goTop= document.querySelector('.gotop-box') if (scrollTop >200) { goTop.style.display = 'block' } else { goTop.style.display = 'none' } } </script> <style lang="css"> .topIcon { position: fixed;

js防抖和节流

阅读更多关于 js防抖和节流

js防抖和节流防抖节流防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。示例游戏玩家看到法师怒气值满可能疯狂点击，但技能触发有一个蓄力过程，频繁触发则重新蓄力思路：每次触发事件时都取消之前的延时调用方法 preventShake = ( fn ) => { let timer = null ; // 创建定时器id return ( ) => { clearTimeout ( timer ) ; // input事件频繁触发，清除之前定时器 timer = setTimeout ( ( ) => { // 创建新定时器，保证限定时间间隔fn只执行一次 fn ( ) ; } , 500 ) ; } ; } test = ( ) => { console . log ( ' prevent shake success' ) ; } //创建数输入框 document . querySelector ( 'body' ) . appendChild ( document . createElement ( 'input' ) ) //事件绑定 document . querySelector ( 'input' ) . oninput = preventShake ( test ) 带参数 <!DOCTYPE html> < html

JavaScript实现轮播图

阅读更多关于 JavaScript实现轮播图

功能描述： 1.鼠标经过左右侧箭头显示，鼠标离开箭头隐藏 2.动态添加底部小圆圈并绑定单击事件，并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 4.给箭头绑定单击事件，并且使图片可以无缝轮播 5.实现自动轮播（动画函数）具体实现代码： 1.鼠标移入左右侧箭头显示，鼠标离开箭头隐藏 1 con.addEventListener('mouseenter', function() { 2 arrow_l.style.display = 'block'; // 将左右箭头的display设为block 3 arrow_r.style.display = 'block'; 4 }); 5 con.addEventListener('mouseleave', function() { 6 arrow_l.style.display = 'none'; // 将左右箭头display设为none 7 arrow_r.style.display = 'none'; 8 }); 2.动态添加底部小圆圈并绑定单击事件，并且让小圆圈的点击事件和左右箭头点击事件同步 1 for(var i = 0; i < ul.children.length; i++) { 2 var li = document.createElement('li'); 3

GridManager 隐藏列

阅读更多关于 GridManager 隐藏列

GridManager 表格管理组件，对列的隐藏与显示的操作有两种方式。初始化时指定列为隐藏或显示状态。方式如下: <table></table> var table = document.querySelector('table'); table.GM({ gridManagerName: 'test', ajax_url: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', columnData: [{ key: 'name', // 指定不显示该列 isShow: false, text: 'username' },{ key: 'type', // 指定显示该列 isShow: true, text: 'type' },{ key: 'info', // 不指定该列的显示状态，默认为true text: 'info' }] }); 渲染完成后，对列进行隐藏或显示操作。在已经执行过init的前提下，可通过如下方式对列进行操作: // 对第一列进行显示 var table = document.querySelector('table'); var th_name = table.querySelector('th[th-name="name"]'); table.GM('showTh',

九宫格图片制作

阅读更多关于九宫格图片制作

1.原理及说明九宫格图片就是将一张图片分成9份，再拼成一个完整的图片，如图：原理：创建9个正方形容器，利用背景图定位，每个容器只显示其中的一部分，最终拼接成一张完整的图片实现思路： (1)使用flex布局，让9个子元素以 3*3 的形式摆放 (2)因为图片有纵向和横向两种可能，所以要对图片的宽高比进行判断，以此来判断图片的方向，并根据图片的方向决定背景图定位信息。 (3)将图片的url放入文本框中，通过按钮点击事件将url对应的图片设置成容器的背景图 (4)使用FileReader()读取本地选中的图片时，会花费1-2s的时间，在此时间内显示一个蒙版遮罩，用来提示用户“加载中...” (5)为了美化按钮，使用了bootstrap 2.HTML代码 HTML代码分为3个部分： (1)操作区，包括文本输入框和按钮 (2)九宫格图片区，用于显示背景图 (3)蒙版遮罩 <!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">

HTML5 新特性

阅读更多关于 HTML5 新特性

一、HTML5与HTML4 1.1 推出的理由和目标 H5的出现，对于Web来说意义重大。因为他的意图是想要把目前Web上存在的各种问题一并解决掉。 Web浏览器之间的兼容性很低文档结构不够明确（增加了很多结构, 语义化的标签） Web应用程序的功能受到了限制 H5 的出现极大的解决了上面的问题 1.2 语法的改变 1.2.1 DOCTYPE声明 H5 DOCTYPE的声明是这样的： <!DOCTYPE html> Html:4s DOCTYPE的声明是这样的： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Html: 4t DOCTYPE 的声明是这样的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1.2.2 指定字符编码 H5指定字符编码格式如下： <meta charset="UTF-8" /> Html:4s 指定字符编码如下： <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 1.2.3

订阅 queryselector