微件:配队模拟器

<script> $(document).ready(function() {

   // 点击角色槽位显示选择窗口
   $('#character-slot').on('click', function() {
       $('#character-modal').fadeIn(200);
   });
   
   // 关闭角色选择窗口
   $('#close-character-modal').on('click', function() {
       $('#character-modal').fadeOut(200);
   });
   
   // 点击遮罩层关闭窗口
   $('#character-modal').on('click', function(e) {
       if (e.target === this) {
           $(this).fadeOut(200);
       }
   });
   
   // 选择角色
   $(document).on('click', '.character-option', function() {
       var characterName = $(this).data('name');
       
       // 从点击的元素中复制图片
       var $clickedElement = $(this);
       var $imageElement = $clickedElement.find('img').first();
       
       if ($imageElement.length > 0) {
           // 克隆图片元素
           var $clonedImage = $imageElement.clone();
           
           // 设置图片大小
           $clonedImage.attr('width', '150');
           $clonedImage.attr('height', '260');
           $clonedImage.css({
               'width': '150px',
               'height': '260px',
               'object-fit': 'cover'
           });
           
           // 清空槽位并添加图片
           $('#character-slot').empty().append($clonedImage);
           $('#character-slot').css('border', 'none');
       }
       
       // 关闭选择窗口
       $('#character-modal').fadeOut(200);
   });

}); </script>

<style> .character-option:hover {

   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);

} </style>