如何使用jquery/javascript以这种视频风格向下滚动到内容框

How to scroll down to content box in this video style with jquery/javascript?

本文关键字:滚动 风格 视频 jquery 何使用 javascript      更新时间:2023-09-26

我有一个带有视频样式的页面-http://picovico.com/video-styles/在我的WordPress中。一切都很好,只是我想在点击缩略图时向下滚动到内容。现在内容框正在打开,但窗口没有向下滚动到它。实际上,我正在使用一个名为expandgrid的插件。我没有得到插件作者的支持。

我正在使用以下代码:

$(".cq-expandgrid-item").click(function() {
    $('html, body').animate({
        scrollTop: $(".cq-expandgrid-content").offset().top
    }, 5000);
});

谢谢。

@TTCC这是插件文件中的init.min.js。代码如下所示。在你的帮助下,我希望我能找到并添加你现在建议的代码:

jQuery(document).ready(function(a) {
a(".cq-expandgrid").each(function(b, c) {
    function r() {
        o = setInterval(function() {
            clearInterval(o), k++, k > m && (k = 0), a(".cq-expandgrid-toggle", p).eq(k).trigger("click"), r()
        }, 1e3 * j)
    }
    var d = a(this),
        e = a(this).data("itemsize"),
        f = "yes" == a(this).data("transparentitem") ? !0 : !1,
        g = a(this).data("labelfontsize"),
        h = a(this).data("subfontsize"),
        i = parseInt(a(this).data("itemheight"), 10),
        j = parseInt(a(this).data("autoslide"), 10),
        k = 0,
        m = a(".cq-expandgrid-item", d).length,
        n = "yes" == a(this).data("openfirst") ? !1 : !0,
        o = 0,
        p = a(".cq-expandgrid-item", d).each(function(b) {
            a(this).data("index", b);
            var c = a(this).data("image"),
                d = a(this).data("avatar"),
                f = a(this).data("backgroundcolor"),
                j = a(this).data("iconcolor"),
                k = a(this).data("iconsize"),
                l = a(this).data("contentcolor"),
                m = a(this).data("labelcolor"),
                n = a(this).data("subtitlecolor"),
                o = a(this).data("bgstyle"),
                p = a(this).data("avatartype"),
                q = a(this),
                r = a(this).attr("title");
            if (r && "" !== r) var r = a(".cq-expandgrid-face", q).tooltipster({
                content: r,
                position: "top",
                delay: 200,
                interactive: !0,
                speed: 300,
                touchDevices: !0,
                animation: "grow",
                theme: "tooltipster-shadow",
                contentAsHTML: !0
            });
            "" != l && a(".cq-expandgrid-text, .cq-expandgrid-text p, .cq-expandgrid-text h2, .cq-expandgrid-text h3, .cq-expandgrid-text h4, .cq-expandgrid-text h5, .cq-expandgrid-text h6", q).css("color", l), "" != m && a(".cq-expandgrid-title", q).css("color", m), "" != n && a(".cq-expandgrid-subtitle", q).css("color", n), "" != g && a(".cq-expandgrid-title", q).css("font-size", g), "" != h && a(".cq-expandgrid-subtitle", q).css("font-size", h), i > 0 && "customized" == e && a(".cq-expandgrid-face", q).css("height", i), "" != f && "customized" == o && a(".cq-expandgrid-face", q).css("background-color", f), "" != j && a(".cq-expandgrid-icon", q).css("color", j), "" != k && a(".cq-expandgrid-icon", q).css("font-size", k), "" != c && "undefined" != c && c && a(".cq-expandgrid-face", q).css({
                "background-image": "url(" + c + ")"
            }), "image" == p && "" != d && "undefined" != d && d && a(".cq-expandgrid-avatar", q).css({
                "background-image": "url(" + d + ")"
            })
        }),
        q = null;
    d.on("mouseover", function(a) {
        clearInterval(o)
    }).on("mouseleave", function(a) {
        j > 0 && r()
    }), a(".cq-expandgrid-toggle", p).click(function() {
        var b = a(this).closest(".cq-expandgrid-item");
        b.data("backgroundcolor");
        if (k = b.data("index"), clearInterval(o), q && !b.is(q)) {
            q.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.removeClass("outfoucs");
            var d = a("iframe", q).attr("src");
            d && "" != d && (d.indexOf("youtube") > -1 || d.indexOf("vimeo") > -1) && (a("iframe", q).attr("src", ""), a("iframe", q).attr("src", d))
        }
        b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs"))
    }), (n || j > 0) && a(".cq-expandgrid-toggle", p).eq(0).trigger("click"), j > 0 && r(), p.find(".cq-expandgrid-close").click(function() {
        var b = a(this).closest(".cq-expandgrid-item");
        b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), p.not(b).removeClass("outfoucs")
    })
})

});

@TTCC,这是我根据你的建议实现的代码:

b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs")), b.hasClass("cq-expandgrid-initstate") && a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 50 }, 500);
    })

您的javascript代码在页面中有两个脚本标记,此错误导致代码无法运行。

实际上,您不需要单独编写一段代码,只需将其移动到vc扩展expandgrid/js/init.min.js文件中的"cq-expandgridtoggle"点击事件即可。

您可以使用jQuery.animate()和scrollTop属性来实现它。

用下面的代码替换init.min.js文件中从第63行到第65行(在"}"之前)的代码:

b.hasClass("cq-expandgrid-initstate") ? (a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 0}, 200),q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs"))
                    : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs"));

"500"是一个以毫秒为单位决定动画运行时间的数字,您可以根据自己的意愿进行更改。

并删除/wp-content/plugins/vc-extensions expandgrid/css/style.css文件中.cq expandgrid内容的转换样式(关于第378行)。

transition: all 0.2s ease-in-out;

这是一把小提琴。

这样尝试:

$(".cq-expandgrid-item").click(function() {
    var $this = $(this);
    $('html, body').animate({
        scrollTop: $this.find(".cq-expandgrid-content").offset().top
    }, 5000);
});

PD:使用$(".cq expandgrid content").offset(