一、盒子自身的三种宽度
offsetWidth b+p+w 边框+内边距+内容
ClientWidth p + w 内边距+内容
getComputedStyle(ele).width w 内容的宽度
鼠标的坐标
e.clientX / e.clientY 可简写为 e.x / e.y 距离浏览器的坐标
e.pageX / e.pageY （有滚动条时使用） 距离实际页面的坐标
e.offsetX / e.offsetY 距离目标源的坐标
e.offsetLeft / offsetTop 距离最近的具有定位的祖先元素的距离，这个元素自身不需要
定位
二、鼠标在盒子中跟随
var oA = document.querySelector('.a')
var oA1 = document.querySelector('.a1')
// console.log(oA.offsetLeft); // 距离最近的具有定位的祖先元素的距离，这个元素自身不需要定位
var maxX = oA.clientWidth-oA1.offsetWidth
var maxY = oA.clientHeight-oA1.offsetHeight
oA.onmousemove = function(e){
var x = e.x - oA.offsetLeft-oA1.offsetWidth/2 - parseInt(css(oA,'border-left-width'));
var y = e.y - oA.offsetTop - oA1.offsetHeight/2 - parseInt(css(oA,'border-top-width'))
if(x > maxX) x = maxX
if(y > maxY) y = maxY
if(x < 0) x = 0
if(y < 0) y = 0
oA1.style.cssText = `left:${x}px;top:${y}px`
}
function css(ele,prop){
if(window.getComputedStyle){
return getComputedStyle(ele)[prop]
}
return ele.currentStyle[prop]
}
三、盒子的宽高问题
// 盒子自身的三种宽度
// offsetWidth b+p+w
// ClientWidth p+w
// getComputedStyle(ele).width w
<style>
.a{
width: 100px;
height: 100px;
border: 10px solid #000;
padding: 20px;
margin: 30px;
background: red;
}
</style> // 由于id在页面上具有唯一性，所以元素不获取也可以直接通过id访问元素，一般建议还是先获取元素
// console.log(div);
// <div class="a" id="div"></div>
var oDiv = document.querySelector('.a')
console.log(oDiv.offsetWidth); // 边框+内边距+内容 10*2+20*2+100 = 160
console.log(oDiv.clientWidth); // 内边距+内容 20*2+100 = 140
console.log(getComputedStyle(oDiv).width); // 内容的宽度 100px四、放大镜
var oFdj = $('.fdj')
var oLeft = $('.left')
var oLeft1 = $('.left1')
var oCover = $('.cover')
var oRight = $('.right')
var oRightImg = $('.right img')
// 大盒子距离左边的距离
var _left = oLeft.offsetLeft
var _top = oLeft.offsetTop
// 遮罩内容宽度的一半
var r1 = oCover.offsetWidth / 2
var r2 = oCover.offsetHeight / 2
// 遮罩层的最大移动范围
// 大盒子内容宽度-遮罩内容宽度
var maxX = oLeft1.clientWidth - oCover.offsetWidth
var maxY = oLeft1.clientHeight - oCover.offsetHeight
// 右侧大图的最大移动范围
var maxX2 = oRightImg.clientWidth - oRight.offsetWidth
var scale = maxX2 / maxX
oLeft1.addEventListener('mouseover',function(){
oCover.style.opacity = 1
oRight.style.opacity = 1
//鼠标移动事件
document.addEventListener('mousemove',function(e){
var x = e.x - _left - r1
var y = e.y - _top - r2
if(x < 0 ) x = 0
if(y < 0 ) y = 0
if(x > maxX) x = maxX
if(y > maxY) y = maxY
oCover.style.cssText += `left:${x}px;top:${y}px`;
oRightImg.style.cssText += `left:${-x * scale}px;top:${-y * scale}px`;
})
})
// 鼠标移出
oLeft1.addEventListener('mouseout',function(){
oCover.style.opacity = 0
oRight.style.opacity = 0
})
function $(selector){
return document.querySelector(selector)
}
五、图片切换
var bigArr = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg']
// 动态生成图片
var oLeftImg = document.querySelector('.leftImg')
oLeftImg.src = bigArr[0]
var oP = document.querySelector('p')
// 生成多个小图
var fragment = document.createDocumentFragment()
bigArr.forEach(function(v){
var oImg = document.createElement('img')
oImg.src = v
fragment.appendChild(oImg)
})
oP.appendChild(fragment)
// 给每一个小图绑定事件--委托给p
oP.addEventListener('mouseover',function(e){
e = e || event
var target = e.target
if(target.tagName === 'IMG'){
oLeftImg.src = target.src
}
})
六、在盒子中拖拽
var oDiv = document.querySelector('.a')
var oBox = document.querySelector('.box')
var maxX = oBox.clientWidth - oDiv.offsetWidth
var maxY = oBox.clientHeight - oDiv.offsetHeight
// 鼠标按下
oDiv.onmousedown = function(e){
e = e || event
// 鼠标按下的时候，获取鼠标在盒子中的位置
var gapX = e.x - oDiv.offsetLeft ;
var gapY = e.y - oDiv.offsetTop ;
// 鼠标跟随
// 如果给oDiv绑定事件，容易跟丢
document.onmousemove = function (e) {
e = e || event ;
var x = e.x - gapX ;
var y = e.y - gapY ;
if(x < 0) x = 0
if(y < 0) y = 0
if(x > maxX) x = maxX
if(y > maxY) y = maxY
oDiv.style.cssText = `left:${x}px;top:${y}px`;
}
// 鼠标抬起时 清除鼠标跟随事件
document.onmouseup = function () {
document.onmousemove = null ;
}
// 鼠标移出了box的范围的时候，就清除事件
oDiv.onmouseout = function(){
document.onmousemove = null
}
}七、滑动验证
// 挖空的位置和提示的位置是一样的
var oDiv = document.querySelector('.a')
var oBox = document.querySelector('.box')
var oTips = document.querySelector('.tips')
var maxX = oBox.clientWidth-oDiv.offsetWidth;
var maxY = oBox.clientWidth-oDiv.offsetWidth;
// 鼠标按下
oDiv.onmousedown = function(e){
e = e || event
// 鼠标按下的时候，获取鼠标在盒子中的位置
var gapX = e.x - oDiv.offsetLeft
document.onmousemove = function(e){
e = e || event
var x = e.x - gapX
if(x < 0 ) x = 0
if(x > maxX) x = maxX
oDiv.style.cssText = `left:${x}px;`
oTips.style.cssText = `left:${x}px`
}
// 鼠标抬起时 清除鼠标跟随事件
document.onmouseup = function () {
document.onmousemove = null ;
// 验证位置 tips的位置和挖空的位置是一样的
// 允许左右差2px ???
if(oTips.style.left === '276px') {
alert(666)
} else {
oTips.style.left = 0 ;
oDiv.style.left = 0 ;
// 重新生成一个位置 --- 随机数
}
}
// 鼠标移出了box的范围的时候，就清除事件
// oDiv.onmouseout = function () {
// document.onmousemove = null ;
// }
}
function rand(min , max) {
return parseInt(Math.random() * (max - min) + min)
}