FED
/
dwweb-h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
							<!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.png">
        <img src="./img/xinshijie.png" class="xingshijie-logo">
    </div>
    <div class="tips-masker" id="tips-masker">
        <div class="entry-tips">
            <p>点击“橙色”互动点发现更多内容</p>
            <img src="./img/tips-pic-white.png" alt="">
        </div>
    </div>
    <div class="iphonex-wrapper animated" id="iphonex-wrapper">
        <div class="center-box">
            <div class="img-box animated bounceInDown delay-300">
                <img class="iphone-pic" src="./img/iphonex.jpg" alt="">
                <img class="down-iphone-pic" src="./img/iphonex-down.png" alt="">
            </div>
            <h3 class="animated bounceInDown delay-300">iPhone X</h3>
            <p class="animated fadeIn delay-600">一直以来，我们都心存一个设想，期待着能够</p>
            <p class="animated fadeIn delay-600">打造出这样一部 iPhone：</p>
            <p class="animated fadeIn delay-900">它有整面的屏幕，它是如此智能，你的一触、一</p>
            <p class="animated fadeIn delay-1200">碰、一言、一语，哪怕是轻轻一瞥，都会得到它</p>
            <p class="animated fadeIn delay-1200">心有灵犀的回应，现在，就跟未来见个面吧。</p>
            <p class="animated arrow-tips fade-In delay-1500">向下滑动进入</p>
            <img class="arrow fade-In" src="./img/arrow-down.png" alt="">
        </div>
    </div>

    <!-- 公共弹窗部分 -->

    <div class="modal" id="modal1">
        <div class="title">OLED弧形全面屏</div>
        <div class="video-poster" id="screen-poster">
            <img src="./img/m/screen-pic.jpg" alt="">
            <i class="player-icon"></i>
        </div>
        <div class="arrow"></div>
    </div>
    <div class="bottom-more-btn modal-group1 animated modal-hide">
        <p class="title">OLED显示屏</p>
        <button type="button" id="screen-know-more"><span class="circle-icon">+</span> 进一步了解</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 p3">
                    <h3 class="p1-swiper-title">设计和显示屏</h3>
                    <p class="p1-swiper-text">怎样才能打造出一部超凡智能、外壳与显示屏浑然一体的设备？这是早在设计第一部iPhone 时，我们就为自己设定的目标。如今，在 iPhone X 上，我们终于把它变为了现实。</p>
                    <img src="./img/m/screen-pic1.png" alt="">
                    <img src="./img/m/screen-pic3.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 p2">
                    <h3 class="p1-swiper-title">专为 IPhone X 量身设计的 OLED</h3>
                    <p class="p1-swiper-text">这是首款达到 iPhone 设计标准的 OLED 屏幕，</p>
                    <p class="p1-swiper-text">显示的色彩准确而绚丽，能呈现出真实深邃的黑色，</p>
                    <p class="p1-swiper-text">并拥有出色的亮度和 1,000,000:1 的对比度。</p>
                    <img src="./img/m/screen-pic2.png" alt="">
                </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 (高动态范围) 显示，让你可以欣赏到符合杜比视界和 HDR10 标准的影片和节目，HDR 照片的显示效果也更加惊艳。另外，你还能观看其他视频网站提供的精彩 HDR 内容。
                    </p>
                    <img src="./img/m/screen-pic4.png" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-screen-swiper"><span class="circle-icon">x</span>关闭</button>
    </div>

    <!-- 2 -->
    <div class="modal" id="modal2">
        <div class="title">面部识别Face ID</div>
        <div class="video-poster" id="faceid-poster">
            <img src="./img/m/faceId-pic2.jpg" alt="">
            <i class="player-icon"></i>
        </div>
        <div class="arrow"></div>
    </div>
    <div class="bottom-more-btn modal-group2 animated modal-hide">
        <p class="title">Face ID</p>
        <button type="button" id="face-know-more"><span class="circle-icon">+</span> 进一步了解</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 是一套强大、安全的验面容 ID 是一套强大、安全的验正系统，用起来甚至比触控 ID 还要方便。通过证它解锁设备或进行支付，都十分快速、轻松而自然。</div>
                    <img src="./img/m/faceId-pic4.jpg" alt="">
                    <div class="p1-swiper-text">让人惊叹的科技，</div>
                    <div class="p1-swiper-text">造就让人赞叹的简单。</div>
                    <img class="bottom-img" src="./img/m/faceId-pic6.jpg" alt="">
                </div>
                <div class="swiper-slide p2">
                    <div class="p1-swiper-title">安全可靠的验证方式</div>
                    <div class="p1-swiper-text">你的脸，现在就是你的密码。面容 ID 功能为设备解锁、</div>
                    <div class="p1-swiper-text">身份验证和支付带来了一种安全、私密的新方式。</div>
                    <img src="./img/m/faceId-pic1.gif" alt="">
                    <div class="p1-swiper-title">面谱绘制</div>
                    <div class="p1-swiper-text">面容 ID 功能通过原深感摄像头来实现，设置起来也非常简单。它会投射超过 30,000 个肉眼不可见的光点，并对它们进行分析，为你的脸部绘制精确细致的深度图。</div>
                    <img src="./img/m/faceId-pic5.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-face-swiper"><span class="circle-icon">x</span>关闭</button>
    </div>

    <!-- 3 -->
    <div class="modal" id="modal3">
        <div class="title">前置摄像头</div>
        <div class="video-poster" id="front-poster">
            <img src="./img/m/front-camera-pic3.jpg" alt="">
            <i class="player-icon"></i>
        </div>
        <div class="arrow"></div>
    </div>
    <div class="bottom-more-btn modal-group3 animated modal-hide">
        <p class="title">原深感摄像头</p>
        <button type="button" id="camera-know-more"><span class="circle-icon">+</span> 进一步了解</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">一很多，而且非常之多。原深感摄像头系统</p>
                    <p class="p1-swiper-text">就包含了一系列精密的镜头和感应器，</p>
                    <p class="p1-swiper-text">可以实现许多 iPhone X 独有的新功能。</p>
                </div>
                <div class="swiper-slide p2">
                    <div class="p2-side">
                        <h3 class="title">人像光效，</h3>
                        <h3 class="title">自拍也有影棚效果。</h3>
                        <p class="text">
                            在人物肖像艺术与科学领域大量研究的启发下，全新的人像光效功能可通过复杂的算法，计算出你的容貌特征会怎样受到光线影响，然后利用这些数据创造出惊艳的光效。
                        </p>
                    </div>
                    <img src="./img/m/front-camera-pic1.gif" alt="">
                </div>
                <div class="swiper-slide p3">
                    <div class="p3-info">
                        <h3>动话表情，新玩法，</h3>
                        <h3>由你本色出演。</h3>
                        <p>大方承认吧，你其实一直想做一只萌萌的熊猫。在 A11 仿生的配合下，原深感摄像头能捕捉并分析 50 多种不同的肌肉运动，然后以 16 款不同的“动话表情”活灵活现镜像出你的神态。</p>
                    </div>
                    <img src="./img/m/front-camera-pic2.gif" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-camera-siwper"><span class="circle-icon">x</span>关闭</button>
    </div>

    <!-- 4 -->
    <div class="modal" id="modal4">
        <div class="title">后置竖式双摄像头</div>
        <div class="video-poster" id="back-poster">
            <img src="./img/m/back-camera-pic1.jpg" alt="">
            <i class="player-icon"></i>
        </div>
        <div class="arrow"></div>
    </div>
    <div class="bottom-more-btn modal-group4 animated modal-hide">
        <p class="title">竖式双摄像头</p>
        <button type="button" id="backcamera-know-more"><span class="circle-icon">+</span> 进一步了解</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">摄像头能否捕捉超出我们目力所及的影像？为了寻找答案，我们将速度更快的光学图像防抖镜头与 A11 仿生先进的机器学习技术相结合，最终打造出一套比以往拍摄能力更强、智能程度更高、功能更丰富的摄影系统。</div>
                    <img src="./img/m/back-camera-pic2.png" alt="">
                </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>
                    <img src="./img/m/back-camera-pic3.jpg" alt="">
                </div>
                <div class="swiper-slide p3">
                    <div class="white-title">双镜头光学图像防抖，</div>
                    <div class="white-title">低光拍摄</div>
                    <div class="white-title">让人眼前一亮。</div>
                    <div class="white-text">如何在弱光条件下拍出满意的照片和视频?这是摄影的一大难题。iPhone X的两个后置镜头均具备光学图像防抖功能，让你在弱光下也能拍得游刃有余。每当夜幕降临，你的创作舞台却正在璀璨中升起。</div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-backcamera-swiper"><span class="circle-icon">x</span>关闭</button>
    </div>

    <!-- 5 -->
    <div class="modal" id="modal5">
        <div class="title">玻璃后盖外壳设计</div>
        <div class="video-poster" id="plane-poster">
            <img src="./img/m/back-plane.jpg" alt="">
            <i class="player-icon"></i>
        </div>
        <div class="arrow"></div>
    </div>
    <div class="bottom-more-btn modal-group5 animated modal-hide">
        <p class="title">玻璃外壳设计</p>
        <button type="button" id="plane-know-more"><span class="circle-icon">+</span> 进一步了解</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>
                    <img class="center-img" src="./img/m/plane-pic1.jpg" alt="">
                    <div class="p1-swiper-title">防溅抗水，还防尘。</div>
                    <div class="p1-swiper-text">我们深入微观层面对 iPhone X 进行了精密设计，以实现防溅、抗水和防尘性能。</div>
                    <img class="center-img" src="./img/m/plane-pic3.jpg" alt="">
                </div>
                <div class="swiper-slide p2">
                    <div class="p1-swiper-title">iPhone 上迄今最坚固耐用的玻璃面板</div>
                    <div class="p1-swiper-text">机身前后面板都是全玻璃设计，采用了 iPhone 上迄今最坚固耐用的玻璃材料，其强化层比以往增厚了 50% 之多。我们运用七层染色工艺，精准控制色调和不透明度，并加入反射光学层来增强色彩。另外，玻璃面板还覆有防油渍涂层，让你能轻易抹去污迹和指纹。</div>
                    <img class="center-img" src="./img/m/plane-pic2.png" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button type="button" class="close-swiper-btn" id="close-plane-swiper"><span class="circle-icon">x</span>关闭</button>
    </div>

    <a href="javascript:" id="suggest-watch" class="nav-btn nav-btn-white">评测视频</a>
    <a href="index.html" id="change-bg" class="nav-btn nav-btn-pic">切换背景</a>
    <a href="javascript:" class="buy-btn">BUY NOW</a>

    <!-- 视频 -->
    <div class="full-video-wrap">
        <video id="face-video1" controls preload="metadata"></video>
        <video id="back-camera-video" controls preload="metadata"></video>
        <video id="front-camera-video" controls preload="metadata"></video>
        <video id="screen-video1" controls preload="metadata"></video>
        <video id="suggest-video" controls preload="metadata"></video>
        <video id="plane-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/iphonex.js"></script>
</body>