PC端网页特效

PC端网页特效

1. offset系列

1.2 offset与style的区别

1.3 拖动模态框效果

1. css代码

// 注意用到offsetLeft 和 offsetTop时候，返回的是元素相对带有定位父元素的偏移
// 由于控制到盒子的left和top属性，所以需要加绝对定位
 div {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 200px;
          background-color: pink;
          cursor: all-scroll;
     }

2. js代码

let div = document.querySelector('div');

    div.addEventListener('mousedown', function (e) {
    	// 鼠标按下时，获取鼠标相对于盒子的左侧距离和顶部距离
        let x = e.pageX - div.offsetLeft;
        let y = e.pageY - div.offsetTop;

        let fn = function (e) {
        	// 用鼠标距离页面的距离 减去 鼠标距离盒子的距离 就是盒子相对于页面的距离
            div.style.left = (e.pageX - x) + 'px';
            div.style.top = (e.pageY - y) + 'px';
        }

        document.addEventListener('mousemove', fn)

        document.addEventListener('mouseup', function (e) {
        	// 当鼠标弹起，解除鼠标移动事件
            document.removeEventListener('mousemove', fn);
        })
    })

2. Client系列

2.1 仿京东放大镜效果

效果图：

html和css代码

<div class="box">
    <img src="upload/iPhone13.jpg" alt="">
    <div class="mask"></div>
    <div class="big">
        <img src="upload/iPhone13.jpg" alt="">
    </div>
</div>

.box {
        position: relative;
        width: 350px;
        height: 350px;
        border: 1px solid #ccc;
        cursor: all-scroll;
    }
    
.box img {
    	width: 100%;
	}

.mask {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: yellow;
    opacity: .3;
	}

.big {
	    display: none;
	    position: absolute;
	    left: 100%;
	    top: -1px;
	    width: 500px;
	    height: 500px;
	    border: 1px solid #ccc;
	    overflow: hidden;
	}

.big img {
    position: absolute;
    width: 180%;
}

js代码

let box = document.querySelector('.box');
let mask = document.querySelector('.mask');
let 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) {
    let x = e.pageX - this.offsetLeft - (mask.offsetWidth / 2);
    let y = e.pageY - this.offsetTop - (mask.offsetHeight / 2);
    let maskMax = box.clientWidth - mask.clientWidth; // 150
    if (x <= 0) {
        x = 0;
    } else if (x >= maskMax) {
        x = maskMax;
    }
    if (y <= 0) {
        y = 0;
    } else if (y >= maskMax) {
        y = maskMax;
    }
    mask.style.left = x + 'px';
    mask.style.top = y + 'px';

    // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
    let bigImg = big.querySelector('img');
    // 遮挡层最大移动距离
    let maxMove = bigImg.clientWidth - big.clientWidth;
    let moveX = x * maxMove / maskMax;
    let moveY = y * maxMove / maskMax;
    bigImg.style.left = -moveX + 'px';
    bigImg.style.top = -moveY + 'px';
})

3. Scroll系列

4. 三大系列对比

• clientWidth获得的是盒子的宽度
• scrollWidth获得的是盒子里实际元素的宽度