标签:sel node height void 分页 fine 效果 log jquery
这几个效果函数是看到别人写的,挺好的,复制下来学习备用!
函数封装:
//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") }) } }
标签:sel node height void 分页 fine 效果 log jquery
原文地址:http://www.cnblogs.com/LChenglong/p/7498861.html