$("#app").offset().top;
offset().top表示 绝对偏移值，比如说有一个很长的页面，#app这个元素 在最底下， $("#app").offset().top就表示 #app这个元素距离页面顶端的距离，它一般是固定的，不随窗口滚动而改变。
$(window).scrollTop();
窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离
$(window).height();
浏览器可视窗口的高度
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var a = $("#app").offset().top;
if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {
alert("div在可视范围");
}
});
});
</script>
第一种方法：不适合扩展
$(document).ready(function(){
$(window).scroll(function(){
var t1=$("#a1").offset().top;
var t2=$("#a2").offset().top;
var t3=$("#a3").offset().top;
var t4=$("#a4").offset().top;
var top=$(window).scrollTop();
var _hight=$(window).height();
if(t1>=top&&t1<(top+_hight)){
$("#a1 .p-img").find("img").addClass("on");
}
if(t2>=top&&t2<(top+_hight)){
$("#a2 .p-img").find("img").addClass("on");
}
if(t3>=top&&t3<(top+_hight)){
$("#a3 .p-img").find("img").addClass("on");
}
if(t4>=top&&t4<(top+_hight)){
$("#a4 .p-img").find("img").addClass("on");
}
})
})
第二种方法：
$(document).ready(function(){
var _length=$('.pro-lb').length;
var _top=$(window).scrollTop();
var _hight=$(window).height();
for(var i=0;i<_length;i++){
var t=$('.pro-lb').eq(i).offset().top;
if(t>=_top&&t<(_top+_hight)){
$('.pro-lb .p-img').eq(i).find('span').css({transform:' translate(100%, 0%)'})
}
}
$(window).scroll(function(){
var _top=$(window).scrollTop();
for(var i=0;i<_length;i++){
var t=$('.pro-lb').eq(i).offset().top;
if(t>=_top&&t<(_top+_hight)){
$('.pro-lb .p-img').eq(i).find('span').css({transform:'translate(100%, 0%)'})
}else if(t>(_top+_hight)){
$('.pro-lb .p-img').eq(i).find('span').css({transform:' translate(0%, 0%)'})
}
}
})
})
.p-content{position: relative;font-family: "Source Sans Pro";}
.p-top h1{font-size: 60px;font-weight: bold;color: #000000;line-height: 100px;margin:80px 0 30px 8%;}
.pro-txt{width: 52%;padding: 0 3% 0 8%;position: relative;z-index: 1;}
.pro-txt h2{margin: 50px 0 40px;}
.pro-txt h2 a{display: block;font-size: 40px;color: #4d526e;font-weight: bold;letter-spacing: -2px;}
.pro-txt span{font-size: 20px;color: #4d526e;font-weight: bold;display: block;line-height: 42px;}
.pro-txt span strong{color: #333333;font-weight: bold;}
.pro-txt i{display: block;width: 120px;height: 2px;background: #1ea78d;margin: 20px 0 10px;}
.pro-txt .txt{font-size: 18px;color: #4d526e;font-family: "思源黑体 CN";word-break: break-all;line-height: 46px;}
.p-list{margin-bottom: 60px;}
.pro-lb{padding: 70px 0 60px;}
.pro-txt .more{font-size: 22px;color: #4d526e;font-family: "Microsoft YaHei UI";font-weight: bold;margin-top: 18px;display: block;}
.pro-txt .more:hover{-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;padding-left: 10px;color: #fb624e;}
.p-img{width: 675px;min-height: 665px;overflow: hidden;position: relative;}
.p-img img{width: 100%;position: absolute;top:0;left: -100%;}
.p-img img.on{transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);-ms-transition:1.5s;-moz-transition:1.5s;-webkit-transition:1.5s;-o-transition:1s;transition:1.5s;}
<div class="p-list">
<div class="pro-lb" id="a1">
<div class="wp clearfix">
<div class="pro-txt l wow fadeInUp">
<h2><a href="">Single-cylinder Cone Crusher</a></h2>
<span>Production Capacity:<strong>1-2200t/h</strong></span>
<span>Feeding Size:<strong>120-11mm</strong></span>
<span>Output Size:<strong>10-400mm</strong></span>
<i></i>
<p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>
<a href="" class="more">+ More</a>
<a href="" class="quote">Get a quote</a>
</div>
<div class="p-img r">
<a href="" rel="nofllow"><img src="images/pro.jpg" alt="Single-cylinder Cone Crusher" ></a>
</div>
</div>
</div>
<div class="pro-lb1" id="a2">
<div class="wp clearfix">
<div class="p-img l">
<a href="" rel="nofllow"><img src="images/pro01.jpg" alt="Single-cylinder Cone Crusher"></a>
</div>
<div class="pro-txt r wow fadeInUp">
<h2><a href="">Single-cylinder Cone Crusher</a></h2>
<span>Production Capacity:<strong>1-2200t/h</strong></span>
<span>Feeding Size:<strong>120-11mm</strong></span>
<span>Output Size:<strong>10-400mm</strong></span>
<i></i>
<p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>
<a href="" class="more">+ More</a>
<a href="" class="quote">Get a quote</a>
</div>
</div>
</div>
<div class="pro-lb" id="a3">
<div class="wp clearfix">
<div class="pro-txt l wow fadeInUp">
<h2><a href="">Single-cylinder Cone Crusher</a></h2>
<span>Production Capacity:<strong>1-2200t/h</strong></span>
<span>Feeding Size:<strong>120-11mm</strong></span>
<span>Output Size:<strong>10-400mm</strong></span>
<i></i>
<p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>
<a href="" class="more">+ More</a>
<a href="" class="quote">Get a quote</a>
</div>
<div class="p-img r">
<a href="" rel="nofllow"><img src="images/pro02.jpg" alt="Single-cylinder Cone Crusher"></a>
</div>
</div>
</div>
<div class="pro-lb1" id="a4">
<div class="wp clearfix">
<div class="p-img l">
<a href="" rel="nofllow"><img src="images/pro03.jpg" alt="Single-cylinder Cone Crusher"></a>
</div>
<div class="pro-txt r wow fadeInUp">
<h2><a href="">Single-cylinder Cone Crusher</a></h2>
<span>Production Capacity:<strong>1-2200t/h</strong></span>
<span>Feeding Size:<strong>120-11mm</strong></span>
<span>Output Size:<strong>10-400mm</strong></span>
<i></i>
<p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>
<a href="" class="more">+ More</a>
<a href="" class="quote">Get a quote</a>
</div>
</div>
</div>
</div>
网友评论