Product.ProductView产品展示功能示范脚本

admin

示例说明1：图片自适应垂直水平居中，不强制高宽比，带边框和阴影。
#ProductView li{ float:left; width:192px; height:222px; text-align:center; margin:10px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee;}
#ProductView .thumbs{ display:block;}
#ProductView .thumbs a{ display:table-cell; width:192px; height:192px; font-size:0; vertical-align:middle;}
#ProductView img{ max-width:192px; max-height:168px;}
#ProductView .atext{ display:block;}

示例说明2：图片自适应垂直水平居中，不强制高宽比。
#ProductView li{ float:left; width:198px; height:198px; text-align:center; margin:10px;}
#ProductView .thumbs{ display:block;}
#ProductView .thumbs a{ display:table-cell; width:198px; height:168px; font-size:0; vertical-align:middle;}
#ProductView img{ max-width:198px; max-height:168px;}
#ProductView .atext{ display:block;}

示例说明3：固定长宽，适合三列排版，鼠标HOVER由灰变蓝色，图片强制高宽比。
#ProductView ul li{ float:left; display:block; width:218px; height:220px; text-align:center; margin:14px; background:#efefef;}
#ProductView ul li:hover{ background:#00369B;}
#ProductView ul li img{ width:210px; height:180px; margin:4px;}
#ProductView ul li .atext{ line-height:30px; height:30px;}
#ProductView ul li:hover .atext{ color:#fff;}

admin

示例说明1升级示例：（HL）

点击箭头左或右滚动
DIV：
<div class="product">$func_product(navi=Nav2,css=Case,para=Product,len=12,rows=10,more=more)$</div>

JS：
if(jQuery("#Case #ProductView").length>0){ scrolling();}
function scrolling(){
var m=new Marquee(["Case","ProductView"]);
m.Direction=2;m.Step=2;m.Width=855;m.Height=185;m.Timer=20;m.DelayTime=0;m.WaitTime=0;m.ScrollStep=230;m.Start();
jQuery(".case #NavRight").click(function(){m.Direction=3;});
jQuery(".case #NavLeft").click(function(){        m.Direction=2;});
}

CSS:
#ProductView li{ float:left; width:260px; height:190px; text-align:center; margin:10px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee; position:relative;}
#ProductView .thumbs{ display:block;}
#ProductView .thumbs a{ display:table-cell; width:260px; height:160px; font-size:0; vertical-align:middle;}
#ProductView img{ max-width:260px; max-height:160px;}
#ProductView .atext{ display:block; line-height:30px;}
.product #ProductView li, .product #ProductView .thumbs a{ width:200px; height:160px;}
.product #ProductView img{ max-width:200px; max-height:160px;}
.product #ProductView .atext{ display:none;}
.product #ProductView li:hover a{ display:table-cell; width:200px; height:160px; line-height:160px; background:#000; opacity:.8; color:#fff; z-index:10; position:absolute;}

admin

示例说明1：图片自适应垂直水平居中，不强制高宽比，带边框和阴影。
LIST：1200像素 5列
#ProductView li,#ArticleView li{ float:left; width:200px; height:222px; text-align:center; margin:10px; margin-bottom:30px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee;}
#ProductView .thumbs,#ArticleView .thumbs{ display:block;}
#ProductView .thumbs a,#ArticleView .thumbs a{ display:table-cell; width:200px; height:192px; font-size:0; vertical-align:middle;}
#ProductView img,#ArticleView img{ max-width:200px; max-height:168px;}
#ProductView .atext,#ArticleView .atext{ display:block;}

LIST：1200像素 4列
#ProductView li,#ArticleView li{ float:left; width:268px; height:232px; text-align:center; margin:10px; margin-bottom:30px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee;}
#ProductView li:hover,#ArticleView li:hover{ border:1px solid #D70C19;}
#ProductView .thumbs,#ArticleView .thumbs{ display:block;}
#ProductView .thumbs a,#ArticleView .thumbs a{ display:table-cell; width:268px; height:192px; font-size:0; vertical-align:middle;}
#ProductView img,#ArticleView img{ max-width:268px; max-height:192px;}
#ProductView .atext,#ArticleView .atext{ display:block; line-height:30px;}

admin

Demo: meiyi

HTML:
<div class="product py-5">
    <div class="container-xxl">
        $func_product(navi=nav,title=11,memo=1,more=11,para=product,divi=none,rows=5,show=title|memo|more|content)$
    </div>
</div>


