如何从CSS样式表中的content_wrapper向图像添加javascript
[英]How to add javascript to an image from the content_wrapper in the css stylesheet
问题描述
I am creating a website ( http://yic.am ) using wordpress and the theme includes a background and a "subpage_content_bg". 
我正在使用wordpress创建一个网站（ http://yic.am ），主题包括背景和“ subpage_content_bg”。 The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. 子页面背景是半透明的白色背景，环绕内容，使其更易于阅读。 I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page. 我希望子页面背景在向下滚动时变为position:fixed而不是position:absolute ，以便当它到达页面顶部时与页面一起滚动。
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. 当主题是图片，评论框或实际帖子或页面中的文本时，我发现了几页描述和演示该功能的页面。 However, I cannot seem to find a description for when the picture is a part of the css stylesheet. 但是，我似乎无法找到有关图片何时为CSS样式表的一部分的描述。
The subpage-extract from the stylesheet looks like this: 样式表的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;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? 我应该在哪里放置函数的javascript代码（我正在尝试使用以上链接中的函数）？ I would like it to be for all pages and posts (except the cover-page) 我希望它适用于所有页面和帖子（封面除外）
How do I make the subpage image the target of the function? 如何使子页面图像成为功能的目标？ Is it possible to make the #sp or content_wrapper_sbl the target? 是否可以将#sp或content_wrapper_sbl作为目标？
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. 我已经尝试了很多不同的东西很多次了-但是我对Web设计和编码非常陌生。 I hope all the necessary information is included - any help would be much appreciated. 我希望所有必要的信息都包括在内-任何帮助将不胜感激。
The code I am working is this: http://jsfiddle.net/EahRx/870/ 我正在工作的代码是这样的： http : //jsfiddle.net/EahRx/870/
1 个解决方案
解决方案1
0 已采纳 2013-05-31 12:39:55
It looks like you've pretty much got it nailed in that fiddle, haven't you? 看来您已经把它牢牢地钉在了小提琴中，不是吗？ It's personal preference how you want to arrange your javascript files, I guess. 我想，您要如何排列Javascript文件是个人喜好。 Personally, I like to use the Google library to load my jQuery... 就个人而言，我喜欢使用Google库加载我的jQuery ...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using... 然后加载您可能正在使用的其他任何插件...
<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>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"... 最后，我通常会构建一个自定义jQuery文件并调用它，令人惊讶的是，“ jquery.custom.js” ...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this... 因此最终的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>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. 这种方式首先加载jQuery库，因为可能所有其他javascript文件都依赖它。 Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins. 然后加载插件，最后加载您的自定义文件，因为这可能取决于首先加载某些较早的插件-例如，您的自定义文件可能想要调整在其中一个插件中加载的幻灯片文件。
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this... 如果由于某种原因您无法编辑模板文件的头部以添加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>
Hope this helps point you in the right direction. 希望这可以帮助您指出正确的方向。 Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too... 哦，还记得也将旧的“文档就绪” gubbins添加到jquery.custom.js文件中...
$(document).ready(function(){
[YOUR JQUERY HERE]
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.