【JS】滚动触发脚本

admin

当滚动到红色指定DIV时，触发蓝色区块脚本，用其它动画脚本替换即可。
$(window).scroll(function () {
var winTop = $(window).scrollTop();
var objTop = $(".center").offset().top;
if(winTop>objTop){console.log(winTop-objTop);}
});

admin

UL lI动画脚本集：
div.news ul li触发动画
CSS：主要是定位初如位置，也可以在JS中定义，更强大
.news .li1,.center .li5{ left:-200px; position:relative; opacity:0}
.news .li2,.center .li6{ left:-100px; position:relative; opacity:.5}
.news .li3,.center .li7{ left:100px; position:relative; opacity:.5}
.news .li4,.center .li8{ left:200px; position:relative; opacity:0}
JS：
$(window).scroll(myanimate);
function myanimate(){
var winTop = $(window).scrollTop();
var Top1 = $(".news").offset().top-$(window).height();
//两边渐入
if(winTop>Top1){$(".news li").animate({left:0,opacity:1},1000);}
//图片1秒内旋转360度
if(winTop>Top1){$(".news li img").css({"transform":"rotate(360deg)","transition": "all 1s ease-in-out"});}
}

admin

滚动在左右侧菜单中的应用：案例ssbingo
当主体内容过长时，右侧菜单自动随屏移动保持始终显示，避免右侧留白带来的视觉较差体验。

DIV：
<div class="frame"><div class="frameright">随滚动而滚动的内容</div>
<div class="framemain">引发滚动的超长主体</div>
</div>

CSS：
节省略，参考ssbingo模板

JS：
$(window).scroll(myanimate);
function myanimate(){
var winTop = $(window).scrollTop();
if($(".frameright").length>0){
var pos=0;
var Top5=$(".frame").offset().top;
var maxTop=Top5 + $(".framemain").height() - $(".frameright").height();
if(winTop>maxTop){ pos=maxTop-winTop;}
if(winTop>Top5){$(".frameright").css({"position":"fixed","top":pos,"left":$(".frameright").offset().left});}else{$(".frameright").css({"position":"","top":0});}
}

admin

$(function(){
    //无需滚动页面时的调用。
    flexsetting(".flexible");
    flexibling(".flexible");
    //需滚动页面时的调用。
    $(window).scroll(function(){flexibling(".flexible");});
})
//动画初始化参数设置，也可以在CSS中设置。
var flexsetting=function(css){
    var o=$(css);
    if(o.length>0){
        var n=o.find("ul li").length;
        var m=Math.floor(n/2);
        if (n%2==1){
            o.find("ul li").eq(m).css("display","none");
            o.find("ul li:lt("+m+")").css("margin-left","-300px");
            o.find("ul li:gt("+m+")").css("margin-right","-300px");
        }else{
            o.find("ul li:lt("+m+")").css("margin-left","-300px");
            o.find("ul li:eq("+m+")").css("margin-right","-300px");
            o.find("ul li:gt("+m+")").css("margin-right","-300px");
        }
    }
}
//适用于css中ul li单行多列的动画，从两边进入，中间淡入。
var flexibling=function(css){
    var wt = $(window).scrollTop();
    var o=$(css);
    var st = o.offset().top - $(window).height();
    var n=o.find("ul li").length;
    var m=Math.floor(n/2);
    if(wt>st){
        if (n%2==1){
            o.find("ul li").eq(m).fadeIn("slow");
            o.find("ul li:lt("+m+")").animate({"margin-left":"0"},"800");//此处"slow"已换成800，会有奇效，意想不到的好。
            o.find("ul li:gt("+m+")").animate({"margin-right":"0"},"slow");
        }else{
            o.find("ul li:lt("+m+")").animate({"margin-left":"0"},"slow");
            o.find("ul li:eq("+m+")").animate({"margin-right":"0"},"slow");
            o.find("ul li:gt("+m+")").animate({"margin-right":"0"},"slow");
        }
    }
}

admin

$(function () {
    rollsetting(".roll",5);    //CSS设定，需指定每行列数，这儿是5列
    $(window).scroll(function () { rolling(".roll"); });    //动画指令
})

var rollsetting = function (css,cols) {
    var mlr = -300;
    var o = $(css);
    var col;
    if (o.length > 0) {
        var n = o.find("ul li").length;
        var m = Math.floor(n / cols);//得到行数
        o.find("ul li").css({ "position": "relative","left": mlr });
        for (var i = 0; i <= m; i++) {
            console.log(i + "\n");
            if (i % 2 == 1) {
                console.log("ss");
                for (var j = 0; j < cols; j++) {
                    col = i * cols + j;
                    if (col < n) {
                        o.find("ul li:eq(" + col + ")").css({ "left": -mlr });
                    }
                }
            }
        }
    }
}

var rolling = function (css) {
    var wt = $(window).scrollTop();
    var o = $(css);
    var st = o.offset().top - $(window).height();
    if (wt > st) {
        o.find("ul li").animate({ left: 0 },1000);
    }
}

admin

$(function () {
        slipsetting(".slip");
        $(window).scroll(function () {
            sliping(".slip");
        });
})
//一般用于左一列为图文，右多列与左列等高的列表，左列左入，右列右入。
var slipsetting = function (css) {
    var mlr = -300;
    var o = $(css);
    if (o.length > 0) {
        o.find("ul li").css({ position: "relative",left: -mlr});
        o.find("ul li:first").css({ position: "relative",left: mlr });
    }
}
var sliping = function (css) {
    var wt = $(window).scrollTop();
    var o = $(css);
    var st = o.offset().top - $(window).height();
    var n = o.find("ul li").length;
    if (wt > st) {
        o.find("ul li").animate({ left: 0 },"slow");
    }
}
//升级版本：利用setInterval实现逐行进入，间隔300ms
var sliping = function (css) {
    var wt = $(window).scrollTop();
    var o = $(css);
    var st = o.offset().top - $(window).height();
    var n = o.find("ul li").length;
    if (wt > st) {
        var i = 0;
        var ds = setInterval(function () {
            o.find("ul li").eq(i).fadeIn("slow").animate({ left: 0 },"slow");
            i++;
            if (i == n ) {
                clearInterval(ds);
            }
        },300);
    }
}

admin

//调用方法
$(function () {
  sidesetting(".case","right");
  $(window).scroll(function () {
    siding(".case","right");
  });
})
//dir为动画方向，只能是top,bottom,left,right
var sidesetting = function (css,dir) {
  var o = $(css);
  if (o.length > 0) {
    var n = o.find("ul li").length;
    var json;
    for (var i = 0; i < n; i++) {
      json = '{"position":"relative","' + dir + '":' + -300 * (i+1) + '}';
      console.log(json + "\n")
      o.find("ul li").eq(i).css(eval('(' + json + ')'));
    }
  }
}
//dir与sidesetting的dir保持一致。
var siding = function (css,dir) {
  var wt = $(window).scrollTop();
  var o = $(css);
  var st = o.offset().top - $(window).height();
  if (wt > st) {
    var i = 0;
    var json;
    var ds = setInterval(function () {
      json='{"' + dir + '":0}';
      o.find("ul li").eq(i).fadeIn("slow").animate(eval('('+json+')'),"slow");
      i++;
      if (i == n) {
        clearInterval(ds);
      }
    },200);
  }
}