...
|
...
|
@@ -11,7 +11,7 @@ var scrollTop; |
|
|
var windowHeight=$(window).height();
|
|
|
var delay,returnDelay,isPlaying=false;
|
|
|
//翻转当前对象动画
|
|
|
function RevolvePic(target){
|
|
|
function revolvePic(target){
|
|
|
//延时对象
|
|
|
var timeHandler1,timeHandler2,timeHandler3,timeHandler4;
|
|
|
var Y = target.offset().top;
|
...
|
...
|
@@ -24,8 +24,7 @@ function RevolvePic(target){ |
|
|
});
|
|
|
|
|
|
//当图片高度小于屏幕高度:滚动高度+屏幕高度>=图片顶端位置+图片高度的三分之二(当三分之二的图片进入屏幕范围即可开始旋转),滚动高度<空间顶端位置+控件高度的三分之二(说明向上滚动)
|
|
|
if ((scrollTop+windowHeight>=Y+height/3*2&&scrollTop<Y+height/3*2)//图片小于屏幕
|
|
|
||
|
|
|
if ((scrollTop+windowHeight>=Y+height/3*2&&scrollTop<Y+height/3*2) || //图片小于屏幕
|
|
|
//当图片高度大于屏幕时分别判断:图片顶端位置+图片高度<=滚动高度+屏幕高度(说明图片已经滚动到底)以及 图片顶端位置-50<=滚动高度(说明图片顶端接近屏幕顶端)
|
|
|
//以上两种判断分别对应:向上滚动、向下滚动
|
|
|
(height>=windowHeight&&Y-50<=scrollTop)||(height>=windowHeight&&Y+height<=scrollTop+windowHeight)) {//当图片大于屏幕时执行
|
...
|
...
|
@@ -33,7 +32,7 @@ function RevolvePic(target){ |
|
|
isStayLong=true;//用户在该显示区域已经停留了足够长的时间,1S
|
|
|
|
|
|
//判断是否已经增加过了旋转样式,如果没有增加就追加
|
|
|
if (target.attr("RevolvePic")==undefined) {
|
|
|
if (target.attr("RevolvePic")===undefined) {
|
|
|
var eleBack = null, eleFront = null,
|
|
|
// 两张被翻转的图片元素
|
|
|
eleList = target.find(".img");
|
...
|
...
|
@@ -81,7 +80,7 @@ function RevolvePic(target){ |
|
|
//页面被拉动到其他区域后
|
|
|
isStayLong=false;
|
|
|
//移出当前区域后解除对target对象的标记
|
|
|
if (target.attr("RevolvePic")!=undefined) {
|
|
|
if (target.attr("RevolvePic")!==undefined) {
|
|
|
target.removeAttr("RevolvePic");
|
|
|
}
|
|
|
//清除四个定时器
|
...
|
...
|
@@ -106,7 +105,7 @@ exports.init=function(info){ |
|
|
delay:2000,
|
|
|
returnDelay:2000,
|
|
|
wrapClass: '.lifestyle-flip'
|
|
|
}
|
|
|
};
|
|
|
var opts = $.extend(defaults, info);
|
|
|
var targets=null;
|
|
|
targets=$(opts.wrapClass);
|
...
|
...
|
@@ -124,17 +123,17 @@ if(opts.operate=="auto") |
|
|
var isImagesLoaded=false;
|
|
|
targets.find("img:first").imagesLoaded(function(){
|
|
|
isImagesLoaded=true;
|
|
|
RevolvePic($(this).parent().parent());
|
|
|
revolvePic($(this).parent().parent());
|
|
|
});
|
|
|
|
|
|
|
|
|
$(window).scroll(function(){
|
|
|
if(isImagesLoaded===true){
|
|
|
scrollTop=$(document).scrollTop();
|
|
|
targets.each(function(index,obj){
|
|
|
RevolvePic($(obj));
|
|
|
});
|
|
|
};
|
|
|
scrollTop=$(document).scrollTop();
|
|
|
targets.each(function(index,obj){
|
|
|
revolvePic($(obj));
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
else if(opts.operate=="mouse")
|
...
|
...
|
|