Javascript Slide widget

想把一个边栏上的幻灯片用javascript来创建,不想用HTML来实现,助于这样做可以减少几个文件请求,至少是不点击后。这个不错,又留作笔记了。

javascript 核心部分

<code>
/* Minty */
function insertSmiley(e) {
    e = " " + e + " "
    var t = document.getElementById("comment") if (t) if (document.selection) t.focus(),
    rng = document.selection.createRange(),
    rng.text = e,
    t.focus()
    else if (isNaN(t.selectionStart)) t.value += e,
    t.focus()
    else {
        var n = t.selectionStart,
        s = t.selectionEnd t.value = t.value.substring(0, n) + e + t.value.substring(s),
        t.focus(),
        t.selectionStart = t.selectionEnd = n + e.length
    }
}
$(function() {
    function e(e) {
        var t = $("a", p) g = isNaN(e) ? v - 1 > g ? g + 1 : 0 : e,
        t.clone().addClass("temp").appendTo(p).fadeOut(function() {
            $(this).remove()
        }),
        t.attr("href", slideList[g].link).attr("title", slideList[g].title).html('<img decoding="async" src="' + slideList[g].image + '" alt="' + slideList[g].title + '">')
    }
    function t() {
        j > 0 ? (z.val("发表成功(" + j--+")"), setTimeout(t, 1e3)) : (z.val("发表评论").prop("disabled", !1), j = 15)
    }
    function n(e) {
        e && (D = e, o.stop().animate({
            scrollTop: D.offset().top - 85
        },
        500))
    }
    var s = $("html"),
    a = $(window),
    i = $(document),
    o = $("html, body"),
    l = $("#s"),
    r = $("#rocket"),
    c = s.hasClass("lt-ie7"),
    d = s.hasClass("lt-ie8") if ($("#m-btns .search").click(function() {
        $("body").toggleClass("m-search"),
        l.focus()
    }), c && $(".menu-item-has-children").mouseenter(function() {
        $(this).find(".sub-menu").show()
    }).mouseleave(function() {
        $(this).find(".sub-menu").hide()
    }), d && l.focus(function() {
        l.addClass("focus")
    }).blur(function() {
        l.removeClass("focus")
    }), !(c || window.matchMedia && window.matchMedia("(max-width: 540px)").matches)) {
        var u = $("#sidebar"),
        m = u.height() + u.offset().top,
        f = $("#newsletter") a.scroll(function() {
            a.scrollTop() > Math.max(400, a.height()) ? r.addClass("show") : r.removeClass("show"),
            a.scrollTop() > m ? f.addClass("sticky") : f.removeClass("sticky")
        }).resize(function() {
            f.css("left", u.offset().left)
        }).resize()
    }
    if (r.click(function() {
        return r.addClass("launch"),
        o.animate({
            scrollTop: 0
        },
        600,
        function() {
            r.removeClass("show launch")
        }),
        !1
    }), "undefined" != typeof slideList && slideList.length) {
        var h, p = $("#slides"),
        v = slideList.length,
        g = 0
        if (p.html('<a href="' + slideList[0].link + '" title="' + slideList[0].title + '"><img decoding="async" loading="lazy" src="' + slideList[0].image + '" alt="' + slideList[0].title + '" width="220" height="110"></a>'), v > 2) {
            var y = $("<span class='prev'>‹</span>"),
            k = $("<span class='next'>›</span>") y.click(function() {
                e(0 == g ? v - 1 : g - 1)
            }),
            k.click(function() {
                e()
            }),
            p.append(y).append(k).hover(function() {
                clearInterval(h)
            },
            function() {
                h = setInterval(e, 7e3)
            }),
            h = setInterval(e, 7e3)
        }
    }
    var w = $("#main"),
    C = 0 w.on("click", ".loadmore",
    function(e, t) {
        if (C) return ! 1
        var s = $(this).attr("title", "正在加载…").addClass("loading") C = 1
        var a = s.attr("href") return $.get(a,
        function(e) {
            s.parent().remove() var i = $(e),
            o = i.find(".hentry").addClass("fadein") w.append(o).append(i.find(".navigation")),
            t && n(o.eq(0)) var l = i.filter("title").text() window.history && history.pushState && history.pushState(null, l, a),
            document.title = l,
            C = 0
        }),
        !1
    }) var b = $("#comments") b.on("click", ".loadmore",
    function() {
        var e = $(this) return e.hasClass("loading") ? !1 : (e.attr("title", "正在加载…").addClass("loading"), $.get(e.attr("href"),
        function(t) {
            e.parent().remove(),
            b.append($(t).find(".commentlist").addClass("fadein").find("img.lazy").lazyload({
                effect: "fadeIn"
            }).end()).append($(t).find(".navigation"))
        }), !1)
    }) var x = $("#commentform"),
    T = $("#comment"),
    I = $("#comments-title"),
    L = $("#comment-settings"),
    N = $(".comment-settings-toggle"),
    S = $("span", N),
    q = $("#author"),
    z = $("#submit") N.click(function() {
        L.hasClass("show") || (L.addClass("show"), $(this).removeClass("required"), q.focus(), setTimeout(function() {
            i.on("click.comment",
            function(e) {
                L.find(e.target).length || e.target == L[0] || (L.removeClass("show"), i.off("click.comment"))
            })
        },
        100))
    }),
    q.on("change input",
    function() {
        S.text($(this).val())
    }),
    T.keydown(function(e) {
        if (e.ctrlKey && 13 == e.keyCode) x.trigger("submit")
        else if (9 == e.keyCode) return N.click(),
        !1
    }),
    $(".comments-link").click(T.focus),
    $("#respond input").add(T).on("invalid",
    function() {
        $(this).one("input change",
        function() {
            $(this).parent().removeClass("invalid")
        }).parent().addClass("invalid"),
        $(this)[0] != T[0] && N.click()
    }),
    $(".commentlist").eq(0).children().length < 10 && $("#comments .loadmore").length && $("#comments .loadmore").trigger("click") var E, _, j = 15 x.submit(function() {
        return $.ajax({
            type: $(this).attr("method"),
            url: MINTY.ajaxurl,
            data: $(this).serialize() + "&action=minty_ajax_comment",
            beforeSend: function() {
                _ = $("#comment_parent").val(),
                z.val("正在提交.").prop("disabled", !0),
                T.prop("disabled", !0),
                E = window.setInterval(function() {
                    "正在提交..." == z.val() ? z.val("正在提交.") : z.val(z.val() + ".")
                },
                700)
            },
            success: function(e) {
                window.clearInterval(E),
                /<\/li>/.test(e) ? ($(".commentlist").length > 0 ? ("0" == _ ? $("<div style='display:none'>" + e + "</div>").prependTo($(".commentlist").eq(0)).fadeIn() : $("<ol class='children' style='display:none'>" + e + "</ol>").insertAfter($("#comment-" + _)).fadeIn(), I.text(parseInt(I.text().match(/\d/g).join("")) + 1 + " 条评论")) : ($(".no-comments").replaceWith($("<ol class='commentlist' style='display:none'>" + e + "</ol>").fadeIn()), I.text("1 条评论")), T.prop("disabled", !1).val(""), t()) : (alert($("<div>" + e + "</div>").text()), z.prop("disabled", !1).val("发表评论"), T.prop("disabled", !1))
            }
        }),
        !1
    }) var D $(document).keypress(function(e) {
        var t = e.target.tagName
        if ("TEXTAREA" != t && "INPUT" != t) switch (e.which) {
        case 106:
            var s = $(".previous-post a")[0]
            if (s) location.href = s.href
            else {
                if (C) return if (D) {
                    var a = D.next() a.hasClass("ga") && (a = a.next()),
                    a.hasClass("hentry") ? n(a) : $(".loadmore").length && ($(".loadmore").trigger("click", 1), o.animate({
                        scrollTop: i.height()
                    },
                    500))
                } else n($(".hentry").eq(1))
            }
            e.preventDefault() break
        case 107:
            var l = $(".next-post a")[0]
            if (l) location.href = l.href
            else {
                if (C) return if (D) {
                    var r = D.prev() r.hasClass("ga") && (r = r.prev()),
                    r.hasClass("hentry") && n(r)
                } else n($(".hentry").eq(1))
            }
            e.preventDefault() break
        case 114:
            $("#comment").focus(),
            e.preventDefault() break
        case 47:
            $("#s").focus(),
            e.preventDefault()
        }
    }),
    $(".widget-title span").each(function() {
        var e = $(this) e.attr("title", e.text())
    }),
    location.hash.indexOf("#comment-") > -1 && window.setTimeout(function() {
        i.scrollTop(i.scrollTop() - 74)
    },
    10),
    $("[data-track]").click(function() {
        var e = $(this).data("track").split("|") _hmt.push(["_trackEvent", e[0], e[1]])
    }),
    $("img.lazy").lazyload({
        effect: "fadeIn"
    })
}),
"ontouchstart" in window ? (document.documentElement.className += "touch", $(".menu-item-has-children").attr("aria-haspopup", !0).children("a").on(window.PointerEvent ? "pointerup": navigator.msPointerEnabled ? "MSPointerUp": "touchend", (function() {
    return $(this).next().toggle(),
    !1
}))) : (NProgress.configure({
    showSpinner: !1
}), NProgress.start(), document.onreadystatechange = function() {
    "complete" == document.readyState && setTimeout(NProgress.done, 500)
})
</code>

