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;
//限制遮挡层的移动范围 0~100,100为大盒子宽度-遮挡层宽度
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(){
// console.log(window.pageYOffset);页面被卷去的上册距离
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.相关案例代码
//函数封装，obj目标对象，target目标位置
//给不同元素指定不同定时器
function animate(obj, target,callback) {
//当我们不断点击按钮，元素的速度会越来越快，因为开启了太多定时器
//解决方案：先清除之前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer,);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
// obj.style.backgroundColor = 'red';
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';
// alert(123)
});
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;
//1、左右箭头显示与隐藏
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();
});
//2、动态生成小圆圈 小圆圈数量和图片一样
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
//通过自定义属性记录当前小圆圈的索引号
// li.setAttribute('data-index', i);
li.index = i;
ol.appendChild(li);
//3、小圆圈的排他思想 点击时添加类名，在生成小圆圈的同时添加
li.addEventListener('click', function () {
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].className = '';
}
this.className = 'current';
//4、点击小圆圈，移动图片 移动的是ul
//ul移动的距离是小圆圈的索引号×图片的宽度，是负值
// var index = this.getAttribute('data-index'); //点击某个li，得到它的索引号
var index = this.index;
num = circle = index;
animate(ul, -index * boxWidth);
})
};
ol.children[0].className = 'current';
//5、克隆第一张图片，放在最后面,小圆圈不会多一个
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//6、点击右侧按钮，图片滚动一张
var num = 0;
var circle = 0; //声明一个全局变量，控制小圆圈的播放
//下一张
right.addEventListener('click', function () {
//如果走到了最后一张，ul的left快速复原到0
if (num == ul.children.length - 1) {
num = 0;
ul.style.left = 0;
};
num++;
animate(ul, -num * boxWidth);
//7、点击右侧按钮，小圆圈跟随一起变化
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 () {
//如果走到了最后一张，ul的left快速复原到0
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * boxWidth + 'px';
};
num--;
animate(ul, -num * boxWidth);
//7、点击右侧按钮，小圆圈跟随一起变化
circle--;
if (circle < 0) { //如果小圆圈走到最后一张，就复原到第一个
// circle = ol.children.length-1;
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快速跳到目标位置
// var translateX = -index * w;
ul.style.transform = `translateX(0px)`;
} else if (index < 0) {
index = ul.children.length - 3;
ul.style.transition = 'none'; //去掉过渡效果，让ul快速跳到目标位置
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) {//判断移动像素是否大于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');
};
});