Question

我有一个div，其属性我想动态更改。因此，我使用的是jquery.keyframes（插件）。

第二类具有来自 croploads 目录的低分辨率模糊背景图像。现在，我想使用 croploads2 目录中的关键帧将图像更改为高分辨率版本。

代码如下所示：

<div class="second" style="width:600px; height:auto; background-image:url(croploads/<?php echo $row['file']; ?>); background-repeat:no-repeat;">
<img src="croploads2/<?php echo $row['file']; ?>" style="max-width:100%; visibility:hidden;">
</div>

<script>
$(window).load(function() {
                $.keyframe.define([{

    #preloading the high-res image from croploads2

                      name: 'preload',
                      '0%': {background:'url(croploads2/<?php echo $row['file']; ?>)'}  
                    }, {
                      name: 'sharpen',
                      '0%': {background:'url(croploads/<?php echo $row['file']; ?>)', filter: 'blur(100px)'},
                     '80%': {background:'url(croploads/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(80px)', opacity: '1'},
                    '100%': {background:'url(croploads2/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(0px)', opacity: '1'}
                    }]);
                  });
</script>

我如何使用php或javascript变量来完成此任务？

Answer 1

我没有发现你的代码有太多错误。但是，只要您的PHP文件与放置JS的文件相同;你可以尝试这样的事情：

(function($) {
    /** jQuery Document Ready */
    $(document).ready(function(){
     $.keyframe.define([{
        //preloading the high-res image from croploads2
                  name: 'preload',
                  '0%': {background:'url(croploads2/<?php echo $row['file']; ?>)'}  
                }, {
                  name: 'sharpen',
                  '0%': {background:'url(croploads/<?php echo $row['file']; ?>)', filter: 'blur(100px)'},
                 '80%': {background:'url(croploads/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(80px)', opacity: '1'},
                '100%': {background:'url(croploads2/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(0px)', opacity: '1'}
                }]);
              });
    });
})(jQuery);

顺便说一下;确保$ row [＆＃39; file＆＃39;]存在于指定位置。文件指针＆＃34; croploads / jpeg.jpg＆＃34;看起来更像是一个相对的URL。你能访问这样的相对URL吗？如果没有，为什么不尝试完全限定的资源地址，如＆＃34; http://example.com/croploads/jpeg.jpg＆＃34; 我认为这可以解决问题。

当然PHP不会在javascript下触发。但我有什么替代方案？

1 个答案: