静态网页模仿开眼PC端,模仿程度90%到95%左右,有兴趣的可以看看

发布时间:2021-06-07

概述

项目是纯静态的,只有前端,模仿的开眼的官网,模仿程度在90%到95%,有兴趣的可以了解看看,主要用到的是整屏滑动,视频播放等。

详细

项目是纯静态的(主要是一些动态效果的实现),只有前端,模仿的开眼的官网,模仿程度在90%到95%,有兴趣的可以了解看看,主要用到的是整屏滑动,视频播放等。

项目图片(网站挺漂亮的)


部分代码HTML

<div class="index-container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" data-poster="">
                <div class="swiper-video">
                    <div class="swiper-model">
                        <h2>可以接的业务,文字描述</h2>
                    </div>
                    <video style="width: 100%" loop="loop" muted="muted" controls="false" autoplay="autoplay">
                        <source src="http://home.eyepetizer.net/_nuxt/videos/eyepetizer-cover.80f1071.mp4"
                                type="video/ogg"/>
                        <source src="http://home.eyepetizer.net/_nuxt/videos/eyepetizer-cover.80f1071.mp4"
                                type="video/mp4"/>
                    </video>
                </div>
                <h3>可以接的业务,文字描述</h3>
            </div>
            <div class="swiper-slide" data-poster="">
                <div class="else animation-container">
                    <div class="chosen-video active">
                        <header class="header" style="transform: matrix(1, 0, 0, 1, 0, 0);"><h2
                                class="title">精选创意视频</h2>
                            <p class="desc"> 汇聚全球优质视频内容,让你大开眼界;了解各领域全新动态,启迪你的生活灵感。</p>
                        </header>
                        <main class="content">
                            <ul class="ul-item ul-active">
                                <li class="video-item active" style="transition-delay:300ms;">
                                    <a href="./pages/video-detail.html" class="">
                                        <div class="video-box">
                                            <div class="video-hover">
                                                <img src="http://img.kaiyanapp.com/017d62c2cd30d105c36e0d76c2d13331.jpeg?imageMogr2/quality/60/format/jpg"
                                                     alt="视频" class="cover">
                                                <video autoplay="autoplay" loop="loop" muted="muted"
                                                       src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
                                                       class="preview"></video>
                                            </div>
                                        </div>
                                        <p>GoPro 百万美金挑战赛获奖「热气球跳伞」</p>
                                        <div class="line"></div>
                                    </a>
                                </li>
                                <li class="video-item active" style="transition-delay:800ms;">
                                    <a href="./pages/video-detail.html" class="">
                                        <div class="video-box">
                                            <div class="video-hover">
                                                <img src="http://img.kaiyanapp.com/30a606034b25f99f81450d7d64b8a65e.png?imageMogr2/quality/60/format/jpg"
                                                     alt="视频" class="cover"> <!---->
                                                <video autoplay="autoplay" loop="loop" muted="muted"
                                                       src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
                                                       class="preview"></video>
                                            </div>
                                        </div>
                                        <p>丹麦温情广告,愿你可以成为爱的傻瓜</p>
                                        <div class="line"></div>
                                    </a>
                                </li>
                                <li class="video-item active" style="transition-delay:1300ms;">
                                    <a href="./pages/video-detail.html" class="">
                                        <div class="video-box">
                                            <div class="video-hover">
                                                <img
                                                        src="http://img.kaiyanapp.com/3cea5ee9eb2fae85379a853351f4551d.jpeg?imageMogr2/quality/60/format/jpg"
                                                        alt="视频" class="cover"> <!---->
                                                <video autoplay="autoplay" loop="loop" muted="muted"
                                                       src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
                                                       class="preview"></video>
                                            </div>
                                        </div>
                                        <p>美到窒息!德舒特国家森林的心灵奇旅</p>
                                        <div class="line"></div>
                                    </a>
                                </li>
                            </ul>
                            <ul class="ul-item">
                                <li class="video-item active" style="transition-delay:800ms;">
                                    <a href="./pages/video-detail.html" class="">
                                        <div class="video-box">
                                            <div class="video-hover">
                                                <img src="http://img.kaiyanapp.com/30a606034b25f99f81450d7d64b8a65e.png?imageMogr2/quality/60/format/jpg"
                                                     alt="视频" class="cover"> <!---->
                                                <video autoplay="autoplay" loop="loop" muted="muted"
                                                       src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
                                                       class="preview"></video>
                                            </div>
                                        </div>
                                        <p>丹麦温情广告,愿你可以成为爱的傻瓜</p>
                                        <div class="line"></div>
                                    </a>
                                </li>
                                <li class="video-item active" style="transition-delay:1300ms;">
                                    <a href="./pages/video-detail.html" class="">
                                        <div class="video-box">
                                            <div class="video-hover">
                                                <img
                                                        src="http://img.kaiyanapp.com/3cea5ee9eb2fae85379a853351f4551d.jpeg?imageMogr2/quality/60/format/jpg"
                                                        alt="视频" class="cover"> <!---->
                                                <video autoplay="autoplay" loop="loop" muted="muted"
                                                       src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
                                                       class="preview"></video>
                                            </div>
                                        </div>
                                        <p>美到窒息!德舒特国家森林的心灵奇旅</p>
                                        <div class="line"></div>
                                    </a>
                                </li>
                            </ul>
                        </main>
                        <nav class="nav" style="transform: matrix(1, 0, 0, 1, 0, 0);">
                            <ul>
                                <li class="nav-item active">每日推荐
                                </li>
                                <li class="nav-item">旅行
                                </li>
                                <li class="nav-item">运动
                                </li>
                                <li class="nav-item">摄影
                                </li>
                                <li class="nav-item">艺术
                                </li>
                                <a href="./pages/video-list.html" class="nav-item"> 查看全部
                                </a>
                            </ul>
                            <img src="https://home.eyepetizer.net/image/home/Scroll.png" alt="scroll"
                                 class="scroll"></nav>
                    </div>
                </div>
            </div>
            <div class="swiper-slide" data-poster="">
                <div class="else animation-container">
                    <div class="desc-container active">
                        <div class="content">
                            <div class="publish item-box">
                                <img src="https://home.eyepetizer.net/image/home/iphone1.png" alt=""
                                     class="img-1" style="transform: matrix(1, 0, 0, 1, 41.5, 0);">
                                <img src="https://home.eyepetizer.net/image/home/blue-logo.png"
                                     alt="" class="logo"
                                     style="transform: matrix(1, 0, 0, 1, 41.5, 0) rotate(-7.006deg);">
                                <div class="desc" style="transform: matrix(1, 0, 0, 1, 37.35, 0);"><p
                                        class="title">
                                    有机社区
                                </p>
                                    <p class="detail">
                                        优质用户及创作者的集合地。自由分享生活点滴,<br>
                                        随时收获创作灵感,一同共建高品质内容生态。<br> <br>
                                        精选话题、有奖征集,多种形式即时参与。<br>
                                        让你的每一刻精彩瞬间,都被看见。<br></p></div>

                            </div>
                            <div class="first-floor">
                                <h3 class="text text1">Feed&nbsp;your&nbsp;eyes,</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide" data-poster="">
                <div class="else animation-container">
                    <div class="desc-container active">
                        <div class="content">
                            <div class="live item-box">
                                <img src="https://home.eyepetizer.net/image/home/iphone2.png"
                                     class="live-img" style="transform: matrix(1, 0, 0, 1, 16.6, 0);">
                                <div class="desc" style="transform: matrix(1, 0, 0, 1, 12.45, 0);"><p
                                        class="title">
                                    「在现场」直播

                                </p>
                                    <p class="detail">
                                        国内外佳片展映、人文艺术领域名人直播,「在现场」邀你与艺术家一起创作,和朋友一起观展看片,来一场身临其境的愉悦体验。
                                    </p></div>
                            </div>
                            <div class="first-floor">
                                <h3 class="text text1">feed&nbsp;your&nbsp;soul.</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide" data-poster="">
                <div class="else animation-container">
                    <div class="desc-container active">
                        <div class="content">
                            <div class="brand item-box">
                                <img src="https://home.eyepetizer.net/image/home/brand-logo.png"
                                     alt="" class="logo"
                                     style="transform: matrix(1, 0, 0, 1, 8.3, 0) rotate(-7.006deg);">
                                <img src="https://home.eyepetizer.net/image/home/iphone3.png" alt=""
                                     class="brand-1"
                                     style="transform: matrix(1, 0, 0, 1, 8.3, 0);">
                                <div class="desc" style="transform: matrix(1, 0, 0, 1, 5.81, 0);"><p
                                        class="title">
                                    品牌墙
                                </p>
                                    <p class="detail">
                                        网罗国内外品牌精选创意视频,用来自世界每个角落的广告创意,为你输送源源不断的创意灵感。一个创意人群不可不知的灵感素材库。
                                    </p>
                                    <a href="./pages/brand-wall.html" class="link"> 查看全部品牌
                                        <img
                                                src="https://home.eyepetizer.net/image/home/icon-link.png" alt=""
                                                class="icon">
                                    </a>
                                </div>
                            </div>
                            <!--                            <div  class="first-floor">-->
                            <!--                                <h3  class="text text1">Feed&nbsp;your&nbsp;eyes,</h3>-->
                            <!--                            </div>-->
                            <div class=" footer">
                                <footer class="footer">
                                    <div class="link">
                                        <a href="mailto:bd@eyepetizer.net?subject=[意见反馈]"
                                           el="nofollow">意见反馈</a> <a
                                            href="./pages/agreement.html"
                                            el="nofollow">用户协议</a>
                                        <a href="./pages/right.html"
                                           el="nofollow">权利声明</a>
                                        <a href="mailto:bd@eyepetizer.net?subject=[商务合作]"
                                           el="nofollow">商务合作</a> <a
                                            href="mailto:bd@eyepetizer.net?subject=[简历投递]"
                                            el="nofollow">加入我们</a> <a
                                            href="./pages/about.html" class="">关于我们</a>
                                    </div>
                                    <div class="company">© 北京牡蛎柠檬科技文化有限公司2020 - 2025京 ICP 备16030848
                                        号京 ICP 证161038 号
                                    </div>
                                    <div class="wangan"><i></i>京公网安备
                                        11010502034149号京网文(2017)1560-134 号
                                    </div>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        <div id="txt"></div>-->
    </div>
