快捷导航
发新帖
返回列表
<!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

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表