CSS:
.product {
    border-bottom: 1px solid $gray-300;

    .Margin {
        overflow: hidden;
    }

    .More {
        display: flex;
        flex: 1;
        justify-content: center;
        margin-bottom: 2rem;

        a {
            border: 1px solid $fst;
            color: $fst;
            padding: 10px 20px;
            border-radius: 20px;

            &:hover {
                background-color: $fst;
                color: white;
            }
        }
    }

    .container-xxl {
        .Content {
            // 容器样式（完整参数）
            position: relative;
            height: 30vh;
            min-height: 300px;
            width: 100%;

            // 内边距容器（完整保留原有class）
            .Margin {
                height: 100%;
                width: 100%;
                padding: 20px 0;
                box-sizing: border-box;

                #ProductView ul {

                    li {

                        .gutters {

                            .thumbs {}

                            .title {

                            }
                        }
                    }
                }

                // 文章视图容器（完整保留原有id）
                #ProductView {
                    display: flex;
                    flex-flow: row wrap;
                    flex: 1;
                    margin-left: -15px;
                    margin-right: -15px;
                    height: calc(100% - 40px);
                    width: 100%;
                    position: relative;
                    overflow: visible;

                    // 列表样式（完整参数）
                    ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        height: 100%;
                        width: 100%;
                        position: relative;

                        // 列表项完整样式
                        li {
                            display: flex;
                            flex-flow: row wrap;
                            flex: 1 0 50%;
                            padding: 15px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 100%;
                            // height: 720px;
                            transform-style: preserve-3d;
                            transition: all 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
                            transform: translate(-50%, -50%);
                            will-change: transform;
                            backface-visibility: hidden;

                            // 图片容器完整样式
                            .gutters {
                                display: flex;
                                flex: 1;
                                flex-flow: column wrap;
                                position: relative;
                                height: 100%;
                                width: 100%;
                                box-sizing: border-box;

                                // 图片完整样式
                                .thumbs {
                                    align-items: center;
                                    height: 100%;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }

                                    &:hover:before {
                                        display: flex;
                                        flex: 1;
                                        width: 100%;
                                        height: 100%;
                                        justify-content: center;
                                        align-items: center;
                                        content: "+";
                                        position: absolute;
                                        z-index: 10;
                                        color: white;
                                        font-size: 8rem;
                                        font-weight: 100;
                                        background-color: rgba($color: $fst, $alpha: 0.7);
                                        pointer-events: none;
                                    }


                                    a {
                                        display: block;
                                        height: 100%;
                                        width: 100%;
                                        overflow: hidden;
                                        border-radius: 8px;

                                        img {
                                            width: 100%;
                                            height: 100%;
                                            object-fit: contain;
                                            object-position: center center;
                                            transition: transform 0.3s ease;
                                        }
                                    }
                                }

                                // 标题完整样式
                                .title {
                                    display: none;
                                    position: absolute;
                                    bottom: 25px;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    font-weight: 500;
                                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                                    white-space: nowrap;
                                    max-width: 90%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: flex;
                                    flex: 1;
                                    background-color: $gray-200;

                                    a {
                                        display: flex;
                                        flex: 1;
                                        justify-content: center;
                                        font-size: 1.6rem !important;
                                        font-weight: 700;
                                        padding: 1rem;
                                        color: white;
                                    }

                                    &:hover {
                                        background-color: $sec;

                                        a {
                                            color: white;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

JS：
document.addEventListener('DOMContentLoaded', () => {
    // 获取所有轮播项
    const items = document.querySelectorAll('.product #ProductView li');

    // 三维位置参数配置（完整参数说明）
    const positions = [{ // 左侧后方
            // x: -320,    // 水平偏移（像素）
            x: -480, // 水平偏移（像素）
            z: -600, // 景深位移（像素）
            scale: 0.4, // 缩放比例
            rotateY: 15, // Y轴旋转（度）
            opacity: 0.8
        },
        { // 左侧中层
            // x: -160,
            x: -240,
            z: -300,
            scale: 0.7,
            rotateY: 8,
            opacity: 0.9
        },
        { // 中心前景
            x: 0,
            z: 0,
            scale: 1,
            rotateY: 0,
            opacity: 1
        },
        { // 右侧中层
            x: 160,
            x: 240,
            z: -300,
            scale: 0.7,
            rotateY: -8,
            opacity: 0.9
        },
        { // 右侧后方
            x: 320,
            x: 480,
            z: -600,
            scale: 0.4,
            rotateY: -15,
            opacity: 0.8
        }
    ];

    // 动态布局函数（完整逻辑）
    function updateLayout() {
        const container = document.querySelector('.product .Content');
        container.style.height = container.offsetWidth * 3 / 5 + "px";
        const containerWidth = container.offsetWidth;
        const containerHeight = container.offsetHeight;

        // console.log(containerWidth+"-"+containerHeight);

        items.forEach((item, index) => {
            const posIndex = (index + currentIndex) % 5;
            const pos = positions[posIndex];
            const imgContainer = item.querySelector('.gutters');

            // 精确计算尺寸
            // const baseSize = Math.min(containerWidth * 0.28, 480);
            const baseSize = Math.min(containerWidth * 0.8, containerWidth);
            item.style.width = `${baseSize}px`;
            item.style.height = `${baseSize * 1.5}px`;

            // 三维变换
            item.style.transform = `
                translate(
                    calc(-50% + ${(pos.x / 1280) * containerWidth}px),
                    -50%
                )
                translateZ(${pos.z}px)
                scale(${pos.scale})
                rotateY(${pos.rotateY}deg)
            `;

            // 视觉效果控制
            item.style.zIndex = 5 - Math.abs(posIndex - 2);
            item.style.opacity = pos.opacity;
            imgContainer.style.transform = `scale(${1 + (1 - pos.scale)/2})`;
        });
    }

    // 窗口自适应处理（完整事件监听）
    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            updateLayout();
        }, 250);
    });

    // 自动轮播控制（完整定时器逻辑）
    let currentIndex = 0;
    const animationInterval = setInterval(() => {
        currentIndex = (currentIndex + 1) % 5;
        updateLayout();
    }, 4000);

    // 初始化执行
    updateLayout();
});