</div>

部分代码CSS

#preload {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preload-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
}

#preload .tip {
    display: inline;
    color: #fff;
    font-size: 4vw;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    height: 100%;
    z-index: 100;
}

#txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.swiper-model h2 {
    margin: 0;
    width: 100%;
    cursor: pointer;
    color: #fff;
    font-size: 3vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.top-header, .header .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-header {
    max-width: 1440px;
    min-width: 960px;
    padding: 0 40px;
    height: 8vh;
    margin: 0 auto;
    z-index: 1000;
    position: relative;
}

.top-header .nav .nav-item.active {
    font-family: SourceHanSansCN-Medium;
    font-weight: 700;
}

.top-header .nav .nav-item {
    font-family: SourceHanSansCN-Light;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
    margin-left: 68px;
}

.top-header .logo {
    display: block;
    width: 170px;
    height: 20.88px;
    -o-object-fit: cover;
    object-fit: cover;
}

video::-webkit-media-controls {
    display: none !important;
}

h3 {
    text-align: center;
    color: #ffffff;
}

.index-container {
    height: 92vh;
    position: relative;
    background: #000;
    width: 100vw;
    overflow: hidden;
    color: #fff;
}

.index-container .swiper-container {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    list-style: none;
    padding: 0;
    height: 100%;
}

