Shadow effect with custom shapes

使用自定义形状创建视图阴影
本文介绍了一种利用自定义形状为Android视图轻松创建阴影效果的方法。通过将阴影层作为背景并叠加内容层,同时对各层进行位移以实现阴影效果。XML示例展示了如何设置不同状态下的阴影及颜色。

It’s easy to create a shadow for your views using custom shapes.


The idea it’s that you create the shadow layer as background first and the content layers on top of that.
But you also need to displace the layers in order to create the shadow effect.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#66000000" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="4dp" android:right="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

<!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> /* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 页面基础样式 */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f2f5; /* 简约的浅灰色背景 */ min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 0px; } /* 轮播主容器 */ .carousel-container { max-width: 80%; width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 微妙的阴影 */ margin: 0 auto; } /* 轮播轨道 */ .carousel { display: flex; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); height: 400px; } /* 轮播项 */ .carousel-item { min-width: 25%; /* 默认每屏显示4张 */ height: 100%; position: relative; overflow: hidden; transition: transform 0.3s; } /* 图片悬停效果 */ .carousel-item:hover { transform: scale(1.03); z-index: 2; } /* 图片样式 */ .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 图片信息面板 */ .image-info { position: absolute; height: 190px; /* 统一高度 */ bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; padding: 15px; transform: translateY(0); transition: transform 0.3s ease; } /* 悬停时显示信息 */ .carousel-item:hover .image-info { transform: translateY(100%); } /* 信息标题 */ .image-info h3 { margin-bottom: 5px; font-size: 1.1rem; font-weight: 600; } /* 信息描述 */ .image-info p { font-size: 0.9rem; opacity: 0.9; } /* 控制按钮容器 */ .carousel-controls { display: flex; justify-content: center; gap: 15px; margin-top: 25px; } /* 简约按钮样式 */ .control-btn { background: #000; color: #fff; border: 2px solid #e0e0e0; padding: 10px 25px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: all 0.3s; min-width: 120px; } /* 按钮悬停效果 */ .control-btn:hover { background: #fff; border-color: #000; color: #000; } /* 按钮活动状态 */ .control-btn:active { transform: translateY(1px); } /* 指示器容器 */ .indicator { display: flex; justify-content: center; gap: 10px; margin-top: 20px; padding: 5px; } /* 指示点样式 */ .indicator-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; transition: all 0.3s; } /* 当前激活的指示点 */ .indicator-dot.active { background: #000; transform: scale(1.2); } /* 响应式设计 */ @media (max-width: 900px) { .carousel-item { min-width: 33.333%; /* 中等屏幕每屏显示3张 */ } } @media (max-width: 700px) { .carousel-item { min-width: 50%; /* 小屏幕每屏显示2张 */ } .carousel { height: 350px; } } @media (max-width: 500px) { .carousel-item { min-width: 100%; /* 超小屏幕每屏显示1张 */ } .carousel { height: 300px; } .carousel-controls { flex-wrap: wrap; } .control-btn { min-width: 100px; padding: 8px 15px; } } </style> </head> <body> <!-- 轮播主容器 --> <div class="carousel-container"> <!-- 轮播轨道 --> <div class="carousel"> <!-- 轮播项1 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Lamination-Gloss_Matte1_compressed.png" alt="Lamination (Gloss/Matte)"> <div class="image-info"> <h3>Lamination (Gloss/Matte)</h3> <p>– Applying a thin plastic film over the printed sheet to enhance scratch resistance, moisture protection and overall durability. Gloss lamination yields a shiny surface, while matte lamination gives a low-sheen, soft-touch effect.</p> </div> </div> <!-- 轮播项2 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/UV-Coating-Spot_Overall_compressed.png" alt="UV Coating (Spot/Overall)"> <div class="image-info"> <h3>UV Coating (Spot/Overall)</h3> <p>– Spreading a liquid UV-curable varnish onto either selected areas (spot UV) or the entire sheet, then instantly curing it under UV light. Creates high gloss and tactile contrast.</p> </div> </div> <!-- 轮播项3 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Hot-Foil-Stamping_compressed.png" alt="Hot Foil Stamping"> <div class="image-info"> <h3>Hot Foil Stamping</h3> <p>– Transferring metallic or pigmented foil onto specific areas of the print using heat and pressure. Delivers a premium metallic sheen (gold, silver, colored foils) for logos or decorative accents.</p> </div> </div> <!-- 轮播项4 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Embossing-_-Debossing1_compressed.png" alt="Embossing / Debossing"> <div class="image-info"> <h3>Embossing / Debossing</h3> <p>– Pressing the paper between male and female dies to create a raised (emboss) or recessed (deboss) 3D relief. Adds tactile interest and a sense of depth.</p> </div> </div> <!-- 轮播项5 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Die-Cutting_compressed.png" alt="Die-Cutting"> <div class="image-info"> <h3>Die-Cutting</h3> <p>– Using a custom-made metal die to cut the printed sheet into precise shapes or create windows/slots. Essential for producing custom box shapes, hang-tabs, or intricate cut-outs.</p> </div> </div> <!-- 轮播项6 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Creasing-Folding-Crease_compressed.png" alt="Creasing (Folding Crease)"> <div class="image-info"> <h3>Creasing (Folding Crease)</h3> <p>– Impressing a crease line on the sheet to facilitate clean, accurate folds without cracking the coating or ink. Critical for boxes, folders, and other folded structures.</p> </div> </div> <!-- 轮播项7 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Spot-UV-Emboss-Combination_compressed.png" alt="Spot UV + Emboss Combination"> <div class="image-info"> <h3>Spot UV + Emboss Combination</h3> <p>– First applying spot UV coating, then embossing the same area to create a shiny, raised element. Enhances both visual shine and tactile relief simultaneously.</p> </div> </div> <!-- 轮播项8 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Laser-Finishing-Holographic-Etch-Combination_compressed.png" alt="Laser Finishing + Holographic Etch Combination"> <div class="image-info"> <h3>Laser Finishing + Holographic Etch Combination</h3> <p>– First using a focused laser beam to engrave microscopic holographic patterns onto foil or film, then sealing the treated surface through heat or UV curing to lock in the effect. Creates vivid, color-shifting visuals that shimmer with every change in viewing angle and imparts subtle textural relief, adding a futuristic premium look and an effective anti-counterfeiting feature.</p> <p>• Pearlescent varnish for shimmering, iridescent highlights</p> <p>• Matte varnish for a soft, low-gloss finish</p> <p>• Scented varnish that releases fragrance when touched</p> </div> </div> </div> <!-- 控制按钮 --> <div class="carousel-controls"> <button class="control-btn" id="prevBtn">Previous</button> <button class="control-btn" id="nextBtn">next</button> <button class="control-btn" id="autoBtn">暂停轮播</button> </div> <!-- 指示器 --> <div class="indicator"> <div class="indicator-dot active" data-index="0"></div> <div class="indicator-dot" data-index="1"></div> <div class="indicator-dot" data-index="2"></div> <div class="indicator-dot" data-index="3"></div> </div> </div> <script> // 当文档加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 获取DOM元素 const carousel = document.querySelector('.carousel'); const items = document.querySelectorAll('.carousel-item'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const autoBtn = document.getElementById('autoBtn'); const dots = document.querySelectorAll('.indicator-dot'); // 初始化变量 let currentIndex = 0; let itemsPerView = calculateItemsPerView(); let autoPlayInterval; let isAutoPlay = true; // 计算当前视图显示的项目数 function calculateItemsPerView() { const width = window.innerWidth; if (width <= 500) return 1; if (width <= 700) return 2; if (width <= 900) return 3; return 4; } // 更新轮播位置 function updateCarousel() { // 计算每个项目的宽度百分比 const itemWidth = 100 / itemsPerView; // 计算偏移量 const offset = -currentIndex * itemWidth; // 应用转换效果 carousel.style.transform = `translateX(${offset}%)`; // 更新指示点状态 dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentIndex); }); } // 下一张 function nextSlide() { // 计算最大索引 const maxIndex = items.length - itemsPerView; // 更新当前索引(循环) currentIndex = currentIndex >= maxIndex ? 0 : currentIndex + 1; updateCarousel(); } // 上一张 function prevSlide() { // 计算最大索引 const maxIndex = items.length - itemsPerView; // 更新当前索引(循环) currentIndex = currentIndex <= 0 ? maxIndex : currentIndex - 1; updateCarousel(); } // 自动轮播 function startAutoPlay() { if (isAutoPlay) { // 设置轮播间隔 autoPlayInterval = setInterval(nextSlide, 3000); // 更新按钮文本 autoBtn.textContent = 'stop'; } } // 停止自动轮播 function stopAutoPlay() { // 清除轮播间隔 clearInterval(autoPlayInterval); // 更新按钮文本 autoBtn.textContent = 'start'; } // 切换自动轮播状态 function toggleAutoPlay() { // 反转自动播放状态 isAutoPlay = !isAutoPlay; if (isAutoPlay) { startAutoPlay(); } else { stopAutoPlay(); } } // 初始化轮播 function init() { // 计算每屏显示数量 itemsPerView = calculateItemsPerView(); // 更新轮播位置 updateCarousel(); // 开始自动播放 startAutoPlay(); } // 事件监听器 nextBtn.addEventListener('click', () => { nextSlide(); // 如果自动播放已暂停,则停止轮播 if (!isAutoPlay) stopAutoPlay(); }); prevBtn.addEventListener('click', () => { prevSlide(); // 如果自动播放已暂停,则停止轮播 if (!isAutoPlay) stopAutoPlay(); }); autoBtn.addEventListener('click', toggleAutoPlay); // 为每个指示点添加点击事件 dots.forEach(dot => { dot.addEventListener('click', () => { // 获取并设置当前索引 currentIndex = parseInt(dot.getAttribute('data-index')); updateCarousel(); // 如果自动播放已暂停,则停止轮播 if (!isAutoPlay) stopAutoPlay(); }); }); // 窗口大小变化时重新计算 window.addEventListener('resize', () => { // 重新计算每屏显示数量 itemsPerView = calculateItemsPerView(); // 更新轮播位置 updateCarousel(); }); // 初始化轮播 init(); }); </script> </body> </html> 这个代码为什么修改了网页的字体样式,怎么修改可以让这个代码不影响网页的字体样式
06-14
<!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> /* 全局样式 */ * { box-sizing: border-box; } /* 导航栏样式 - 优化 */ .navbar { background-color: transparent; position: relative; padding: 15px 0; margin-bottom: 30px; } .nav-container { width: 90%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; /* 居中导航 */ } .nav-links { display: flex; list-style: none; gap: 15px; /* 按钮间距 */ } .nav-item { margin: 0 5px; } .nav-link { text-decoration: none; color: #0566a8; /* 蓝色文字 */ background: white; /* 白色背景 */ font-weight: 500; padding: 10px 25px; border-radius: 30px; /* 圆角 */ border: 2px solid #0566a8; /* 蓝色边框 */ transition: all 0.3s ease; display: inline-block; text-align: center; min-width: 120px; } .nav-link:hover { background: rgba(5, 102, 168, 0.1); } .nav-link.active { background: #0566a8; /* 蓝色背景 */ color: white; /* 白色文字 */ font-weight: 600; } /* 模块容器样式 */ .module-container { width: 90%; max-width: 1200px; margin: 40px auto; position: relative; min-height: 600px; overflow: hidden; } .module { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s; z-index: 1; } .module.active { opacity: 1; visibility: visible; transform: translateY(0); z-index: 2; } /* 模块特定样式 */ .module-content { background-color: #fff; border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); overflow: hidden; margin-bottom: 30px; } /* 响应式设计 */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { margin-top: 15px; flex-wrap: wrap; } .nav-item { margin: 5px 15px 5px 0; } .module-container { margin: 20px auto; } } /* 模块1样式 */ #module1 .minimal-process { max-width: 100%; margin: 0; } /* 模块2样式 */ #module2 .fp-carousel-module { max-width: 100%; margin: 0; } /* 模块3样式 */ #module3 .luxemg-container { max-width: 100%; padding: 20px; } /* 模块4样式 */ #module4 .carousel-container { max-width: 100%; margin: 0; } </style> </head> <body> <!-- 导航栏 --> <nav class="navbar"> <div class="nav-container"> <ul class="nav-links"> <li class="nav-item"> <a href="#" class="nav-link active" data-target="module1">服务流程</a> </li> <li class="nav-item"> <a href="#" class="nav-link" data-target="module2">3D轮播</a> </li> <li class="nav-item"> <a href="#" class="nav-link" data-target="module3">材料展示</a> </li> <li class="nav-item"> <a href="#" class="nav-link" data-target="module4">图片轮播</a> </li> </ul> </div> </nav> <!-- 模块容器 --> <div class="module-container"> <!-- 模块1:服务流程 --> <div id="module1" class="module active"> <div class="module-content"> <!-- 代码1的内容 --> <div class="minimal-process"> <div class="process-container"> <!-- 步骤 1 --> <div class="process-step"> <div class="step-icon"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/youxiang.png" alt="咨询"> </div> <div class="step-content"> <span class="step-number">1</span> <h3 class="step-title">Demand consultation</h3> <p class="step-desc">The customer sends a contact email to get the consultation.</p> </div> </div> <!-- 步骤 2 --> <div class="process-step"> <div class="step-icon"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/kefu.png" alt="设计"> </div> <div class="step-content"> <span class="step-number">2</span> <h3 class="step-title">Solution Design</h3> <p class="step-desc">The business manager conducts content docking with the customer.</p> </div> </div> <!-- 步骤 3 --> <div class="process-step"> <div class="step-icon"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/emptybox.png" alt="实施"> </div> <div class="step-content"> <span class="step-number">3</span> <h3 class="step-title">Professional implementation</h3> <p class="step-desc">We make a samptle according to the customer's requirements and confirm the details.</p> </div> </div> <!-- 步骤 4 --> <div class="process-step"> <div class="step-icon"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/woshou.png" alt="交付"> </div> <div class="step-content"> <span class="step-number">4</span> <h3 class="step-title">Successfully placed order</h3> <p class="step-desc">After the customer's confirmation,the customer pays the deposit and places the order.</p> </div> </div> </div> </div> </div> </div> <!-- 模块2:3D轮播 --> <div id="module2" class="module"> <div class="module-content"> <!-- 代码2的内容 --> <div class="fp-carousel-module"> <div class="fp-carousel-container"> <div class="fp-carousel-item fp-active" data-index="0"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-14_59_30_compressed.png" alt="Printing"> <div class="fp-description">Printing:Transfer your design onto paper or board using offset, digital or flexo presses.</div> </div> <div class="fp-carousel-item fp-next" data-index="1"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-15_02_51_compressed.png" alt="Surface Finishing"> <div class="fp-description">Surface Finishing:Enhance and protect the print by adding coatings or varnishes (e.g. UV, matte or gloss).</div> </div> <div class="fp-carousel-item fp-next-far" data-index="2"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-15_05_48_compressed.png"> <div class="fp-description">Lamination (Mounting):Bond the printed sheet to a sturdier substrate or apply a clear film for extra durability.</div> </div> <div class="fp-carousel-item fp-prev" data-index="3"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-15_11_40_compressed.png" alt="Die-Cutting"> <div class="fp-description">Die-Cutting:Use a custom metal die to cut out shapes, create windows or trim the edges precisely.</div> </div> <div class="fp-carousel-item fp-prev-far" data-index="4"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-15_21_01_compressed.png"> <div class="fp-description">Gluing & Assembly:Fold and glue the die-cut pieces together to form boxes, folders or other finished items.</div> </div> <div class="fp-carousel-item fp-prev-far" data-index="5"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-15_24_28_compressed.png" alt="Packing & Shipping"> <div class="fp-description">Packing & Shipping:Stack, bundle or carton the completed products, then palletize and dispatch them to the client.</div> </div> <div class="fp-nav-btn fp-prev-btn"> <div class="fp-arrow">❮</div> </div> <div class="fp-nav-btn fp-next-btn"> <div class="fp-arrow">❯</div> </div> </div> </div> </div> </div> <!-- 模块3:材料展示 --> <div id="module3" class="module"> <div class="module-content"> <!-- 代码3的内容 --> <div class="luxemg-container"> <!-- Paper board 部分 --> <h2 class="luxemg-section-title">Paper board</h2> <div class="luxemg-grid"> <!-- SBS C1S --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-16_59_47_compressed.png" alt="SBS C1S" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">SBS C1S</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-sbs-c1s">VIEW MORE</button> </div> </div> <!-- SBS C2S --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-16_45_42_compressed.png" alt="SBS C2S" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">SBS C2S</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-sbs-c2s">VIEW MORE</button> </div> </div> <!-- CCNB --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-16_44_52_compressed.png" alt="CCNB" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">CCNB</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-ccnb">VIEW MORE</button> </div> </div> <!-- UUK --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=UUK" alt="UUK" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">UUK</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-uuk">VIEW MORE</button> </div> </div> <!-- Metallic --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=Metallic" alt="Metallic" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">Metallic</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-metallic">VIEW MORE</button> </div> </div> </div> <!-- Corrugated 部分 --> <h2 class="luxemg-section-title">Corrugated</h2> <!-- single wall部分 --> <h3 class="luxemg-subsection-title">single wall</h3> <div class="luxemg-grid"> <!-- A Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=A+Flute" alt="A Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">A Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-a-flute">VIEW MORE</button> </div> </div> <!-- C Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=C+Flute" alt="C Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">C Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-c-flute">VIEW MORE</button> </div> </div> <!-- B Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=B+Flute" alt="B Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">B Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-b-flute">VIEW MORE</button> </div> </div> <!-- E Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=E+Flute" alt="E Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">E Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-e-flute">VIEW MORE</button> </div> </div> <!-- F Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=F+Flute" alt="F Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">F Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-f-flute">VIEW MORE</button> </div> </div> </div> <!-- double wall部分 --> <h3 class="luxemg-subsection-title">double wall</h3> <div class="luxemg-grid"> <!-- B/C Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=B/C+Flute" alt="B/C Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">B/C Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-bc-flute">VIEW MORE</button> </div> </div> <!-- E/C Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=E/C+Flute" alt="E/C Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">E/C Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-ec-flute">VIEW MORE</button> </div> </div> <!-- E/B Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=E/B+Flute" alt="E/B Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">E/B Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-eb-flute">VIEW MORE</button> </div> </div> <!-- F/E Flute --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=F/E+Flute" alt="F/E Flute" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">F/E Flute</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-fe-flute">VIEW MORE</button> </div> </div> </div> <!-- Print 部分 --> <h2 class="luxemg-section-title">Print</h2> <div class="luxemg-grid"> <!-- CMYK --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=CMYK" alt="CMYK" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">CMYK</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-cmyk">VIEW MORE</button> </div> </div> <!-- Pantone --> <div class="luxemg-card"> <div class="luxemg-card-image"> <img src="https://via.placeholder.com/300x240?text=Pantone" alt="Pantone" class="luxemg-card-img"> </div> <div class="luxemg-card-content"> <h3 class="luxemg-card-title">Pantone</h3> <button class="luxemg-detail-btn" data-luxemg-modal="modal-pantone">VIEW MORE</button> </div> </div> </div> </div> </div> </div> <!-- 模块4:图片轮播 --> <div id="module4" class="module"> <div class="module-content"> <!-- 代码4的内容 --> <div class="carousel-container"> <!-- 轮播轨道 --> <div class="carousel"> <!-- 轮播项1 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Lamination-Gloss_Matte1_compressed.png" alt="Lamination (Gloss/Matte)"> <div class="image-info"> <h3>Lamination (Gloss/Matte)</h3> <p>– Applying a thin plastic film over the printed sheet to enhance scratch resistance, moisture protection and overall durability. Gloss lamination yields a shiny surface, while matte lamination gives a low-sheen, soft-touch effect.</p> </div> </div> <!-- 轮播项2 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/UV-Coating-Spot_Overall_compressed.png" alt="UV Coating (Spot/Overall)"> <div class="image-info"> <h3>UV Coating (Spot/Overall)</h3> <p>– Spreading a liquid UV-curable varnish onto either selected areas (spot UV) or the entire sheet, then instantly curing it under UV light. Creates high gloss and tactile contrast.</p> </div> </div> <!-- 轮播项3 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Hot-Foil-Stamping_compressed.png" alt="Hot Foil Stamping"> <div class="image-info"> <h3>Hot Foil Stamping</h3> <p>– Transferring metallic or pigmented foil onto specific areas of the print using heat and pressure. Delivers a premium metallic sheen (gold, silver, colored foils) for logos or decorative accents.</p> </div> </div> <!-- 轮播项4 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Embossing-_-Debossing1_compressed.png" alt="Embossing / Debossing"> <div class="image-info"> <h3>Embossing / Debossing</h3> <p>– Pressing the paper between male and female dies to create a raised (emboss) or recessed (deboss) 3D relief. Adds tactile interest and a sense of depth.</p> </div> </div> <!-- 轮播项5 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Die-Cutting_compressed.png" alt="Die-Cutting"> <div class="image-info"> <h3>Die-Cutting</h3> <p>– Using a custom-made metal die to cut the printed sheet into precise shapes or create windows/slots. Essential for producing custom box shapes, hang-tabs, or intricate cut-outs.</p> </div> </div> <!-- 轮播项6 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Creasing-Folding-Crease_compressed.png" alt="Creasing (Folding Crease)"> <div class="image-info"> <h3>Creasing (Folding Crease)</h3> <p>– Impressing a crease line on the sheet to facilitate clean, accurate folds without cracking the coating or ink. Critical for boxes, folders, and other folded structures.</p> </div> </div> <!-- 轮播项7 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Spot-UV-Emboss-Combination_compressed.png" alt="Spot UV + Emboss Combination"> <div class="image-info"> <h3>Spot UV + Emboss Combination</h3> <p>– First applying spot UV coating, then embossing the same area to create a shiny, raised element. Enhances both visual shine and tactile relief simultaneously.</p> </div> </div> <!-- 轮播项8 --> <div class="carousel-item"> <img src="https://www.fetchingpack.com/wp-content/uploads/2025/06/Laser-Finishing-Holographic-Etch-Combination_compressed.png" alt="Holographic Foil Stamping"> <div class="image-info"> <h3>Holographic Foil Stamping</h3> <p>— Laser-etch microscopic holographic patterns onto foil, then heat- or UV-cure to lock in vibrant, angle-shifting colors and subtle texture for a premium anti-counterfeiting finish.</p> </div> </div> </div> <!-- 控制按钮 --> <div class="carousel-controls"> <button class="control-btn" id="prevBtn">Previous</button> <button class="control-btn" id="nextBtn">next</button> <button class="control-btn" id="autoBtn">暂停轮播</button> </div> <!-- 指示器 --> <div class="indicator"> <div class="indicator-dot active" data-index="0"></div> <div class="indicator-dot" data-index="1"></div> <div class="indicator-dot" data-index="2"></div> <div class="indicator-dot" data-index="3"></div> </div> </div> </div> </div> </div> <!-- 模态框容器 --> <div id="luxemg-modal-container" class="luxemg-modal-container"> <div class="luxemg-modal-wrapper"> <div class="luxemg-modal-content"> <div class="luxemg-modal-header"> <h3 id="luxemg-modal-title" class="luxemg-modal-title">Material Details</h3> <button id="luxemg-close-modal" class="luxemg-close-btn">×</button> </div> <div class="luxemg-modal-body"> <div class="luxemg-modal-image-container"> <img id="luxemg-modal-image" class="luxemg-modal-img" src="" alt="Material"> </div> <div class="luxemg-modal-description"> <div id="luxemg-modal-description" class="luxemg-modal-desc"></div> </div> </div> </div> </div> </div> <!-- JavaScript --> <script> // 导航切换功能 document.addEventListener('DOMContentLoaded', function() { // 导航切换 const navLinks = document.querySelectorAll('.nav-link'); const modules = document.querySelectorAll('.module'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // 获取目标模块ID const targetId = this.getAttribute('data-target'); // 更新导航状态 navLinks.forEach(l => l.classList.remove('active')); this.classList.add('active'); // 切换模块 modules.forEach(module => { module.classList.remove('active'); }); document.getElementById(targetId).classList.add('active'); }); }); // 初始化模块2的轮播功能 initCarousel(document.querySelector('#module2 .fp-carousel-module')); // 初始化模块3的模态框功能 initLuxemgGallery(); // 初始化模块4的轮播功能 initModule4Carousel(); }); // 模块2的轮播功能 function initCarousel(module) { const container = module.querySelector('.fp-carousel-container'); const items = Array.from(module.querySelectorAll('.fp-carousel-item')); const prevBtn = module.querySelector('.fp-prev-btn'); const nextBtn = module.querySelector('.fp-next-btn'); let currentIndex = 0; let isAnimating = false; // 初始化位置 updatePositions(); // 事件绑定函数 const bindEvents = function() { // 图片点击事件 items.forEach(item => { item.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; if (this.classList.contains('fp-next') || this.classList.contains('fp-next-far')) { navigate(1); } else if (this.classList.contains('fp-prev') || this.classList.contains('fp-prev-far')) { navigate(-1); } // 动画结束后重置标志 setTimeout(() => isAnimating = false, 700); }); }); // 容器区域点击 container.addEventListener('click', function(e) { if (isAnimating) return; isAnimating = true; const rect = container.getBoundingClientRect(); const clickX = e.clientX - rect.left; if (clickX > rect.width * 3/4) { navigate(1); } else if (clickX < rect.width * 1/4) { navigate(-1); } setTimeout(() => isAnimating = false, 700); }); // 导航按钮 prevBtn.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; navigate(-1); setTimeout(() => isAnimating = false, 700); }); nextBtn.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; navigate(1); setTimeout(() => isAnimating = false, 700); }); // 键盘导航 document.addEventListener('keydown', function(e) { if (isAnimating) return; isAnimating = true; if (e.key === 'ArrowLeft') { navigate(-1); } else if (e.key === 'ArrowRight') { navigate(1); } setTimeout(() => isAnimating = false, 700); }); // 响应式调整 window.addEventListener('resize', function() { updatePositions(); }); }; // 导航函数 function navigate(direction) { currentIndex = (currentIndex + direction + items.length) % items.length; updatePositions(); } // 更新位置 function updatePositions() { items.forEach((item, index) => { item.classList.remove('fp-active', 'fp-prev', 'fp-next', 'fp-prev-far', 'fp-next-far', 'fp-hidden'); const position = (index - currentIndex + items.length) % items.length; if (position === 0) { item.classList.add('fp-active'); } else if (position === 1) { item.classList.add('fp-next'); } else if (position === 2) { item.classList.add('fp-next-far'); } else if (position === items.length - 1) { item.classList.add('fp-prev'); } else if (position === items.length - 2) { item.classList.add('fp-prev-far'); } else { item.classList.add('fp-hidden'); } }); } // 初始化事件绑定 bindEvents(); } // 模块3的模态框功能 function initLuxemgGallery() { // 材料详情数据 const luxemgMaterialDetails = { // Paper board "modal-sbs-c1s": { title: "SBS C1S", image: "https://www.fetchingpack.com/wp-content/uploads/2025/06/ChatGPT-Image-2025年6月18日-16_59_47_compressed.png", description: "<p>SBS C1S(Solid Bleached Sulfate – Coated One Side) is a premium-grade paperboard made from 100% virgin bleached wood pulp. It is coated on one side to provide an exceptionally smooth and white printing surface, while the reverse side remains uncoated for functional versatility.</p><p>Key Features:<br>- Bright White Appearance: Produced from fully bleached fibers for a clean, uniform, and high-end look.<br>- Coated One Side (C1S): One side has a clay coating for excellent printability; the reverse side is uncoated for better glue adhesion or writing.<br>- Excellent Print Surface: Ideal for offset, digital, and specialty printing methods; supports vibrant color reproduction and fine detail.<br>- High Stiffness and Strength: Offers good structural integrity, making it suitable for rigid packaging and die-cut designs.<br>- Environmentally Friendly: Recyclable, biodegradable, and available with FSC certification upon request.</p><p>Main Advantages:<br>✅ Preferred choice for premium packaging (cosmetics, personal care, high-end retail)<br>✅ Superior surface for specialty finishes like foil stamping, embossing, and spot UV<br>✅ Balanced combination of print quality and converting performance<br>✅ Consistent white core and surface enhance the perceived value of the final product<br>✅ Compatible with folding, scoring, gluing, and other post-press operations</p>" }, // ... 其他材料详情 }; // DOM元素引用 const luxemgModalContainer = document.getElementById('luxemg-modal-container'); const luxemgModalTitle = document.getElementById('luxemg-modal-title'); const luxemgModalImage = document.getElementById('luxemg-modal-image'); const luxemgModalDescription = document.getElementById('luxemg-modal-description'); const luxemgCloseModal = document.getElementById('luxemg-close-modal'); // 打开模态框函数 function openLuxemgModal(modalId) { const material = luxemgMaterialDetails[modalId]; const modalContent = luxemgModalContainer.querySelector('.luxemg-modal-content'); if (!material) { console.error("Material details not found for:", modalId); return; } // 填充模态框内容 luxemgModalTitle.textContent = material.title; luxemgModalImage.src = material.image; luxemgModalImage.alt = material.title; luxemgModalDescription.innerHTML = material.description; // 显示模态框 luxemgModalContainer.style.display = 'block'; // 强制重绘确保动画执行 void luxemgModalContainer.offsetWidth; // 应用显示动画 setTimeout(() => { luxemgModalContainer.style.opacity = '1'; modalContent.style.transform = 'scale(1)'; modalContent.style.opacity = '1'; }, 10); // 禁止背景滚动 document.body.style.overflow = 'hidden'; } // 关闭模态框函数 function closeLuxemgModal() { const modalContent = luxemgModalContainer.querySelector('.luxemg-modal-content'); luxemgModalContainer.style.opacity = '0'; modalContent.style.transform = 'scale(0.95)'; modalContent.style.opacity = '0'; setTimeout(() => { luxemgModalContainer.style.display = 'none'; document.body.style.overflow = ''; }, 300); } // 事件绑定函数 luxemgCloseModal.addEventListener('click', closeLuxemgModal); luxemgModalContainer.addEventListener('click', function(e) { if (e.target === this) closeLuxemgModal(); }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLuxemgModal(); }); document.addEventListener('click', function(e) { if (e.target.classList.contains('luxemg-detail-btn')) { const modalId = e.target.getAttribute('data-luxemg-modal'); openLuxemgModal(modalId); } }); } // 模块4的轮播功能 function initModule4Carousel() { // 获取DOM元素 const carousel = document.querySelector('#module4 .carousel'); const items = document.querySelectorAll('#module4 .carousel-item'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const autoBtn = document.getElementById('autoBtn'); const dots = document.querySelectorAll('#module4 .indicator-dot'); // 初始化变量 let currentIndex = 0; let itemsPerView = calculateItemsPerView(); let autoPlayInterval; let isAutoPlay = true; // 计算当前视图显示的项目数 function calculateItemsPerView() { const width = window.innerWidth; if (width <= 500) return 1; if (width <= 700) return 2; if (width <= 900) return 3; return 4; } // 更新轮播位置 function updateCarousel() { // 计算每个项目的宽度百分比 const itemWidth = 100 / itemsPerView; // 计算偏移量 const offset = -currentIndex * itemWidth; // 应用转换效果 carousel.style.transform = `translateX(${offset}%)`; // 更新指示点状态 dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentIndex); }); } // 下一张 function nextSlide() { // 计算最大索引 const maxIndex = items.length - itemsPerView; // 更新当前索引(循环) currentIndex = currentIndex >= maxIndex ? 0 : currentIndex + 1; updateCarousel(); } // 上一张 function prevSlide() { // 计算最大索引 const maxIndex = items.length - itemsPerView; // 更新当前索引(循环) currentIndex = currentIndex <= 0 ? maxIndex : currentIndex - 1; updateCarousel(); } // 自动轮播 function startAutoPlay() { if (isAutoPlay) { // 设置轮播间隔 autoPlayInterval = setInterval(nextSlide, 3000); // 更新按钮文本 autoBtn.textContent = 'stop'; } } // 停止自动轮播 function stopAutoPlay() { // 清除轮播间隔 clearInterval(autoPlayInterval); // 更新按钮文本 autoBtn.textContent = 'start'; } // 切换自动轮播状态 function toggleAutoPlay() { // 反转自动播放状态 isAutoPlay = !isAutoPlay; if (isAutoPlay) { startAutoPlay(); } else { stopAutoPlay(); } } // 初始化轮播 function init() { // 计算每屏显示数量 itemsPerView = calculateItemsPerView(); // 更新轮播位置 updateCarousel(); // 开始自动播放 startAutoPlay(); } // 事件监听器 nextBtn.addEventListener('click', () => { nextSlide(); // 如果自动播放已暂停,则停止轮播 if (!isAutoPlay) stopAutoPlay(); }); prevBtn.addEventListener('click', () => { prevSlide(); // 如果自动播放已暂停,则停止轮播 if (!isAutoPlay) stopAutoPlay(); }); autoBtn.addEventListener('click', toggleAutoPlay); // 为每个指示点添加点击事件 dots.forEach(dot => { dot.addEventListener('click', () => { // 获取并设置当前索引 currentIndex = parseInt(dot.getAttribute('data-index')); updateCarousel(); // 如果自动播放已暂停,则停止轮播 if (!isAutoPlay) stopAutoPlay(); }); }); // 窗口大小变化时重新计算 window.addEventListener('resize', () => { // 重新计算每屏显示数量 itemsPerView = calculateItemsPerView(); // 更新轮播位置 updateCarousel(); }); // 初始化轮播 init(); } </script> </body> </html> 将这个代码中的按钮都改成#0566a8色的字和微微圆角边框,代码四下方的原点增加到8个
07-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值