代码太复杂了,抽空慢慢提取,至于那个 e 是什么玩意,我还真没看出来,干扰的元素太多了~~~

下面的代码就是 要在什么地方显示的,也就是包含内容的 javascript 和html 混合的 代码了,悲剧啊~~好辛苦….

<code>

<aside id="text-283011632" class="widget widget_text clearfix">
<h3 class="widget-title"><span>原创推荐</span></h3>
<div class="textwidget">
<div id="slides">
<script>
var slideList = [{
    image: "http://bcs.duapp.com/picstore/NlmAeTXopl.png",
    title: "前往了解 WordPress 主题 ZiPE",
    link: "http://c7sky.com/wordpress-theme-zipe.html"
}, {
    image: "http://bcs.duapp.com/picstore/tELSJWjcwC.jpg",
    title: "立即获取 Chrome Speed Dial 2 中文版",
    link: "http://c7sky.com/chrome-speeddial2-cn.html"
}, {
    image: "http://bcs.duapp.com/picstore/Ec2c2N1gYP.jpg",
    title: "立即获取 SEO 必备 Chrome 扩展 Flager",
    link: "http://c7sky.com/flager.html"
}, {
    image: "http://bcs.duapp.com/picstore/J5ayPhtN0m.jpg",
    title: "立即获取 Chrome 代码高亮扩展",
    link: "http://c7sky.com/javascript-and-css-code-beautifier.html"
}];
</script>
</div>
</div>
</aside>
</code>

其实这个代码是来自 http://c7sky.com/brand-new-blog-for-2013.html 呵呵.
抽空再来提取吧。其实这个挺好的,内容放在主题的后台配置中,嗯,不错~~

0 thoughts on “Javascript Slide widget
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。