静态网页模仿开眼PC端，模仿程度90%到95%左右，有兴趣的可以看看
技术：pc
概述
项目是纯静态的，只有前端，模仿的开眼的官网，模仿程度在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 your 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 your 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 your 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")
});
})
})
本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢
手机上随时阅读、收藏该文章 ？请扫下方二维码
