论坛

标题: 滚动到h1 p标签内容得位置h1 p得内容显示不出，老师给我看一下我的代码出错在哪 [打印本页]

作者: L1587997 时间: 2019-12-10 17:52
标题: 滚动到h1 p标签内容得位置h1 p得内容显示不出，老师给我看一下我的代码出错在哪
<!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>

欢迎光临论坛 (http://bbs.qinxue.com/)