webapi_2 今天全是大经典案例

今天的案例又大又经典 我想想怎么搞呢因为要用到外联样式之类的了 写入内联也太大了

1.

先来一个单独小页面的吧 一个仿淘宝右侧侧边栏的案例 不多说都在注释里了

2.

然后是一个模拟模态框拖拽的，这是经典了吧

    
    
    
    
    


    
点击，弹出登录框

    
登录会员
        关闭
    
    

        

            用户名：
            
        
        

            登录密码：
            
        
    
    
登录会员

3.

然后就是一些在网页里面的案例了 我决定先来几张图片 看看效果 然后把最重要的js逻辑实现和对应的html代码弄上来就行了吧 毕竟这是两个最关键的东西

首先第一个呢是一个京东放大镜效果的案例 做出来差不多就像下图的样子


可以移动可以跟随 然后对应的html呢就是这个

                

                    
                    

                    

                        
                    
                
html代码很少也不需要啥子太多 这个css可能要多点 然后是我们的js代码

// 鼠标一进入浏览区 面罩显示
document.addEventListener('DOMContentLoaded', function() {
    var box = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    var bigImg = document.querySelector('.bigImg')
    box.addEventListener('mousemove', function(e) {
        mask.style.display = 'block'
        big.style.display = 'block'
        var x = e.pageX - box.offsetLeft - (mask.offsetWidth/2)
        var y = e.pageY - box.offsetTop - (mask.offsetHeight/2)
        mask.style.left =x + 'px'
        mask.style.top = y + 'px'
        // 设置界线
        //最大移动距离
        var maskMax = box.offsetWidth - mask.offsetWidth
        if (x <= 0) {
            mask.style.left = 0 + 'px'
        }else if(x >= maskMax) {
            mask.style.left = maskMax + 'px'
        }
        if (y <= 0) {
            mask.style.top = 0 + 'px'
        } else if (y >= maskMax) {
            mask.style.top = maskMax + 'px'
        }
        // 这里有个小点需要注意一下 一直卡在这里 对于下面的大图显示有问题不设置的话
        // 需要将x y做一个规整 不然他也是一直在动
        x = x < 0 ? '0px' : mask.offsetLeft;
        x = x > maskMax ? '100px' : mask.offsetLeft;
        y = y < 0 ? '0px' : mask.offsetTop;
        y = y > maskMax ? '100px' : mask.offsetTop;
        // 大图移动距离公式
        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图最大移动距离
        var bigMove = bigImg.offsetWidth - big.offsetWidth
        var bigX = x * bigMove / maskMax
        var bigY = y * bigMove / maskMax
        bigImg.style.left = -bigX + 'px'
        bigImg.style.top = -bigY + 'px'
    })
})

我们下期见哈哈 不然格子不够
前端爱好者，望大佬给个内推机会！！！