这几个效果函数是看到别人写的,挺好的,复制下来学习备用!
函数封装:
//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") }) }}js构建函数优秀案例
原文地址:http://www.cnblogs.com/LChenglong/p/7498861.html