.swiper-video {
    max-width: 842px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative
}

.swiper-model {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%
}

/*第二页*/
.animation-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.chosen-video {
    position: relative;
    margin-left: 15vw;
    margin-right: 200px;
    height: 100%;
    max-height: 810px;
    opacity: 1;
    transition-duration: .5s;
    transition-delay: .3s;
}

.chosen-video .header {
    position: absolute;
    left: 0;
    top: 140px;
}

.chosen-video .header .title {
    font-family: SourceHanSansCN-Normal;
    font-size: 26px;
    line-height: 39px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: left;
    z-index: 150;
}

.chosen-video .header .desc {
    font-family: SourceHanSansCN-Light;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 1.3966px;
    margin-top: 10px;
}

.chosen-video .content {
    height: 100%;
    margin: 240px 0 0;
    position: relative;
}

.chosen-video .nav {
    position: absolute;
    left: 0;
    top: 630px;
    z-index: 50;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    background: #ffffff;
}

.chosen-video .nav ul {
    display: flex;
}

.chosen-video .nav .nav-item.active {
    font-family: SourceHanSansCN-Normal;
    font-weight: 700;
}

.chosen-video .nav .nav-item {
    font-family: SourceHanSansCN-Light;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 1.3966px;
    cursor: pointer;
    position: relative;
}

.chosen-video .nav ul li {
    margin-right: 43px;
}

.chosen-video .nav .scroll {
    width: 122.7px;
    height: 36.66px;
}

