jquery - 结合 jquery 图像切换和滚动字幕脚本

标签 jquery css rollover caption

我正在尝试将 (1) 一个图像切换菜单(滚动到菜单上的一个元素,让图像显示在页面的其他地方)与 (2) 一个标题滚动(滚动到图像上,有标题展开以显示更长的文本)。

滚动字幕是可爱的 jCapSlide 脚本,下面是它的工作示例:

http://steph-morris.com/jCapSlide.html

(来自 http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/ 的原始插件)

这是图像切换菜单完全无法显示字幕的示例,无论是否处于滚动状态:

http://steph-morris.com/novel_test.html

如果我将其从“ic_container”DIV 中删除并将其移动到“overlay”DIV 中,则此拼凑的早期版本设法显示标题。可悲的是,我不能再复制它了。这就是我喜欢破解其他人的脚本的原因,我对它的修改越多,我就越能最终破解它!

将不胜感激任何指导,从指导到“将两个脚本拼凑在一起 101”指南,再到实现此功能的便捷解决方案。

最佳答案

您的 javascript 基本上没问题,实际上问题出在您的 css 上。我去掉了一些样式,现在第一个样式可以正常工作。您将不得不稍微调整一下样式,以按照您想要的方式获得它。至于第二个没有显示问题的是,由于某种原因,当 showcaption 选项设置为 true 时,javascript 出现问题。让它工作的解决方法是手动设置 'ic_caption' div 以具有 style="display:block;"。我不明白为什么它不起作用,但现在这样做可以让它在开头显示标题。

我在这里设置了一个工作示例:http://jsfiddle.net/dbMGg/1/

关于jquery - 结合 jquery 图像切换和滚动字幕脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7237010/

相关文章:

javascript - bootstrap - bootstrap 仅在调整大小后工作

javascript - 根据值添加外部 css

jquery - 最简单的翻转/悬停技术

javascript - 这是怎么做到的? (JavaScript 还是其他?)

javascript - 如何动态地用文本输入替换物化选择?

javascript - jQuery 鼠标悬停事件不起作用吗?

javascript - 在我的案例中使用带有变量的 jquery 选择器失败

jquery - 在滚动更改下拉菜单放置位置

css - gwt-css-背景图像文本