我尝试了解如何才能响应完整的背景图像。 起初我使用 jQuery Anystretch。
代码。
functions.php
wp_register_script( 'jquery.anystretch', get_template_directory_uri() .'/js/jquery.anystretch.js', array( 'jquery'));
wp_enqueue_script( 'jquery.anystretch');
main.css
.imgheader { background: url("images/image.png") height:450px; width:100%; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: relative}
index.php
<figure class="container imgheader"> </figure>
header.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
jQuery(document).ready(function($)
{
(function()
{
$('.imgheader').anystretch("images/image.png");
})
});
</script>
另外,我尝试使用:
$('figure.imgheader').anystretch("images/image.png");
来自文档:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.imgheader').anystretch("images/image.png", {speed: 150});
});
</script>
第三次编辑:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('figure.imgheader').anystretch("images/image.png", {speed: 150});
});
</script>
第四次更新: 问题与 jquery-backstretch 相同。我正在加载完整背景图像和容器内图像的插件,但不起作用。在 Firebugs 的帮助下,我看到 js 正在页面中加载。我又看了几个小时,然后我回来了。
但问题是一样的,脚本无法加载。我做错了什么?
提前致谢。
最佳答案
有几件事,不需要将 jquery 排入队列,它与 WordPress 核心捆绑在一起,如果正确设置 JavaScript,所有文件都将可用它。在您的functions.php中,确保将其包装在添加操作调用中,如下所示:
add_action('wp_enqueue_scripts','my_scripts_function');
function my_scripts_function() {
wp_register_script( 'jquery.anystretch.js', get_template_directory_uri() .'/js/jquery.anystretch.js'); // you don't need the third parameter here
wp_enqueue_script( 'jquery.anystretch.js');
}
理想情况下,您只需将自己的另一个 javascript 文件放入队列,而不是放入 header.php,但有时这样做会起作用。您的问题是附加的 function() 包装,我认为没有任何必要。
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.imgheader').anystretch("images/image.png");
});
</script>
如果这不起作用,请确认 jquery 和 anystretch 正在您尝试运行它们的页面上加载。
关于jquery - 完整响应式背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16472995/