js构建函数优秀案例

这几个效果函数是看到别人写的，挺好的，复制下来学习备用！

函数封装：

//var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?62be88d37b49a5ca149df10c84d83824";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s)})();
//document.write("<link href=\"http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css\" type=\"text/css\" rel=\"stylesheet\">");
//构建函数：移动端判断device.js

//控制PAD尺寸问题
//if(device.mobile()){document.writeln("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">");$(function(){$("body").css("minwidth","1130px")})};if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(/iPad|Pad/i.test(navigator.userAgent)){$(function(){$("body").css("minWidth","1130px")})}}
//document.writeln("<link href=\"http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css\" type=\"text/css\" rel=\"stylesheet\">");
//全能TAB切换
function PaPtabs(thisObj,Num){if(thisObj.className=="active")return;var tabObj=thisObj.parentNode.id;var tabList=document.getElementById(tabObj).getElementsByTagName("li");for(i=0;i<tabList.length;i++){if (i==Num){thisObj.className="active";document.getElementById(tabObj+"C"+i).style.display="block"}else{tabList[i].className="normal";document.getElementById(tabObj+"C"+i).style.display="none"}}};

function CheckForm() { if ($('#key').val() == '') { alert('\u8bf7\u8f93\u5165\u8981\u67e5\u8be2\u7684\u5173\u952e\u8bcd\uff01'); return false }}

$(function()
{

$(".thover").hover(function () {$(".showcont", this).show()}, function () {$(".showcont", this).hide()});

});

