FED
/
dwweb-pc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
							<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta name="Keywords" content="">
    <meta name="description" content="新视界专题_多玩游戏网">
    <title>demo</title>
    <meta name="description" itemprop="description" content="">
    <link rel="stylesheet" href="./scss/animate.min.css">
    <script src="./js/lib/rem.js"></script>
</head>

<body>
    <div class="logo-wrap">
        <img class="vr-logo" src="./img/vr-logo-white.png">
        <img src="./img/xinshijie-white.png" class="xingshijie-logo">
    </div>
    <div class="entry-tips">
        <p>点击“橙色”互动点发现更多内容</p>
        <img src="./img/tips-pic-white.png" alt="">
    </div>
    <!-- 公共弹窗部分 -->

    <div class="modal" id="modal1">
        <div class="title">OLED弧形全面屏</div>
        <div class="arrow"></div>
    </div>
    <div class="screen-left-modal modal-group1 animated modal-hide">
        <h3 class="title">专为 iPhone X </h3>
        <h3 class="title">量身设计的 OLED</h3>
        <p class="text">这是首款达到 iPhone 设计标准的 OLED 屏幕，显示的色彩准确而绚丽，能呈现出真实深邃的黑色，并拥有出色的亮度和 1,000,000:1 的对比度。</p>
        <img src="./img/screen-pic1.png" alt="">
        <h3 class="title">量身设计的 OLED</h3>
        <div class="text">整部 iPhone X，看起来就是一块几乎整面的屏幕。全新的 5.8 英寸超视网膜显示屏用起来倍感称手，看起来绚丽夺目1。</div>
    </div>
    <div class="modal-right modal-group1 animated">
        <div class="title big-title">创新科技</div>
        <p class="text">显示屏采用新的工艺和技术，精准贴合机身的曲线，一直延伸至优雅圆润的边角。</p>
        <div class="video-poster-img animated" id="modal1-poster1">
            <img src="./img/screen-pic2.jpg" alt="">
            <span class="watch-icon"></span>
        </div>
        <div class="title">简单自然的手势</div>
        <p class="text">熟悉的手势，使用起来自然流畅、简单直观。无论你在哪个界面，只需轻扫一下就能返回主屏幕，不必再使用按钮。</p>
    </div>
    <div class="bottom-more-btn modal-group1 animated modal-hide">
        <p class="title">OLED显示屏</p>
        <button type="button" id="screen-know-more"></button>
    </div>
    <!-- Swiper -->
    <div class="screen-swiper animated pub-swiper-box">
        <div class="swiper-container" id="screen-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide p1">
                    <h3 class="p1-swiper-title">设计和显示屏</h3>
                    <p class="p1-swiper-text">怎样才能打造出一部超凡智能、外壳与显示屏浑然一体的设备？这是早在设计第一部 </p>
                    <p class="p1-swiper-text">iPhone 时，我们就为自己设定的目标。如今，在 iPhone X 上，我们终于把它变为</p>
                    <p class="p1-swiper-text">了现实。</p>
                    <video preload="metadata" id="screen-video2" class="center-video"></video>
                    <div class="reset-video-btn" id="reset-screen-video2">重播<i class="reset-icon"></i></div>
                </div>
                <div class="swiper-slide p2">
                    <h3 class="p1-swiper-title">一次对 iPhone 极尽纯粹的演绎。</h3>
                    <p class="p1-swiper-text">为了打造连续一体的表面，让你在使用时不被其他部件干扰，我们取消了主屏幕按钮，取而代之的是新颖却并不陌生的操控方式。</p>
                    <img src="./img/screen-pic3.png" alt="">
                </div>
                <div class="swiper-slide p3">
                    <img src="./img/screen-pic4.jpg" alt="">
                    <div class="bottom-info clearfix">
                        <div class="left-side">
                            <p>iPhone 上迄今</p>
                            <p>最精准的色彩显示。</p>
                        </div>
                        <div class="right-side">
                            超视网膜高清显示屏的色彩管理系统更进一步。无论显示的内容使用的是 P3 还是 sRGB 色彩模式，iPhone X 都能自动以对应的格式显示。因此，创作者们想要表达的色彩，都能准确地传递到你的眼中。
                        </div>
                    </div>
                </div>
                <div class="swiper-slide p4">
                    <h3 class="p1-swiper-title">HDR </h3>
                    <h3 class="p1-swiper-title">在 iPhone 上的首映，</h3>
                    <h3 class="p1-swiper-title">现已开场。</h3>
                    <p class="p1-swiper-text">
                        iPhone X 实现了真正的 HDR (高动态范围) 显示，让你可以欣赏到符合杜比视
                    </p>
                    <p class="p1-swiper-text">
                        界和 HDR10 标准的影片和节目，HDR 照片的显示效果也更加惊艳。另外，你
                    </p>
                    <p class="p1-swiper-text">
                        还能观看其他视频网站提供的精彩 HDR 内容。
                    </p>
                    <img src="./img/screen-pic5.png" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-screen-swiper"></button>
    </div>

    <!-- 2 -->
    <div class="modal" id="modal2">
        <div class="title">面部识别Face ID</div>
        <div class="arrow"></div>
    </div>
    <div class="modal-left-img video-poster-img modal-left-top modal-group2 animated" id="modal2-poster1">
        <img src="./img/faceId-pic1.jpg" alt="">
        <span class="watch-icon"></span>
    </div>
    <div class="modal-left-img video-poster-img modal-left-bottom modal-group2 animated" id="modal2-poster2">
        <img src="./img/faceId-pic2.jpg" alt="">
        <span class="watch-icon"></span>
    </div>
    <div class="modal-right modal-group2 animated">
        <div class="title">安全可靠的验证方式</div>
        <p class="text">你的脸，现在就是你的密码。面容 ID 功能为设备解锁、身份验证和支付带来了一种安全、私密的新方式。</p>
        <img src="./img/faceId-pic3.jpg" alt="">
        <div class="title">面谱绘制</div>
        <p class="text">面容 ID 功能通过原深感摄像头来实现，设置起来也非常简单。它会投射超过 30,000 个肉眼不可见的光点，并对它们进行分析，为你的脸部绘制精确细致的深度图。面容 ID 功能通过原深感摄像头来实现，设置起来也非常简单。它会投射超过 30,000 个肉眼不可见的光点，并对它们进行分析，为你的脸部绘制精确细致的深度图。</p>
    </div>
    <div class="bottom-more-btn modal-group2 animated modal-hide">
        <p class="title">Face ID</p>
        <button type="button" id="face-know-more"></button>
    </div>
    <!-- swiper -->
    <div class="face-swiper animated pub-swiper-box">
        <div class="swiper-container swiper-face">
            <div class="swiper-wrapper">
                <div class="swiper-slide p1">
                    <div class="p1-swiper-title">面容 ID</div>
                    <div class="p1-swiper-text">有什么动作能比轻触一下还要自然？答案是：看一眼。这就是面容 ID 的灵感来源。面容 ID 是一套强大、安全的验</div>
                    <div class="p1-swiper-text">证系统，用起来甚至比触控 ID 还要方便。通过它解锁设备或进行支付，都十分快速、轻松而自然。</div>
                </div>
                <div class="swiper-slide p2">
                    <div class="p1-swiper-title">让人惊叹的科技，</div>
                    <div class="p1-swiper-title">造就让人赞叹的简单。</div>
                    <div class="p1-swiper-text">原深感摄像头系统集多项创新技术于一身。这些技术实时协作，可以通过你脸部</div>
                    <div class="p1-swiper-text">的精细深度图在瞬间认出你。</div>
                </div>
                <div class="swiper-slide p3">
                    <div class="p1-swiper-title">你的脸，</div>
                    <div class="p1-swiper-title">就是一张安全的</div>
                    <div class="p1-swiper-title mg-bottom">通行证。</div>
                    <div class="p1-swiper-text">有了面容 ID 的帮助，iPhone X 只有在你注视它时才会解锁。经过精心设计，它还能防</div>
                    <div class="p1-swiper-text">止被照片或面具欺骗。你的面容 ID 信息会被加密，并在安全隔区中受到保护。而且数</div>
                    <div class="p1-swiper-text">据不会传出你的设备，也绝不会备份到 iCloud 或其他任何地方，以此确保私密性。</div>
                    <img src="./img/faceId-pic6.gif" class="faceId-gif" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-face-swiper"></button>
    </div>

    <!-- 3 -->
    <div class="modal" id="modal3">
        <div class="title">前置摄像头</div>
        <div class="arrow"></div>
    </div>
    <div class="modal-left-img video-poster-img modal-left-top modal-group3 animated" id="modal3-poster">
        <img src="./img/front-camera-pic2.gif" alt="">
        <span class="watch-icon"></span>
    </div>
    <div class="modal-left-img modal-left-bottom modal-group3 animated">
        <div class="left-title">动话表情</div>
        <p class="left-text">原深感摄像头能对 50 多种不同的面部肌肉运动进行分析，从</p>
        <p class="left-text">而以 16 款“动话表情”镜像出你的神态。快来化身为熊猫、</p>
        <p class="left-text">兔子或机器人，展现一个真实的你吧。</p>
        <img class="bottom-gif" src="./img/front-camera-pic3.gif" alt="">
    </div>
    <div class="modal-right modal-group3 animated">
        <div class="title big-title">前置，前瞻。</div>
        <img class="text-img" src="./img/front-camera-pic1.png" alt="">
        <div class="title">人像模式自拍</div>
        <p class="text">拍摄前景清晰、背景虚化、艺术感十足的自拍靓照。</p>
        <div class="title">人像光效</div>
        <p class="text">人像光效是人像模式中的一项新功能，可以营造出让人赞叹的影棚级光效。</p>
    </div>
    <div class="bottom-more-btn modal-group3 animated modal-hide">
        <p class="title">原深感摄像头</p>
        <button type="button" id="camera-know-more"></button>
    </div>
    <!-- Swiper -->
    <div class="camera-swiper animated pub-swiper-box">
        <div class="swiper-container swiper-front-camera">
            <div class="swiper-wrapper">
                <div class="swiper-slide p1">
                    <h3 class="p1-swiper-title">原深感摄像头</h3>
                    <p class="p1-swiper-text">一个方寸之地，到底能容纳多少创新想法？很多，而且非常之多。原深感摄像头系统</p>
                    <p class="p1-swiper-text">就包含了一系列精密的镜头和感应器，可以实现许多 iPhone X 独有的新功能。</p>
                </div>
                <div class="swiper-slide p2">
                    <div class="video-border-box">
                        <video id="front-camera-video2" loop preload="metadata"></video>
                        <div class="video-border"></div>
                    </div>
                    <div class="p2-right-side">
                        <h3 class="title">人 像 光 效，</h3>
                        <h3 class="title">自 拍 也 有 影 棚 效 果。</h3>
                        <p class="text">
                            在人物肖像艺术与科学领域大量研究的启发下，全新的人像光效功能可通过复杂的算法，计算出你的容貌特征会怎样受到光线影响，然后利用这些数据创造出惊艳的光效。
                        </p>
                        <div class="swiper-poster" id="modal3-poster1">
                            <img src="./img/front-camera-pic5.jpg" alt="">
                            <span class="watch-icon"></span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide p3">
                    <div class="p3-info">
                        <h3>动话表情，新玩法，</h3>
                        <h3>由你本色出演。</h3>
                        <p>大方承认吧，你其实一直想做一只萌萌的熊猫。在 A11 仿生的配合下，原深感摄像头能捕捉并分析 50 多种不同的肌肉运动，然后以 16 款不同的“动话表情”活灵活现镜像出你的神态。</p>
                    </div>
                    <div class="p3-video">
                        <video preload="metadata" id="front-camera-video4"></video>
                        <div class="reset-video-btn" id="reset-front-video4">重播<i class="reset-icon"></i></div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-camera-siwper"></button>
    </div>

    <!-- 4 -->
    <div class="modal" id="modal4">
        <div class="title">后置竖式双摄像头</div>
        <div class="arrow"></div>
    </div>
    <div class="modal-left-img video-poster-img modal-left-top modal-group4 animated" id="modal4-poster">
        <img src="./img/back-camera-pic1.jpg" alt="">
        <span class="watch-icon"></span>
    </div>
    <img class="modal-group4 modal-left-img animated camera-tips-pic" src="./img/back-camera-pic4-blue.jpg" alt="">
    <img class="modal-img-bottom modal-left-img modal-group4 animated" src="./img/back-camera-pic3.png" alt="">
    <div class="modal-right modal-group4 animated">
        <div class="title">进一步提升的摄像头</div>
        <p class="text">拥有比以往尺寸更大、速度更快的 1200 万像素感光元件、新的色彩滤镜、更深层的像素，以及新的支持光学图像防抖的长焦镜头。</p>
        <img class="text-img" src="./img/back-camera-pic2.png" alt="">
        <div class="title">双镜头光学图像防抖</div>
        <p class="text">两个后置镜头都具有光学图像防抖功能，而且反应飞快，即使在弱光下，也能拍出效果出众的照片和视频。</p>
        <div class="title">光学变焦</div>
        <p class="text">iPhone X 能通过广角和长焦镜头实现光学变焦。另外，通过数码变焦，还能拍摄最高达 10 倍变焦的照片和最高达 6 倍变焦的视频。</p>
    </div>
    <div class="bottom-more-btn modal-group4 animated modal-hide">
        <p class="title">竖式双摄像头</p>
        <button type="button" id="backcamera-know-more"></button>
    </div>
    <!-- swiper -->
    <div class="back-camera-swiper animated pub-swiper-box">
        <div class="swiper-container swiper-back-camera">
            <div class="swiper-wrapper">
                <div class="swiper-slide p1">
                    <div class="p1-swiper-title">1200 万像素双镜头</div>
                    <div class="p1-swiper-text">摄像头能否捕捉超出我们目力所及的影像？为了寻找答案，我们将速度更快的光学图像</div>
                    <div class="p1-swiper-text">防抖镜头与 A11 仿生先进的机器学习技术相结合，最终打造出一套比以往拍摄能力更</div>
                    <div class="p1-swiper-text">强、智能程度更高、功能更丰富的摄影系统。</div>
                </div>
                <div class="swiper-slide p2">
                    <div class="center-box">
                        <div class="left-side">
                            <div class="title">广角镜头</div>
                            <div class="text">配上 ƒ/1.8 光圈的六镜式镜头、光学图像防抖 (OIS) 功能和尺寸更大、速度更快的 1200 万像素感光元件，这部早已深受人们喜爱的相机现在更出色。</div>
                        </div>
                        <div class="right-side">
                            <div class="title">长焦镜头</div>
                            <div class="text">利用先进的 7 点磁力防抖方案，我们为强大的 ƒ/2.4 长焦镜头也配备了光学图像防抖系统。广角和长焦镜头互相协作，能通过光学变焦将被摄主体拉近，还能在人像模式下拍出令人赞叹的照片。</div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide p3">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-backcamera-swiper"></button>
    </div>

    <!-- 5 -->
    <div class="modal" id="modal5">
        <div class="title">玻璃后盖外壳设计</div>
        <div class="arrow"></div>
    </div>
    <div class="back-plane-img modal-group5 modal-hide animated">
        <img src="./img/back-plane-pic1.png" alt="">
    </div>
    <div class="modal-right modal-group5 animated">
        <div class="title">iPhone 上迄今</div>
        <div class="title">最坚固耐用的玻璃面板。</div>
        <p class="text">机身前后面板都是全玻璃设计，采用了 iPhone 上迄今最坚固耐用的玻璃材料，其强化层比以往增厚了 50% 之多。我们运用七层染色工艺，精准控制色调和不透明度，并加入反射光学层来增强色彩。另外，玻璃面板还覆有防油渍涂层，让你能轻易抹去污迹和指纹。</p>
        <div class="title">无线世界，无线充电。</div>
        <p class="text">我们一直希望 iPhone 能摆脱充电线或耳机线的束缚，成为一部真正的无线设备。iPhone X 的玻璃背板和内置的无线充电系统，正是为将来的无线世界而设计。</p>
    </div>
    <div class="bottom-more-btn modal-group5 animated modal-hide">
        <p class="title">玻璃外壳设计</p>
        <button type="button" id="plane-know-more"></button>
    </div>
    <!-- swiper -->
    <div class="plane-swiper animated pub-swiper-box">
        <div class="swiper-container swiper-plane">
            <div class="swiper-wrapper">
                <div class="swiper-slide p1">
                    <div class="p1-swiper-title">独家打造的手术级不锈钢。</div>
                    <div class="p1-swiper-text">Phone X 机身侧边环绕着起加固作用的不锈钢边框，它采用 Apple 特别设计的合金材料，不仅坚固</div>
                    <div class="p1-swiper-text">耐用、质地纯净，而且经过精心打磨，异常精美。在深空灰色外观的机型上，我们还运用了一项被称</div>
                    <div class="p1-swiper-text">为“物理气相沉积”的工艺，确保不锈钢边框颜色与玻璃颜色精准一致。</div>
                    <img class="center-img" src="./img/back-plane-pic2.png" alt="">
                </div>
                <div class="swiper-slide p2">
                    <img class="center-img" src="./img/back-plane-pic3-blue.jpg" alt="">
                    <div class="p1-swiper-title">防溅抗水，还防尘。</div>
                    <div class="p1-swiper-text">我们深入微观层面对 iPhone X 进行了精密设计，以实现防溅、抗水和防尘性能。</div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-plane-swiper"></button>
    </div>

    <a href="javascript:" id="suggest-watch" class="nav-btn nav-btn-white">评测视频</a>
    <a href="iphoneX.html?back" class="nav-btn nav-btn-pic">切换背景</a>
    <a href="javascript:" class="buy-btn"></a>

    <!-- 视频 -->
    <div class="full-video-wrap">
        <video id="face-video1" controls preload="metadata"></video>
        <video id="face-video2" controls preload="metadata"></video>
        <video id="back-camera-video" controls preload="metadata"></video>
        <video id="front-camera-video" controls preload="metadata"></video>
        <video id="front-camera-video3" controls preload="metadata"></video>
        <video id="screen-video1" controls preload="metadata"></video>
        <video id="suggest-video" controls preload="metadata"></video>
        <span class="close-icon close-full-video"></span>
    </div>
    <script src="//www.duowan.com/assets/js/jquery.js"></script>
    <script src="./js/main.js"></script>
</body>