.chosen-video .content ul {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
}
.chosen-video .content .ul-item{
    opacity: 0;
}
.chosen-video .content .ul-item.ul-active{
    opacity: 1;
}
.chosen-video .content ul:first-child {
    position: relative;
    left: 0;
    right: 0;
}

.chosen-video .content ul .video-item.active {
    opacity: 1;
    z-index: 100;
}

.chosen-video .content ul .video-item {
    opacity: 0;
    width: 353px;
    margin-right: 65px;
    transition-duration: 1s;
}

.chosen-video .content ul .video-item .video-box {
    display: block;
    width: 100%;
    height: 202px;
    -o-object-fit: contain;
    object-fit: contain;
}

.video-hover {
    position: relative;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.video-hover .cover {
    height: 100%;
    width: 100%;
    display: block;
}

.chosen-video .content ul .video-item p {
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: SourceHanSansCN-Normal;
    font-size: 13px;
    line-height: 14px;
    letter-spacing: 1.3966px;
    text-align: left;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chosen-video .content ul .video-item .line {
    width: 100%;
    height: .5px;
    background: hsla(0, 0%, 100%, .5);
}

.chosen-video .content ul .video-item:nth-child(2n) {
    margin-top: 80px;
}

部分代码JS

//预加载图片
slides = $('.swiper-slide');
Img = [];
slides.each(function (index, element) {
    Img[index] = new Image();
    Img[index].src = slides.eq(index).attr('data-poster');
    slidesLength = index
    //使用附加文本替换virtualTranslate,避免鼠标滚轮失效
    // $("#txt").append('<div class="box">' + slides.eq(index).html() + '</div>')
});

tweenObj = {
    translate: 0
};
var canvas = document.getElementById("shows");
ctx = canvas.getContext("2d");


window.onload = function () {

    var mySwiper = new Swiper('.swiper-container', {
        watchSlidesProgress: true,
        // virtualTranslate:true,较好的解决方案但会导致滚轮失效
        mousewheel: true,
        grabCursor: true,
        autoplay: false,
        speed: 700,//限制滚轴时间间隔
        on: {
            init: function () {
                resize(this);
                /*预加载动画*/
                tl = new TimelineMax();
                tl.to(".tip-bg", 0, {width: '100%'})
                    .set(".tiptxt", {autoAlpha: 0})
                    .to(".tip-bg", 0, {x: '101%'}, "+=0.2")
                    .to(".preload-bg", 0, {x: '101%'}, "-=0.1")
                    .set("#preload", {autoAlpha: 0})
            },
            resize: function () {
                resize(this);
            },
            setTranslate: function () {
                draw(this, 1);
            },
        },
    });
}

function resize(swiper) {
    clientWidth = document.body.clientWidth
    clientHeight = document.body.clientHeight
    canvas.width = clientWidth;
    canvas.height = clientHeight;
    draw(swiper);
}

function draw(swiper, speed) {
    if (typeof (speed) == "undefined") {
        speed = 0;
    }
    TweenMax.killAll();
    TweenMax.to(tweenObj, speed, {
        tlanslate: swiper.translate, ease: Power4.easeOut, onUpdate: function () {

            //如果超出显示范围添加黑色背景
            if (swiper.progress < 0 || swiper.progress > 1) {
                ctx.fillStyle = "#000000";
                ctx.fillRect(0, 0, clientWidth, clientHeight);
            }

            tlanslate = tweenObj.tlanslate

            for (i = 0; i <= slidesLength; i++) {
                modifer = 1
                swiper.$el.find('.box').eq(i).transform('translate3d(' + (tlanslate / clientWidth + i) * clientWidth * modifer + 'px, 0, 0)');
            }

        }
    })
}

$(function () {
    $(".video-hover").mouseover(function () {
        $(this).children("video").trigger('play');
        $(this).children("video").show()
    })
    $(".video-hover").mouseout(function () {
        $(this).children("video")[0].currentTime = 0
        $(this).children("video").trigger('pause');
        $(this).children("video").hide()
    })
    //切换
    $(".nav li").each(function (index) {
        $(this).click(function () {
            $(".ul-active").removeClass("ul-active");
            $(".nav-item").removeClass("active");
            $(".content .ul-item").eq(index).addClass("ul-active");
            $(this).addClass("active")
        });
    })
})


本实例支付的费用只是购买源码的费用,如有疑问欢迎在文末留言交流,如需作者在线代码指导、定制等,在作者开启付费服务后,可以点击“购买服务”进行实时联系,请知悉,谢谢
手机上随时阅读、收藏该文章 ?请扫下方二维码