(function (window, $, undefined) {

//构建函数：自动控制 图片、覆盖式图文尺寸
    $.fn.autoimgs = function(options) {
        var autoimgssetting = { model: 0, pc_imgcel: 0.65, pc_rowlictrl: 0, pc_margright: 15, mb_imgcel: 0.65, mb_rowlictrl: 0, mb_margright: 8, spanhight: 30,spanno:1 }; if (options) { $.extend(autoimgssetting, options) };
        this.each(function() {
            var $this = $(this);
            var models = autoimgssetting.model;
            var tw = $this.width();
            var wodh = autoimgssetting.spanhight * autoimgssetting.spanno;
            if (device.mobile()) {
                var mb_imgb = autoimgssetting.mb_imgcel;
                var mb_mgr = autoimgssetting.mb_margright;
                var mb_rowlino;
                if (autoimgssetting.mb_rowlictrl == 0) {
                    mb_rowlino = $("li", this).length;
                } else {
                    mb_rowlino = autoimgssetting.mb_rowlictrl;
                }
                var mb_rowlikd = mb_rowlino - 1;
                var mb_rowliwidth = (tw - mb_mgr * mb_rowlikd - 0.66666666) / mb_rowlino;
                var mb_rowph = mb_rowimgh = mb_rowliwidth * mb_imgb;
                var mb_rowlih = mb_rowph + wodh;
                $("li", this).css({
                    "width": mb_rowliwidth + "px",
                    "height": mb_rowlih + "px",
                    "margin-right": mb_mgr + "px",
                    "overflow": "hidden"
                });
                $("li p", this).css({ "height": mb_rowph + "px" });
                for (var i = 0; i < 20; i++) {
                    var j = mb_rowlino * i - 1;
                    $("li:eq(" + j + ")", this).css({ "margin-right": "0" });
                }
            } else {
                var pc_imgb = autoimgssetting.pc_imgcel;
                var pc_mgr = autoimgssetting.pc_margright;
                var pc_rowlino;
                if (autoimgssetting.pc_rowlictrl == 0) {
                    pc_rowlino = $("li", this).length;
                } else {
                    pc_rowlino = autoimgssetting.pc_rowlictrl;
                }
                var pc_rowlikd = pc_rowlino - 1;
                var pc_rowliwidth = (tw - pc_mgr * pc_rowlikd - 0.66666666) / pc_rowlino;
                var pc_rowph = pc_rowimgh = pc_rowliwidth * pc_imgb;
                var pc_rowlih = pc_rowph + wodh;
                $("li", this).css({
                    "width": pc_rowliwidth + "px",
                    "height": pc_rowlih + "px",
                    "margin-right": pc_mgr + "px",
                    "overflow": "hidden"
                });
                $("li p", this).css({ "height": pc_rowph + "px" });
                for (var i = 0; i < 20; i++) {
                    var j = pc_rowlino * i - 1;
                    $("li:eq(" + j + ")", this).css({ "margin-right": "0" });
                }
            };
            if (models == 1000) {
                $("li", this).css({ "display": "none" });
                if (device.mobile()) {
                    var z = mb_rowlino, j = mb_rowlino - 1, k = j - 1;
                } else {
                    var z = pc_rowlino, j = pc_rowlino - 1, k = j - 1;
                };
                for (var i = 0; i < z; i++) {
                    $("li:eq(" + i + ")", this).css({ "display": "block" });
                }
                $("li:eq(" + j + "),li:eq(" + k + ")", this).css({ "margin-right": "0" });
                $("li:eq(" + j + ")", this).css({ "float": "right" });
            }
        });
    }

//构建函数：自动控制 图文、列表尺寸
$.fn.listwidth=function(options) {
    var listsetting={imgscale:0.75,dtscale:0.31,ddscale:0.63666666,model:0};if (options){$.extend(listsetting,options)};
    this.each(function() {
        var $this = $(this);
        var ws = $this.width();
        var dtwidth = ws * listsetting.dtscale;
        var ddwidth = ws * listsetting.ddscale;
        var ddheight = dtwidth * listsetting.imgscale;
        var dtheight = dtwidth * listsetting.imgscale;
        var listmodel = listsetting.model;
        if (listmodel == 0) {$("dt", this).css({ "float": "left" });$("dd", this).css({ "float": "right" });}
        else {$("dt", this).css({ "float": "right"});$("dd", this).css({ "float": "left" });};
        $("dt", this).css({ "width": dtwidth + "px", "height": dtheight + "px" });
        $("dd", this).css({ "width": ddwidth + "px", "height": ddheight + "px" });
    });
}
//构建函数：通用显示隐藏图层
$.fn.droupdown = function(options){var dpsetting={dpdcnt:".think_droupmenus",hoverclass:"hover"};if (options){$.extend(dpsetting, options)};this.each(function() {$(this).hover(function(){$(this).addClass(dpsetting.hoverclass);$(dpsetting.dpdcnt,this).show()},function(){$(this).removeClass(dpsetting.hoverclass);$(dpsetting.dpdcnt,this).hide()})})};
//构建函数：图片延迟加载

//构建函数：广告控制,随机图片、动画、文字、网页兼容手机端
$.fn.thinkads = function (options)
{
    //var ad = { model: "", ifdis: "", width: "", mwidth: "", height: "", mheight: "", mimgcel: 0.333, rand: 1, folder: [{ "res": "", "url": "", "word": "", "mres": "", "murl": "", "mword": "", "mifdis": "" }], margintop: "", marginright: "", marginbottom: "", marginleft: "", mmargintop: "", mmarginright: "", mmarginbottom: "", mmarginleft: "" };
    var ad = {
        folder: [{res: "", url: "", word: "",   mres: "", murl: "", mword: ""}],
        rand: 1,
        model: "",display: "",width: "", height: "", margin: "",pos:"",
        mmodel: "",mdisplay: "",mwidth: "", mheight: "", mmargin: "", mimgcel: 0.3
    };
    if (options) { $.extend(ad, options) };
    this.each(function() {
        var $this = $(this);
        var devicewidth = $this.width();
        var pcdisplay = ad.display;
        var pcwidth = ad.width;
        var pcheight = ad.height;
        var pcmargin = ad.margin;
        var pcmodel = ad.model;

        var mbdisplay = ad.mdisplay;
        var mbwidth = ad.mwidth;
        var mbheight = ad.mheight;
        var mbmargin = ad.mmargin;
        var mbmodel = ad.mmodel;

        var gpos = ad.pos;

        $(this).append("<div class='eye " +gpos+"'>广告</div>");

        function mixArray(source) {
            var goal = [];
            for (var i = 0; i < source.length; i++) {
                var pos = Math.floor(Math.random() * (source.length - i));
                goal[i] = source[pos];
                source[pos] = source[source.length - 1 - i];
            }
            return goal;
        }

        var ro = new Array();
        for (var x = 0; x < ad.folder.length; x++) {
            ro[x] = x;
        };
        ro = mixArray(ro);
        for (var j = 0; j < ad.rand; j++) {
            var pcres = ad.folder[ro[j]].res;
            var pcurl = ad.folder[ro[j]].url;
            var pcword = ad.folder[ro[j]].word;

            var mbres = ad.folder[ro[j]].mres;
            var mburl = ad.folder[ro[j]].murl;
            var mbword = ad.folder[ro[j]].mword;
            var mbmimgcel = ad.mimgcel;

            var pcflinkheight = pcheight - 45;
            var pchref = "", pcflhref = "", mbhref = "";
            var pcimgtempltet = "", pcflashtemplate = "", pcwordtemplate = "", pcimgwordtemplate = "";
            var mbimgtempltet = "", mbwordtemplate = "";

            if (mbwidth == '') {mbwidth = devicewidth}
            if (mbheight == '') {mbheight = mbwidth * mbmimgcel}
            if (pcurl == '') {pchref = "href='javascript:void(0);'";pcflhref = "";
            } else {
                pchref = "href=" + pcurl + " target='_blank'";
                pcflhref = "<div style='position:absolute;z-index:10'><a href=" + pcurl + " target='_blank' style='z-index:90000;width:100%; height:" + pcflinkheight + "px; display:block'></a></div>";
            };
            if (mburl == '') {
                mbhref = "href='javascript:void(0);'";
            } else {
                mbhref = "href=" + mburl + " target='_blank'";
            };
            pcimgtempltet = "<div class='hid-xs' style='height:" + pcheight + "px; width:100%'><a " + pchref + "><img src=" + pcres + " style='width:100%;height:" + pcheight + "px'></a></div>";
            pcflashtemplate = "<div class='hid-xs' style='width:100%; height:" + pcheight + "px'>" + pcflhref + "<embed src=" + pcres + " allowFullScreen='true' quality='high' style='width:100%; height:" + pcheight + "px' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed></div>";
            pcwordtemplate = "<a " + pchref + ">" + pcword + "</a>";
            pcimgwordtemplate = "<dl><a " + pchref + "><dt><img src='" + pcres + "' /></dt><dd>" + pcword +"</dd></a></dl>";
            mbimgtempltet = "<div class='hid-sm'><a " + mbhref + "><img src=" + mbres + " style='height:" + mbheight +"px'></a></div>";
            mbwordtemplate = "<a " + mbhref + ">" + mbword + "</a>";
            if (device.mobile()) {
                if (mbmodel == 'image') {$(this).append(mbimgtempltet);}
                else if (mbmodel == 'word') {$(this).append(mbwordtemplate);}
            } else
            {
                if (pcmodel == 'image') { $(this).append(pcimgtempltet); }
                else if (pcmodel == 'flash'){$(this).append(pcflashtemplate)}
                else if (pcmodel == 'word'){$(this).append(pcwordtemplate)}
                else if (pcmodel == 'imgword'){$(this).append(pcimgwordtemplate)}
            }
        }
        //(device.mobile()) ? $(this).css({ "margin": mbmargin })  : $(this).css({ "margin": pcmargin });
        if (device.mobile()) {
            $(this).css({ "margin": mbmargin });
            if (mbdisplay == 'none') {$(this).css({ "display": "none" })}
        } else {
            $(this).css({ "margin": pcmargin });
            if (pcdisplay == 'none') {$(this).css({ "display": "none" })}
        }
    });
}

$.fn.smartFloat = function () { var position = function (element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function () { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: "45px" }) } else { element.css({ top: scrolls }) } } else { element.css({ position: pos, top: top }) } }) }; return $(this).each(function () { position($(this)) }) };

