<html>
<title></title>
<head>
<style>
*{
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="./css/homeerji22Css.css" />
<script>
window.addEventListener(
'error',
(e)=>{
const tag=e.target;
if(tag.tagName==='SCRIPT' && !(e instanceof ErrorEvent)){
console.log('script加载失败!');
}
},
true
);
</script>
</head>
<body>
<div class="shell" id="shell">
<div class="header">
<h2 class="title">真的真的不累！！！换个图er yi~~</h2>
<h3 class="subtitle">yahu~ yahu~ yahu~</h3>
</div>
<div class="timeline">
<div class="item" data-text="ya~ ya~ ya~">
<div class="content">
<img class="img" src="../level/img/马丁1.webp" alt=""/>
<h2 class="content-title">2001</h2>
<p class="content-desc">
你要做一个不动声色的小大人了，不准情绪化，不准偷偷想念，不准回头看。
</p>
</div>
</div>
<div class="item" data-text="ya~ ya~ ya~">
<div class="content">
<img class="img" src="../level/img/马丁2.jpg"/>
<h2 class="content-title">2002</h2>
<p class="content-desc">
你要做一个不动声色的小大人了，不准情绪化，不准偷偷想念，不准回头看。
</p>
</div>
</div>
<div class="item" data-text="ya~ ya~ ya~">
<div class="content">
<img class="img" src="../level/img/马丁3.jpg"/>
<h2 class="content-title">2003</h2>
<p class="content-desc">
你要做一个不动声色的小大人了，不准情绪化，不准偷偷想念，不准回头看。
</p>
</div>
</div>
<div class="item" data-text="ya~ ya~ ya~">
<div class="content">
<img class="img" src="../level/img/马丁4.jpg"/>
<h2 class="content-title">2004</h2>
<p class="content-desc">
你要做一个不动声色的小大人了，不准情绪化，不准偷偷想念，不准回头看。
</p>
</div>
</div>
<div class="item" data-text="ya~ ya~ ya~">
<div class="content">
<img class="img" src="../level/img/马丁5.jpg"/>
<h2 class="content-title">2005</h2>
<p class="content-desc">
你要做一个不动声色的小大人了，不准情绪化，不准偷偷想念，不准回头看。
</p>
</div>
</div>
<div class="item" data-text="ya~ ya~ ya~">
<div class="content">
<img class="img" src="../level/img/马丁3.webp"/>
<h2 class="content-title">2006</h2>
<p class="content-desc">
你要做一个不动声色的小大人了，不准情绪化，不准偷偷想念，不准回头看。
</p>
</div>
</div>
<div class="item" data-text="ya~ ya~ ya~">
<div class="content">
<img class="img" src="../level/img/马丁4.webp"/>
<h2 class="content-title">20017</h2>
<p class="content-desc">
你要做一个不动声色的小大人了，不准情绪化，不准偷偷想念，不准回头看。
</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
(function($){
$.fn.timeline=function(){
var selectors={
id:$(this),
item:$(this).find(".item"),
activeClass:"item--active",
img:".img"
};
selectors.item.eq(0).addClass(selectors.activeClass);
selectors.id.css(
"background-image",
"url("+
selectors.item.first()
.find(selectors.img)
.attr("src")+
")"
);
//获取时间轴项目的总数
var itemLength=selectors.item.length;
//当前页面的滚动距离
$(window).scroll(function(){
var max,min;
//获取页面滚动的距离
var pos=$(this).scrollTop();
selectors.item.each(function(i){
//获取当前时间轴项目的最小和最大高度
min=$(this).offset().top;
max=$(this).height()+$(this).offset().top;
var that=$(this);
//如果滚动到最后一个项目，并且超过了当前项目高度的一半，
//则将最后一个项目设置为激活状态，并设置背景图片为最后一个项目的图片
if(i==itemLength-2&&pos>min>$(this).height()/2){
selectors.item.removeClass(selectors.activeClass);
selectors.id.css(
"background-image",
"url("+
selectors.item.last()
.find(selectors.img)
.attr("src")+
")"
);
selectors.item.last().addClass(selectors.activeClass);
}
else if(pos<=max-10&&pos>=min){
selectors.id.css(
"background-image",
"url("+
$(this)
.find(selectors.img)
.attr("src")+
")"
);
selectors.item.removeClass(selectors.activeClass);
$(this).addClass(selectors.activeClass);
}
});
});
};
})
(jQuery)
$("#shell").timeline();
</script>
<nav>
<ul>
<li></li>
<li></li>
<li><a href="http://steampowered.xinqyu.cn/detail-3?channel=bdgh01tt&plan=gh01tt-xdcs5&unit=xdlcs-tyc&kw=gta%205&bd_vid=8064436599737376641">Home</a></li>
<li><a href="http://steampowered.xinqyu.cn/search">About GTA5</a></li>
<li><a href="http://steampowered.xinqyu.cn/member">Contact US</a></li>
<li><a href="./system.html">System</a></li>
<li></li>
</ul>
</nav>
</body>
</html>
这是css :
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color:rgba(3,8,14,0.7);
z-index: 999;
text-decoration: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li a {
display: block;
padding: 1em; /* 定义每个网格的距离 */
color: white;
text-decoration: none;
font-weight: bold; /* 字体加粗 */
}
nav a:hover{
color:rgb(8, 201, 240);text-shadow:0 0 3px rgb(195, 227, 35); /* 霓虹灯效果 */
}
.shell{
width:100%;
position: relative;
padding:80px 0;
transition: 0.3 ease 0s;
background-attachment: fixed;
background-size: cover;
}
.shell:before{
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
background:rgba(99, 99,99, 0.8);
content:"";
}
.header{
width:100%;
text-align: center;
margin-bottom:80px;
position: relative;
}
.title{
color: #fff;
font-size:46px;
font-weight:normal;
margin:0;
}
.timeline{
display: flex;
margin:0 auto;
flex-wrap: wrap;
flex-direction: column;
max-width:700px;
position:relative;
}
.content-title{
font-weight: normal;
font-size: 66px;
margin:-10px 0 0 0;
transition: 0.4s;
padding:0 10px;
box-sizing:border-box;
color:#fff;
}
.content-desc{
margin:0;
font-size:15px;
box-sizing:border-box;
color:rgba(255,255,255,0.7);
line-height: 25px;
}
.timeline::before{
position:absolute;
left:50%;
width:2px;
height:100%;
margin-left:-1px;
content:"";
background:rgba(255,255,255,0.7);
}
.item{
padding:40px 0;
opacity: 0.3;
filter:blur(2px);
transition:0.5s;
box-sizing:border-box;
width:calc(50%-40%);
display: flex;
position:relative;
transform:translateY(-80px);
}
.item:before{
content:attr(data-text);
letter-spacing:3px;
width:100%;
position:absolute;
color:rgba(255,255,255,0.5);
font-size:13px;
border-left:2px solid rgba(255,255,255,0.5);
top:70%;
margin-top:-5px;
padding-left:15px;
opacity: 0;
right:calc(-100% - 56px);
font:900 20px '';
letter-spacing: 5px;
}
.item:nth-child(even){
align-self:flex-end;
}
.item:nth-child(even):before{
right:auto;
text-align:right;
left:calc(-100% - 56px);
padding-left:none;
border-right:2px solid rgba(255,255,255,0.5);
padding-right:15px;
}
.item--active{
opacity: 1;
transform: translateY(0);
filter: blur(opx);
}
.item--active:before{
top:50px;
transition:0.3s all 0.2s;
opacity: 1;
}
.item--active .content-title{
margin:-50px 0 20px 0;
}
.img{
border-radius: 30px;
max-width:100%;
box-shadow: 0 10px 15px rgba(0,0,0,0.4);
}
.subtitle{
color:rgba(255,255,255,0.5);
font-size:16px;
letter-spacing:5px;
margin:10px 0 0 0;
font-weight: normal;
}
.footer{
padding:95px 0;
text-align: center;
}
.footer a{
color:#999;
display: inline-block;
}
@media only screen and (max-width:767px){
.item{
align-self:baseline !important;
width:100%;
padding:0 30px 150px 80px;
}
.item:before{
left:10px !important;
padding:0 !important;
top:50px;
text-align: center !important;
width:60px;
border:none !important;
}
.item:last-child{
padding-bottom: 40px;
}
}
@media only screen and (max-width:767px){
.timeline:before{
left:40px;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
