JS之盒子的宽高问题，鼠标在盒子中跟随，拖拽，图片切换，滑动验证，放大镜功能的实现等

一、盒子自身的三种宽度

                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)
        }