废话不多说直接上代码
(function () {
var scrollShow = function () {
this.$container = $("body");
if(this.$container.find(".scrollShow").length){
this.$scrollShow = this.$container.find(".scrollShow");
}
this.init();
};
var p = scrollShow.prototype;
p.init = function () {
this.initHidden();
this.initScroll();
$(window).trigger("scroll");
};
//显示隐藏
p.initHidden = function(){
console.log("sfahjjhj");
this.$container.find(".scrollShow").each(function() {
$(this).parent().css("overflow", "hidden");
$(this).data("show", false).css("opacity", 0.5);
if ($(this).css("position") === "static") {
$(this).css("position", "relative");
}
var t = $(this).css("top") === "auto" ? 0 : parseInt($(this).css("top"));
var top = $(this).height() > 400 ? $(this).height() / 2 : 400;
//将元素top值增加
$(this).data({"top": t, "height": top}).css({"top": t + top});
})
};
//滚动加载
p.initScroll = function () {
var dom =this;
$(window).scroll(function(){
var delayIndex = 0;//延迟的时间
//元素的内部高度（包括padding填充）
var secHeight = $(this).innerHeight();//窗口的内部高度
var TopMax = $(this).scrollTop() + secHeight;
var TopMin = $(this).scrollTop() - secHeight;
dom.$container.find(".scrollShow").each(function(){
var height = $(this).data("height");
//相对于文档的偏移距离
var top = $(this).offset().top - height;//将元素top值减小
if( top <= TopMax && top >= TopMin && !$(this).data("show")){
var $doc = $(this);
$doc.data("show",true);
$doc.delay(delayIndex).animate({
"top": $doc.data("top"),
"opacity": 1
},500);
delayIndex += 500;
}
})
})
};
window.scrollShow = scrollShow;
})();
调用方式
需要特效的元素加指定的选择器 scrollShow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollShow</title>
<style>
.imgBox{
800px;
height: 400px;
background: #59b0dd;
margin: 0 auto 30px;
}
.imgBox img{
700px;
height: 300px;
margin: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="imgBox "><img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt=""></div>
<div class="imgBox scrollShow">今晚的月亮好圆呀，就想你的脸</br>今晚的月亮好圆呀，就想你的脸</br>今晚的月亮好圆呀，就想你的脸</br>今晚的月亮好圆呀，就想你的脸</br></div>
<div class="imgBox scrollShow"><img src="http://img.zcool.cn/community/0167ec5770fb3e0000012e7eb23909.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
<div class="imgBox scrollShow"><img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt=""></div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
//创建scrollShow实例即可
var show = new scrollShow();
})
</script>
</body>
</html>