代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑马360浏览器</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/fullpage.css">
</head>
<body>
<!-- 固定导航栏 -->
<div class="header">
<div class="headerCountent">
<img src="./images/logo.png" alt="">
<div class="nav">
<a href="#">论坛</a><a href="#">扩展</a><a href="#">Mac版</a>
</div>
</div>
</div>
<!-- 主体 -->
<div id="fullpage">
<div class="section section1">
<!-- 第一屏 -->
<div class="title-box">
<p>畅快浏览 极致体验</p>
<a href="#"></a>
</div>
<img src="./images/ball1.png" alt="" class="ball1">
<img src="./images/ball2(1).png" alt="" class="ball2">
<img src="./images/ship(1).png" alt="" class="ship">
</div>
<div class="section section2">
<video autoplay loop muted>
<source src="https://s2.ssl.qhres2.com/static/dfeefadde568eab0.mp4" type="video/mp4">
你的浏览器版本太low了
</video>
<div class="word-content">
<p class="bigword">极速</p>
<div class="line"></div>
<p class="midword">Chromium78全新内核</p>
<p class="smallword">性能强劲,快如闪电。</p>
<a href="#"></a>
</div>
</div>
<div class="section section2">
<video autoplay loop muted>
<source src="https://s3.ssl.qhres2.com/static/9bebcedf292f327e.mp4" type="video/mp4">
</video>
<div class="word-content">
<p class="bigword">极酷</p>
<div class="line"></div>
<p class="midword">暗夜炫黑模式</p>
<p class="smallword">定义酷,定义你。</p>
<a href="#"></a>
</div>
</div>
<div class="section section2">
<video autoplay loop muted>
<source src="https://s1.ssl.qhres2.com/static/fdf92889c539303c.mp4" type="video/mp4">
</video>
<div class="word-content">
<p class="bigword">极安全</p>
<div class="line"></div>
<p class="midword">DNS加密防劫持</p>
<p class="smallword">安全升级,肆意无忌。</p>
<a href="#"></a>
</div>
</div>
<div class="section section2">
<video autoplay loop muted>
<source src="https://s1.ssl.qhres2.com/static/7e7f0ec4a0cc7a66.mp4" type="video/mp4">
</video>
<div class="word-content">
<p class="bigword">极视界</p>
<div class="line"></div>
<p class="midword">4K高清视频播放</p>
<p class="smallword">还原真实之美 ,尽显万物本色。</p>
<a href="#"></a>
</div>
<!-- 第五屏底部 -->
<div class="footer">
Copyright © 2005-2019 360.CN All Rights Reserved 360互联网安全中心 隐私权政策 京ICP证080047号<br>
<img src="./images/icon.png" alt=""> 京公网安备 11000002000006号
</div>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/fullpage.js"></script>
<script>
$(function () {
$('#fullpage').fullpage({
'navigation': true,
/* 滚动到当前屏幕,文字模块渐渐显示出来 */
afterLoad: function () {
$(this).find('.word-content').fadeIn();
},
/* 离开当前屏幕,文字模块渐渐淡出 */
onLeave: function () {
$(this).find('.word-content').fadeOut()
}
});
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。