1.offset系列
- offsetTop,返回元素距离具有定位的父元素的上方的偏移(Y轴大小),如果没有,就是到body的距离
- offsetLeft,返回元素距离具有定位的父元素的左边框的偏移(Y轴大小),如果没有,就是到body的距离
- offsetWidth,返回元素自身宽度,包含padding、边框、内容区
- offsetHeight,返回元素自身高度,包含padding、边框、内容区
- offsetParent,返回带有定位的父元素,如果没有,则返回body
- 仿京东放大镜代码
var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
box.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
});
box.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
});
box.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
var maskMax = box.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
};
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
};
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
2.client系列
- clientWIdth,返回元素的自身宽度,包括内容、padding
- clientHeight,返回元素的自身高度,包括内容、padding
- clientTop,返回上边框的大小
- clientLeft,返回左边框的大小
3.scroll系列
- scrollWidth,返回自身实际内容的宽度,不包含边框
- scrollHeight,返回自身实际内容的高度,不包含边框
- scrollTop,返回被卷上去的上侧距离
- scrollLeft,返回被卷上去的左侧距离
- window.pageYOffset,页面被卷上去的距离
- 淘宝固定侧边栏代码
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
var bannerTop = banner.offsetTop;
var sliderbarTop = sliderbar.offsetTop;
var main = document.querySelector('.main');
var goback = document.querySelector('.goBack');
var mainTop = main.offsetTop;
document.addEventListener('scroll',function(){
if(window.pageYOffset >= bannerTop){
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop - bannerTop + 'px';
}else{
sliderbar.style.position = 'absolute';
sliderbar.style.top = sliderbarTop +'px';
};
if(window.pageYOffset >= mainTop){
goback.style.display = 'block';
}else{
goback.style.display = 'none';
};
});
4.触屏事件
- touchstart,点击,开始触摸
- touchmove,点击划动,持续触摸
- touchend,结束触摸
- touchcancel,中断触摸
5.触摸事件常见对象
- touches,正在触摸的所有手指的一个列表
- targetToushes,正在触摸当前DOM元素上的手指的列表,常用
- changedTouches,手指状态发生改变的列表,从无到有或从有到无
- targetToushes[0],得到触摸DOM元素的第一个手指的信息
- 手指离开屏幕时,就没有touches和targetTouches,但是会有changedTouches
6.classList
- classList.add(’’),添加类名
- classList.remove(’’),删除类名
- classList.toggle(’’),切换类名
- classList.contains(’’),判断是否包含类名,返回true或false
7.本地存储
- 本地存储特性:
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新也不会丢失数据
- 容量较大,sessionStorage约5M,localStorage约20M
- 只能存储字符串,可以将对象JSON.stringify()编码后存储
7.1sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用 值一定是字符串
7.2localStorage本地存储
- 生命周期永久生效,除非手动删除
- 最大存储20M
- 同一域名下,数据可以共享
- 相关方法
- localStorage.setItem(key,value) ,存储数据
- localStorge.getItem(key) ,获取数据
- localStorage.removeItem(key) ,删除数据
- localStorage.clear(),清空数据
8.相关案例代码
function animate(obj, target,callback) {
clearInterval(obj.timer,);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
callback && callback();
};
obj.style.left = obj.offsetLeft + 4 + 'px';
}, 50);
};
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
animate(div, 300,function(){
div.style.backgroundColor = 'red';
});
btn.addEventListener('click',function(){
animate(span, 200);
})
var box = document.querySelector('.box');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var ul = box.querySelector('ul');
var ol = box.querySelector('.pagination');
var boxWidth = box.offsetWidth;
box.addEventListener('mouseover', function () {
left.style.display = 'block';
right.style.display = 'block';
clearInterval(timer);
});
box.addEventListener('mouseout', function () {
left.style.display = 'none';
right.style.display = 'none';
autoLun();
});
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.index = i;
ol.appendChild(li);
li.addEventListener('click', function () {
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].className = '';
}
this.className = 'current';
var index = this.index;
num = circle = index;
animate(ul, -index * boxWidth);
})
};
ol.children[0].className = 'current';
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
var num = 0;
var circle = 0;
right.addEventListener('click', function () {
if (num == ul.children.length - 1) {
num = 0;
ul.style.left = 0;
};
num++;
animate(ul, -num * boxWidth);
circle++;
if (circle == ol.children.length) {
circle = 0;
};
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
};
ol.children[circle].className = 'current';
});
left.addEventListener('click', function () {
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * boxWidth + 'px';
};
num--;
animate(ul, -num * boxWidth);
circle--;
if (circle < 0) {
circle = circle < 0 ? ol.children.length - 1 : cirle;
};
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
};
ol.children[circle].className = 'current';
});
var timer = null;
function autoLun(){
timer = setInterval(function(){
right.click();
},2000);
}
autoLun();
var box = document.querySelector('.box');
var ul = document.querySelector('.box ul');
var w = box.offsetWidth;
var ol = document.querySelector('.box ol');
var index = 0;
var timer = setInterval(function () {
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = `translateX(${translateX}px)`;
}, 2000);
ul.addEventListener('transitionend', function () {
if (index >= ul.children.length - 2) {
index = 0;
ul.style.transition = 'none';
ul.style.transform = `translateX(0px)`;
} else if (index < 0) {
index = ul.children.length - 3;
ul.style.transition = 'none';
var translateX = -index * w;
ul.style.transform = `translateX(${translateX}px)`;
};
ol.querySelector('.current').classList.remove('current');
ol.children[index].classList.add('current');
});
var startX = 0;
var moveX = 0;
var flag = false;
ul.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX;
clearInterval(timer);
});
ul.addEventListener('touchmove', function (e) {
flag = true;
moveX = e.targetTouches[0].pageX - startX;
var translateX = -index * w + moveX;
ul.style.transition = 'none';
ul.style.transform = `translateX(${translateX}px)`;
e.preventDefault();
});
ul.addEventListener('touchend', function (e) {
if (flag) {
if (Math.abs(moveX) > 50) {
if (moveX > 0) {
index--;
} else {
index++;
}
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = `translateX(${translateX}px)`;
} else {
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = `translateX(${translateX}px)`;
};
}
clearInterval(timer);
timer = setInterval(function () {
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = `translateX(${translateX}px)`;
}, 2000);
})
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if(localStorage.getItem('username')){
usewername.value = localStorage.getItem('username');
remember.checked = true;
};
remember.addEventListener('change',function(){
if(this.checked){
localStorage.setItem('username',username.value);
}else{
localStorage.removeItem('username');
};
});