$.fn.lazyload = function (options) { var settings = { threshold: 0, failurelimit: 0, event: "scroll", effect: "show", container: window }; if (options) { $.extend(settings, options) } var elements = this; if ("scroll" == settings.event) { $(settings.container).bind("scroll", function (event) { var counter = 0; elements.each(function () { if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $(this).trigger("appear") } else { if (counter++ > settings.failurelimit) { return false } } }); var temp = $.grep(elements, function (element) { return !element.loaded }); elements = $(temp) }) } return this.each(function () { var self = this; $(self).attr("original", $(self).attr("src")); if ("scroll" != settings.event || $.belowthefold(self, settings) || $.rightoffold(self, settings)) { if (settings.placeholder) { $(self).attr("src", settings.placeholder) } else { $(self).removeAttr("src") } self.loaded = false } else { self.loaded = true } $(self).one("appear", function () { if (!this.loaded) { $("<img />").bind("load", function () { $(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed); self.loaded = true }).attr("src", $(self).attr("original")) } }); if ("scroll" != settings.event) { $(self).bind(settings.event, function (event) { if (!self.loaded) { $(self).trigger("appear") } }) } }) }; $.belowthefold = function (element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).height() + $(window).scrollTop() } else { var fold = $(settings.container).offset().top + $(settings.container).height() } return fold <= $(element).offset().top - settings.threshold }; $.rightoffold = function (element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).width() + $(window).scrollLeft() } else { var fold = $(settings.container).offset().left + $(settings.container).width() } return fold <= $(element).offset().left - settings.threshold }; $.extend($.expr[':'], { "below-the-fold": "$.belowthefold(a,{threshold:0,container:window})", "above-the-fold": "!$.belowthefold(a,{threshold:0,container:window})", "right-of-fold": "$.rightoffold(a, {threshold:0,container:window})", "left-of-fold": "!$.rightoffold(a,{threshold:0,container:window})" }); $.fn.zoomImgRollover = function (b) { var d = { percent: 30, duration: 600 }; var c = $.extend(d, b); function a(h, f, l, k) { var g = Math.round(l * (0.5 + ((f * c.percent) / 200))) * 2; var e = Math.round(k * (0.5 + ((f * c.percent) / 200))) * 2; var j = (g - l) / 2; var i = (e - k) / 2; h.css({ width: g, height: e, top: -i, left: -j }) } return this.each(function () { var e = $(this); var g = e.width(); var f = e.height(); e.css({ position: "relative" }); e.parent().css({ overflow: "hidden", display: "block", position: "relative", width: g, height: f }); e.mouseover(function () { e.stop().animate({ dummy: 1 }, { duration: c.duration, step: function (h) { a(e, h, g, f) } }) }); e.mouseout(function () { e.stop().animate({ dummy: 0 }, { duration: c.duration, step: function (h){a(e,h,g,f)}})})})}

})(window, jQuery);

