<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动条到指定位置逐次显示内容</title>
<style>
*{padding: 0;margin: 0}
.header{height: 500px;background-color: red}
.nav{height: 400px;background-color: green;}
.about{width: 1000px; height: 600px;background-color: yellow;margin: 0 auto;overflow: hidden;}
.about .left{width: 200px;height: 600px;background-color: #772E2F;float: left;position: relative;left: -200px;transition: 1s}
.about .right{width: 600px;height: 600px;background-color: #59BBD2;float: right;position: relative;right: -500px;transition: 1s}
.about .left.on{left: 0}
.about .right.on{right: 0}
.news{height: 600px;background-color: #333333;width: 100%;overflow: hidden;}
.news h1{text-align: center;position: relative;left: -100%;top: 0; transition: 0.5s}
.news p{text-align: center;position: relative;right: -100%;top: 0; transition:0.5s}
.news .on h1{left: 0}
.news .on p{right: 0}
.footer{height: 500px;background-color: aqua;}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="about">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="news on">
<h1>是肯定会受到零</h1>
<p>来释放速率时间服了你了我就了呢我威风呢四九年是v来释放速率时间服了你<br/>
来释放速率时间服了你了我就了呢我威风呢四九年是v了我就了呢我威风呢四<br/>
来释放速率时间服了你了我就了呢我威风呢四九年是v九年是v</p>
</div>
<div class="footer"></div>
</body>
<script src= "jquery案例/js/jquery.js"></script>
<script>
$(function(){
var ft=$(".about").offset().top
//alert(ft)
var wint=$(window).height()*0.6
var newto=$(".news").offset().top
$(window).scroll(function(){
var st=$(this).scrollTop()
//alert(st)
if(st>ft-wint){
$(".left,.right").addClass("on")
}
if(st>newto-wint){
$(".news").addClass("on")
}
})
})
</script>
</html>
|
|
|
|
|
共0个回复 最后回复于 2019-12-10 17:52