基于jQuery的封装

/*
* 
* index.js
*
*/
;(function ($, window, document, undefined) {
    $.extend({
        index: function (options) {
            //默认值
            var defaults = {
            nav:"#nav"// 导航id
            };
            var settings = $.extend({}, defaults, options);
            $(settings.nav).on('click','ul>li',function(){
            var index = $(this).index();
            $(this).addClass('navActive').siblings().removeClass('navActive');
            if(index==2){
            $(settings.nav).find('ul>li').eq(0).click();
            }
            });
            // 尾部切换函数应用
            jQuery('#Slide1').ljSlide({ speed: 500 });
            $(".poduct_content_bottom").hide();
            $(".product_content_c").hide();
            $(".about_list li").hide();
            $(".about_jieren").hide();
            $(".about_jieren_bt li").hide();
            $(".develop_jieren").hide();
            $(".develop_jieren_content p").hide();
            //$(".client_jieren").hide();
            // 滚动条事件
            $(window).scroll(function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var offsetTop = $(".product_intr").offset().top;
var clientTop = offsetTop -scrollTop;
if(clientTop<825){
$(".product_content_c").show();
$(".product_intr").addClass('animated fadeInDown');
$(".poduct_content_top_left").addClass('fadeInLeftBig animated')
$(".poduct_content_top_right").addClass('fadeInRightBig animated ')
$(".poduct_content_top_center").addClass('animated fadeInDown');
} else {
$('.product_intr,.poduct_content_top_left,.poduct_content_top_right,.poduct_content_top_center').removeClass('animated fadeInLeftBig fadeInRightBig fadeInDown fadeInUp');
}
// 档案酷动画
if(clientTop<455){
$(".poduct_content_bottom").show();
$(".poduct_content_bottom_left").addClass('fadeInLeftBig animated');
            $(".poduct_content_bottom_right").addClass('fadeInUp animated');
            $(".record_span").addClass('fadeInDown animated');
} else{
$('.poduct_content_bottom_left,.poduct_content_bottom_right,.record_span').removeClass('animated fadeInLeftBig fadeInRightBig fadeInDown fadeInUp');
}
// 关于杰人
if(clientTop<280){
$(".poduct_content_bottom").show();
$(".poduct_content_bottom_left").addClass('fadeInLeftBig animated');
            $(".poduct_content_bottom_right").addClass('fadeInUp animated');
            $(".record_span").addClass('fadeInDown animated');
} else{
$('.poduct_content_bottom_left,.poduct_content_bottom_right,.record_span').removeClass('animated fadeInLeftBig fadeInRightBig fadeInDown fadeInUp');
}
if(clientTop < -331){
$(".about_jieren").show();
$(".about_list li").eq(0).show();
$(".about_list li").eq(1).show();
$(".about_list li").eq(0).addClass('animated  fadeInLeftBig');
$(".about_list li").eq(1).addClass('animated  fadeInLeftBig');
} else{
$(".about_list li").eq(0).removeClass('animated  fadeInLeftBig');
$(".about_list li").eq(1).removeClass('animated  fadeInLeftBig');
}
if(clientTop < -535){
$(".about_list li").eq(2).show();
$(".about_list li").eq(3).show();
$(".about_list li").eq(2).addClass('animated  fadeInLeftBig');
$(".about_list li").eq(3).addClass('animated  fadeInLeftBig');
} else {
$(".about_list li").eq(2).removeClass('animated  fadeInLeftBig');
$(".about_list li").eq(3).removeClass('animated  fadeInLeftBig');
}
if(clientTop < -725){
setTimeout(function(){
$(".about_jieren_bt li").eq(0).show().addClass('animated  fadeInRightBig');
},500);
setTimeout(function(){
$(".about_jieren_bt li").eq(1).show().addClass('animated  fadeInRightBig');
},1000);
setTimeout(function(){
$(".about_jieren_bt li").eq(2).show().addClass('animated  fadeInRightBig');
},1500);
} else{
$(".about_jieren_bt li").removeClass('animated  fadeInRightBig');
}
if(clientTop < -1010){
$(".develop_jieren").show();
$(".develop_jieren_content").addClass('animated  fadeInDown');
setTimeout(function(){
            $(".develop_jieren_content p").eq(0).show().addClass('animated  fadeInLeftBig').show();
            },500);
            setTimeout(function(){
            $(".develop_jieren_content p").eq(1).show().addClass('animated  fadeInLeftBig').show();
            },1000);
            setTimeout(function(){
            $(".develop_jieren_content p").eq(2).show().addClass('animated  fadeInLeftBig').show();
            },1500);
            setTimeout(function(){
            $(".develop_jieren_content p").eq(3).show().addClass('animated  fadeInLeftBig').show();
            },2000);
            var set5 = setTimeout(function(){
            $(".develop_jieren_content p").eq(4).show().addClass('animated  fadeInLeftBig').show();
            },2500);
} else{
$(".develop_jieren_content p").removeClass('animated  fadeInLeftBig');
$(".develop_jieren_content").removeClass('animated  fadeInDown');
}
        });
   }
    });

})(jQuery, window, document);

我们只需要在页面上调用

<script>
jQuery(function($){
$.index();
})
</script>

就可以实现封装，可以让我们更加清楚页面上的属性的含义，使得页面更加简洁