1

我试图了解如何使完整的背景图像响应。起初我使用的是 jQuery Anystretch。

编码。

函数.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}

索引.php

<figure class="container imgheader"> </figure>

头文件.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>

第 4 次更新：问题与 jquery-backstretch 相同。我正在为完整的背景图像和容器内的图像加载插件，但没有工作。在 Firebugs 的帮助下，我看到 js 正在页面中加载。我又看到了几个小时，我回来了。

但问题是一样的，脚本不加载。我做错了什么？

提前致谢。

4

3 回答 3

4

几件事，不需要排队 jquery，它与 WordPress 核心捆绑在一起，如果你正确设置了你的 javascript，所有文件都可以使用它。在您的 functions.php 中，确保将其包装在 add 操作调用中，如下所示：

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 正在加载到您尝试运行它们的页面上。

于 2013-05-10T00:02:56.257 回答
1

我不太确定这里发生了什么，但如果你没有得到这个工作，我可以建议使用jquery backstretch。我自己在项目中使用过几次，它总能完成工作。

于 2013-05-10T00:00:04.977 回答
1

我用不同的方式尝试了多个 jquery 插件，比如jquery.ez-bg-resize, jquery.backstretch, jquery.anystretch. 即使现在我也想不出js为什么要这样做。对于这些插件，js 正在加载，但结果是相同的。我的问题没有解决。然后我想借助 css 到媒体查询来做到这一点，通过这种方式，问题大致解决了。

imgheader { background: url("images/images.png")  50% 50% no-repeat scroll !important;
    background-position:center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
于 2013-05-10T21:59:41.523 回答