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

函数封装：

//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构建函数优秀案例的更多相关文章

  1. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  2. js(=>) 箭头函数 详细解说 案例大全

    ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: fu ...

  3. js引出函数概念的案例

    js引出函数概念的案例   1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  4. 使用 Vuex + Vue.js 构建单页应用

    鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...

  5. JS回调函数的使用和作用

    <html> <head> <title>回调函数(callback)</title> <script language="javasc ...

  6. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  7. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  8. 【node.js】函数、路由

    Node.js中函数的使用与Javascript类似,一个函数可以作为另一个函数的参数.我们可以先定义一个函数,然后传递,也可以在传递参数的地方直接定义函数. function say(word) { ...

  9. 超全面的JavaWeb笔记day03<JS对象&函数>

    1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...

随机推荐

  1. 51Nod 1284 2 3 5 7的倍数 容斥原理

    1284 2 3 5 7的倍数基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 例如N = 1 ...

  2. 守护进程VS守护线程

    守护(daemon)进程 引入: join()方法可以使一个进程运行完之后再执行下一个进程,而daemon()方法就是主进程的代码执行完毕之后,不需要等待子进程,立即终止子进程. join()方法和d ...

  3. oracle概念

    .DDL 数据定义语言 create alter drop truncate .DML 数据操作语言 insert delete update select .TCL 事务控制语言 commit ro ...

  4. NOIP2016提高组初赛(1)

    一.选择题 6.后缀表达式,使用二叉树来求解,正常情况下的表达式a*(b+c)- d为中序遍历的二叉树. 即 若转换为后缀表达式(左右根)则为abc+*d- 14.代数字进去,多试几遍: 三.问题求解 ...

  5. spring aop 动态代理批量调用方法实例

    今天项目经理发下任务,需要测试 20 个接口,看看推送和接收数据是否正常.因为对接传输的数据是 xml 格式的字符串,所以我拿现成的数据,先生成推送过去的数据并存储到文本,以便验证数据是否正确,这时候 ...

  6. Java进阶（七）正确理解Thread Local的原理与适用场景

    原创文章,始自发作者个人博客,转载请务必将下面这段话置于文章开头处(保留超链接). 本文转发自技术世界,原文链接 http://www.jasongj.com/java/threadlocal/ Th ...

  7. Java-----关于eclipse导入项目发生的问题及解决办法

    今天通过eclipse导入了几个项目,项目名出现红叉,对于我这样的强迫症来说是无法容忍的,故现做总结,遇到同学可按照以下方法来操作. 改动的地方主要是两个方面: 1.Tomcat版本问题. 此问题是由 ...

  8. 【剑指Offer学习】【面试题21：包括min 函数的栈】

    题目: 定义栈的数据结构,请在该类型中实现一个可以得到栈的最小素的min 函数.在该栈中.调用min.push 及pop的时间复杂度都是0(1) 解题思路: 把每次的最小元素(之前的最小元素和新压入战 ...

  9. It appears that the Web Project，“”，has no Web Root directory setup

    1 错误描写叙述 2 错误原因 因为项目是用eclipse新建的,web的根文件夹文件夹是WebContent.而MyEclipse新建的项目的Web根文件夹是WebRoot.直接将eclipse项目 ...

  10. Android之使用MediaMetadataRetriever类获取媒体信息

    一.昨天.介绍了使用MediaMetadataRetriever类来获取视频第一帧:http://blog.csdn.net/u012561176/article/details/47858099,今 ...