九、裁剪
九、裁剪9.1 dom结构123456<div id="box"> <div id="mask"></div> <div id="area"> <div id="dot"></div> </ ...
八、节流
八、节流onscroll是一个高频率的事件，如果将代码直接放入事件中，代码将会被执行很多次，很浪费运算资源。为了避免代码被执行多次，我们定义一个延时器，将要执行的代码放入延时器中，在频繁执行该事件的时候，先清楚之前的延时器，再开启一个新的延时器，从而保证代码只执行一次。123456789101112 ...
七、onscroll事件
七、onscroll事件当页面卷动的时候会触发该事件在一个页面中，视口是一定的，当页面的高度比视口高的时候，此时页面将出现滚动条。这个时候，当我们改变滚动条位置的时候，会触发onscroll事件。触发该事件的条件：改变页面卷动值触发该事件的条件有很多，比如：鼠标滚轮滚动键盘上空格键键盘上的pageU ...
六、页面卷动值和IE中的透明度
六、页面卷动值和IE中的透明度6.1 页面卷动值页面卷动值指的是：在页面中，视口上面看不到的部分，也就是被卷起来的部分获取页面卷动值的方式：12document.documentElement.scrollTop 新版本的chrome、火狐、IE都支持document.body.scrollTop ...
五、淘宝放大镜
五、淘宝放大镜5.1 mouseenter事件12345678910// 添加mouseenter事件glass.onmouseenter = function(){ console.log("进入镜片了");}box.onmouseenter = function()&# ...
四、拖拽放大镜
四、拖拽放大镜4.1 dom结构1234<div id="box"> <div id="glass"></div></div><div id="box1"></div>4.2 css12345678910111213141 ...
三、获取一个元素到页面的距离
三、获取一个元素到页面的距离3.1 浏览器识别1window.navigator.userAgent3.2 获取一个元素到页面的距离思路：获取元素的定位父元素，再获取距离再获取元素的定位父元素的定位父元素，再获取距离再获取元素的定位父元素的定位父元素的定位父元素，直到终点 => body元素， ...
二、元素的位置和距离
二、元素的位置和距离2.1 定位父元素 offsetParent子绝父相中的父该元素不一定是父节点中的parentNodedom结构：12345678910111213141516171819202122232425262728293031323334353637383940414243444546 ...
一、快捷尺寸
一、快捷尺寸1.1 clientWidth和clientHeight123456789#box { float: left; padding: 10px; background-color: red; border: 10px solid #000;}im ...
十三、限制拖拽模型
十三、限制拖拽模型123<div id="box"> <div id="box1"></div></div>123456789101112131415#box { width: 800px; height: 400px; ...