可视区域检测js

/******************************

 e7详情

 2016-03-17 18:50:15 liuqiao 创建

*******************************/

$namespace("iuni.official_e7_detail");

/******************************

　全局参数配置

*******************************/

iuni.official_e7_detail.data = {

};

iuni.official_e7_detail.dom = {
container: document.getElementById('container')

};

/******************************

　初始化配置

*******************************/

iuni.official_e7_detail.init = function() {
this.scrollY();
this.sliderBanner();

};

//l轮播动画

iuni.official_e7_detail.sliderBanner = function() {
$(this.dom.container).find('.slider .banner').flexslider({
animation: "slide", //String: Select your animation type, "fade" or "slide"图片变换方式：淡入淡出或者滑动
slideshowSpeed: 7000, //图片切换速度
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向：左右或者上下
animationSpeed: 2000, //单张图片动画速度
directionNav: false,
animationLoop: true,
pauseOnHover: true,
slideToStart: 0
});

};

/**

 * 上下滚动

 */

iuni.official_e7_detail.scrollY = function() {
var me = this;

var docElem = window.document.documentElement;

function getViewportH() {
var client = docElem['clientHeight'],
inner = window['innerHeight'];

if (client < inner)
return inner;
else
return client;
}

function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}

function getOffset(el) {
var offsetTop = 0,
offsetLeft = 0;
do {
if (!isNaN(el.offsetTop)) {
offsetTop += el.offsetTop;
}
if (!isNaN(el.offsetLeft)) {
offsetLeft += el.offsetLeft;
}
} while (el = el.offsetParent)

return {
top: offsetTop,
left: offsetLeft
}
}

function inViewport(el, h) {
var elH = el.offsetHeight,
scrolled = scrollY(),
viewed = scrolled + getViewportH(),
elTop = getOffset(el).top,
elBottom = elTop + elH,
h = h || 0;

return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
}
$(window).on('scroll', function() {
var top = $(this).scrollTop(),
h = $(this).height();
// var i = top / h * 100;
// var j = 1 - i;
$(me.dom.container).find('.mobile').each(function() {
if (inViewport(this)) {
var top = this.getBoundingClientRect().top;
var i = top / h * 200;
this.style.cssText = 'transition: all 2s ease-in-out; transform:translate3d(0px, ' + i + 'px, 0px) rotate(0deg)'
} else {
this.style.cssText = '';
}

});
$(me.dom.container).find('.mobile1').each(function() {
if (inViewport(this)) {
var top = this.getBoundingClientRect().top,
i;
if (top < 0) {
i = -(top / h * 1000);
} else {
i = top / h * 200;
}
this.style.cssText = 'transition: all 2s ease-in-out; transform:translate3d(0px, ' + i + 'px, 0px) rotate(0deg)'
} else {
this.style.cssText = '';
}

});
$(me.dom.container).find('.mobile2').each(function() {
if (inViewport(this)) {
var top = this.getBoundingClientRect().top;
var i = top / h * 200;
var j = top / h * 30;
this.style.cssText = 'transition: all 2s ease-in-out; transform:translate3d(0px, ' + i + 'px, 0px) rotate(' + j + 'deg)'
} else {
this.style.cssText = '';
}

});
$(me.dom.container).find('.interface').each(function() {
if (inViewport(this)) {
this.style.cssText = 'transition: all 2s ease-in-out; transform:translate3d(-3.8%, -5.2%, 0px) rotate(3deg)';
//    transition: all 2s ease-in-out;
//transform: translate3d(-50px,-40px, 0px) rotateX(0deg);
} else {
this.style.cssText = '';
}
})
})

};

/******************************

　功能实现区

*******************************/

iuni.official_e7_detail.init();