HTML5 鼠标滚轮控制物体放大缩小特效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标滚轮缩放特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            color: white;
        }
        
        #container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .shape {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.1s ease-out;
            cursor: pointer;
        }
        
        .info {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }
        
        .info a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
        }
        
        .title {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
            font-size: 24px;
            text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="title">鼠标滚轮缩放特效</div>
        <div class="shape" id="shape">
            <svg width="200" height="200" viewBox="0 0 200 200">
                <path d="M100 0 L150 50 L200 0 L200 50 L150 100 L200 150 L200 200 L150 150 L100 200 L50 150 L0 200 L0 150 L50 100 L0 50 L0 0 L50 50 Z" 
                      fill="none" stroke="#4cc9f0" stroke-width="3"/>
            </svg>
        </div>
        <div class="info">

        </div>
    </div>

    <script>
        const shape = document.getElementById('shape');
        let scale = 1;
        const minScale = 0.1;
        const maxScale = 5;
        const scaleStep = 0.05;
        
        // 鼠标滚轮事件
        window.addEventListener('wheel', function(e) {
            e.preventDefault();
            
            // 计算新的缩放比例
            if (e.deltaY < 0) {
                // 向上滚动 - 放大
                scale = Math.min(scale + scaleStep, maxScale);
            } else {
                // 向下滚动 - 缩小
                scale = Math.max(scale - scaleStep, minScale);
            }
            
            // 应用缩放变换
            shape.style.transform = `translate(-50%, -50%) scale(${scale})`;
            
            // 根据缩放级别改变颜色
            const hue = (scale * 60) % 360;
            shape.querySelector('path').setAttribute('stroke', `hsl(${hue}, 80%, 60%)`);
        }, { passive: false });
        
        // 鼠标移动时改变形状位置
        document.addEventListener('mousemove', function(e) {
            if (scale > 1.5) {
                const moveX = (e.clientX - window.innerWidth / 2) * 0.02;
                const moveY = (e.clientY - window.innerHeight / 2) * 0.02;
                shape.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px)) scale(${scale})`;
            }
        });
        
        // 双击重置缩放
        shape.addEventListener('dblclick', function() {
            scale = 1;
            shape.style.transform = 'translate(-50%, -50%) scale(1)';
            shape.querySelector('path').setAttribute('stroke', '#4cc9f0');
        });
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            if (scale > 1.5) {
                shape.style.transform = 'translate(-50%, -50%) scale(${scale})';
            }
        });
        
        // 添加动画效果
        function animatePulse() {
            const path = shape.querySelector('path');
            let growing = true;
            let currentWidth = 3;
            
            setInterval(() => {
                if (scale === 1) {  // 只在原始大小时脉动
                    if (growing) {
                        currentWidth += 0.05;
                        if (currentWidth >= 4) growing = false;
                    } else {
                        currentWidth -= 0.05;
                        if (currentWidth <= 2) growing = true;
                    }
                    path.setAttribute('stroke-width', currentWidth);
                }
            }, 50);
        }
        
        animatePulse();
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值