查看“︁微件:Card”︁的源代码

<noinclude>
此Widget为卡牌显示添加交互效果：
* 鼠标悬停时的动画效果
* 点击后显示放大的模态框
* 支持点击遮罩或关闭按钮关闭模态框

使用方法：在页面中添加 {{#widget:Card}}
</noinclude><includeonly>
<style>
/* 卡牌悬停动画 */
.card-deck-trans {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-deck-trans:hover {
    transform: translateY(-8px);
    filter: brightness(1.1);
}

.card-deck-trans:active {
    transform: translateY(-4px) scale(0.98);
}

/* 模态框样式 */
.card-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.card-modal-overlay.fade-in {
    opacity: 1;
}

.card-modal-overlay.fade-out {
    opacity: 0;
}

/* 关闭按钮 */
.card-modal-close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 10001;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-modal-close:hover {
    color: #ff6b6b;
    transform: scale(1.1);
}

/* 模态框中的卡牌容器 */
.card-modal-content {
    position: relative;
    z-index: 10000;
    animation: cardZoomIn 0.3s ease;
}

@keyframes cardZoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 放大后的卡牌样式 */
.card-modal-content .card-deck-trans {
    width: 270px !important;
    height: 384px !important;
    transform: none !important;
    filter: none !important;
}

.card-modal-content .card-deck-trans:hover {
    transform: none !important;
    filter: none !important;
}

.card-modal-content .card-deck {
    transform: scale(0.6) !important;
}

/* 防止模态框打开时页面滚动 */
body.card-modal-open {
    overflow: hidden;
}
</style>

<script>
(function() {
    'use strict';
    
    // 确保DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCardWidget);
    } else {
        initCardWidget();
    }
    
    function initCardWidget() {
        // 创建模态框元素（如果不存在）
        let modalOverlay = document.querySelector('.card-modal-overlay');
        
        if (!modalOverlay) {
            modalOverlay = document.createElement('div');
            modalOverlay.className = 'card-modal-overlay';
            modalOverlay.innerHTML = '<span class="card-modal-close">&times;</span><div class="card-modal-content"></div>';
            document.body.appendChild(modalOverlay);
        }
        
        const modalContent = modalOverlay.querySelector('.card-modal-content');
        const closeButton = modalOverlay.querySelector('.card-modal-close');
        
        // 关闭模态框函数
        function closeModal() {
            modalOverlay.classList.add('fade-out');
            setTimeout(function() {
                modalOverlay.classList.remove('active', 'fade-in', 'fade-out');
                modalContent.innerHTML = '';
                document.body.classList.remove('card-modal-open');
            }, 300);
        }
        
        // 打开模态框函数
        function openModal(cardElement) {
            const cardClone = cardElement.cloneNode(true);
            modalContent.innerHTML = '';
            modalContent.appendChild(cardClone);
            
            modalOverlay.classList.add('active');
            document.body.classList.add('card-modal-open');
            
            // 强制重绘后添加fade-in
            requestAnimationFrame(function() {
                modalOverlay.classList.add('fade-in');
            });
        }
        
        // 绑定关闭按钮事件
        closeButton.addEventListener('click', function(e) {
            e.stopPropagation();
            closeModal();
        });
        
        // 点击遮罩关闭
        modalOverlay.addEventListener('click', function(e) {
            if (e.target === modalOverlay) {
                closeModal();
            }
        });
        
        // ESC键关闭
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {
                closeModal();
            }
        });
        
        // 为所有卡牌绑定点击事件
        function bindCardEvents() {
            const cards = document.querySelectorAll('.card-deck-trans');
            
            cards.forEach(function(card) {
                // 避免重复绑定
                if (card.dataset.cardBound) return;
                card.dataset.cardBound = 'true';
                
                // 排除模态框内的卡牌
                if (card.closest('.card-modal-overlay')) return;
                
                card.addEventListener('click', function(e) {
                    e.preventDefault();
                    openModal(this);
                });
            });
        }
        
        // 初始绑定
        bindCardEvents();
        
        // 监听DOM变化，为动态加载的卡牌绑定事件
        const observer = new MutationObserver(function(mutations) {
            let shouldBind = false;
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length > 0) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === 1) {
                            if (node.classList && node.classList.contains('card-deck-trans')) {
                                shouldBind = true;
                            } else if (node.querySelector && node.querySelector('.card-deck-trans')) {
                                shouldBind = true;
                            }
                        }
                    });
                }
            });
            if (shouldBind) {
                bindCardEvents();
            }
        });
        
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
})();
</script>
</includeonly>