如何从CSS样式表中的content_wrapper向图像添加javascript

Question

我正在使用wordpress创建一个网站（ http://yic.am ），主题包括背景和“ subpage_content_bg”。 子页面背景是半透明的白色背景，环绕内容，使其更易于阅读。 我希望子页面背景在向下滚动时变为position:fixed而不是position:absolute ，以便当它到达页面顶部时与页面一起滚动。

当主题是图片，评论框或实际帖子或页面中的文本时，我发现了几页描述和演示该功能的页面。 但是，我似乎无法找到有关图片何时为CSS样式表的一部分的描述。

样式表的subpage-extract看起来像这样：

#sp .content_wrapper_sbl {
    width:940px;
    min-height:320px;
    margin:-107px auto 0;
    padding:45px;
    position:relative;
    z-index:20;
    background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
            }

我应该在哪里放置函数的javascript代码（我正在尝试使用以上链接中的函数）？ 我希望它适用于所有页面和帖子（封面除外）

如何使子页面图像成为功能的目标？ 是否可以将#sp或content_wrapper_sbl作为目标？

我已经尝试了很多不同的东西很多次了-但是我对Web设计和编码非常陌生。 我希望所有必要的信息都包括在内-任何帮助将不胜感激。

我正在工作的代码是这样的： http : //jsfiddle.net/EahRx/870/

Answer 1

看来您已经把它牢牢地钉在了小提琴中，不是吗？ 我想，您要如何排列Javascript文件是个人喜好。 就个人而言，我喜欢使用Google库加载我的jQuery ...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

然后加载您可能正在使用的其他任何插件...

<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>

最后，我通常会构建一个自定义jQuery文件并调用它，令人惊讶的是，“ jquery.custom.js” ...

<script src="http://www.mydomain.com/js/jquery.custom.js"></script>

因此最终的javascript包含列表如下所示...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>

这种方式首先加载jQuery库，因为可能所有其他javascript文件都依赖它。 然后加载插件，最后加载您的自定义文件，因为这可能取决于首先加载某些较早的插件-例如，您的自定义文件可能想要调整在其中一个插件中加载的幻灯片文件。

如果由于某种原因您无法编辑模板文件的头部以添加javascript include，则可以像这样将其添加到HTML的底部...

<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>

<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>

希望这可以帮助您指出正确的方向。 哦，还记得也将旧的“文档就绪” gubbins添加到jquery.custom.js文件中...

$(document).ready(function(){
    [YOUR JQUERY HERE]
});

如何从CSS样式表中的content_wrapper向图像添加javascript

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-05-31 12:39:55

如何从CSS样式表中的content_wrapper向图像添加javascript

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-05-31 12:39:55

解决方案1
0 已采纳 2013-05-31 12:39:55