//负载函数

函数调用：

$(function()
{
    $(".img_titauto").autoimgs();$(".img_hovauto").autoimgs({spanhight:0});
    $(".img_notit").autoimgs({spanhight:0});$(".thinklist").listwidth();$(".droup_down").droupdown();
    //$('.Tui-web_section img').lazyload({effect:"fadeIn"})});$(function(){$('.Tui-web_aside img').lazyload({effect:"fadeIn"});
    //$('.zoom img').zoomImgRollover();
    $(".img_tit1000232").autoimgs({ model: 1000, pc_imgcel: 0.6, pc_rowlictrl: 2, mb_rowlictrl: 3, spanno: 2 });//pc只显示2个，手机只显示3个
    $(".img_tit100023").autoimgs({ model: 1000, pc_imgcel: 0.6, pc_rowlictrl: 2, mb_rowlictrl: 3 });//pc只显示2个，手机只显示3个
    $(".img_tit10003").autoimgs({ model: 1000, mb_rowlictrl: 3 });//pc正常排列一排，手机只显示3个
    $(".img_titrows").autoimgs({pc_rowlictrl:3,mb_rowlictrl:3});//PC/手机按照指令多行排列
    $(".img_hovauto100023").autoimgs({model:1000,pc_rowlictrl:2,mb_rowlictrl:3,spanhight:0});//pc只显示2个，手机只显示3个
    $(".img_hovauto10003").autoimgs({model:1000,mb_rowlictrl:3,spanhight:0});//pc正常排列一排，手机只显示3个
    $(".Tcms_list_notit").autoimgs({ model: 1000, pc_rowlictrl: 4, mb_rowlictrl: 3, pc_imgcel: 0.65, mb_imgcel: 0.65, spanhight: 0 });//分页列表专用
    $(".thovers").droupdown({});

    $(".lasidecont").smartFloat();
//    $(".showcont").hide(); // 默认隐藏所有内层元素

});
if(device.mobile())
{
    document.writeln("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">");
    document.writeln("<link href=\'../../assets/ThinkUi/css/Tui-mobile.css\' rel=\'stylesheet\' />");
  $(function()
  {
      $(".Tcms_list").listwidth({ dtscale: 0.30, ddscale: 0.66, imgscale: 0.68, model: 1 });
  });
}
else
{
  $(function()
  {
      $(".Tcms_list").listwidth({ dtscale: 0.23, ddscale: 0.75, imgscale: 0.65, model: 0 });
    $(".blank").attr("target","_blank");
  });

}

if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
    if (/iPad|Pad/i.test(navigator.userAgent)) { $(function () { $("body").css("minWidth", "1130px") }) }

}