如何使用jquery/javascript以这种视频风格向下滚动到内容框
How to scroll down to content box in this video style with jquery/javascript?
我有一个带有视频样式的页面-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(
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- 最好的技术自上而下RPG风格的网格滚动
- 这种无缝的字幕风格使每个滚动都有点抖动
- Jquery地铁风格的自定义滚动条
- 重新创建 3 列 facebook 风格的部分滚动,然后固定位置 CSS
- 桌面触摸屏iPhone风格的滚动IE与jquery
- ios风格的HTML/JS滚动
- jQuery Facebook/ tumblr风格的无限滚动条
- 如何在画布上进行谷歌地图风格的滚动
- Twitter风格的滚动加载一个flask stream_with_context页面
- iphone风格的滚动条在web应用程序与自动淡出
- 如何使用jquery/javascript以这种视频风格向下滚动到内容框