小编Car*_*Mar的帖子

使用带有imagesloaded的砌体

我是一名新手,并希望这些问题看起来并不太愚蠢.

我正在为我的网站使用砌体 - 工作正常.我希望在砖石加工完成后让箱子出现.在互联网上搜索我发现有几篇帖子建议使用imagesloaded插件来解决这个问题.它只是没有改变任何东西.这意味着:我的布局和内容框一直搞乱,直到砌体完成加载,然后盒子突然跳到正确的位置.

我的代码:

$(document).ready(function() {

    var $container = $('#post-area');
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector : '.box',
            columnwidth: 300,
            gutter: 20,
            isFitWidth: true,
            isAnimated: !Modernizr.csstransitions
        });    
    });
});
Run Code Online (Sandbox Code Playgroud)

我也得到这个firebug错误:

TypeError: EventEmitter is not a constructor
ImagesLoaded.prototype = new EventEmitter();
Run Code Online (Sandbox Code Playgroud)

我正在我网站的末尾加载像这样的imagesloaded(如果imagesloaded已经包含在砌体中,我找不到任何信息,有些人写道它不再包括在内 - 令人困惑):

<script src="http://www.domainname.com/js/imagesloaded.js"></script>
Run Code Online (Sandbox Code Playgroud)

如果有人可以帮助我,我会很高兴.并告诉我,如果imagesloaded甚至是解决此问题的正确插件!

javascript css3 jquery-masonry

10
推荐指数
2
解决办法
2万
查看次数

Wordpress:将 php 数组放入 JS-Function

我想使用一个 PHP 数组,我在 WP-Loop 中检索到一个 javascript 函数,我在一个单独的 js 文件中。

这就是我在循环中回显我的 php 数组(来自高级自定义字段)的方式:

$images = get_field('galerie');
if( $images ): ?>
    <?php 
    $i = 0;
    foreach( $images as $image ): 
        $i++;
        ?>
        <div class="slider">
             <?php echo $image['url']; ?>');">
        </div>
    <?php endforeach; ?>
<?php endif; ?>
Run Code Online (Sandbox Code Playgroud)

在最终代码中,这将如下所示:

<div class="slider">   
   THERE_GOES_THE_IMG_URL_1 
   THERE_GOES_THE_IMG_URL_2 
   THERE_GOES_THE_IMG_URL_3
</div>
Run Code Online (Sandbox Code Playgroud)

但我需要在我的 Vegas Slider JQuery 插件中使用图像 URL。代码位于单独的 custom.js 文件中,如下所示:

$(".slider").vegas({
      slides: [
          { src: "THERE_GOES_THE_IMG_URL_1" },
          { src: "THERE_GOES_THE_IMG_URL_2" },
          { src: "THERE_GOES_THE_IMG_URL_3" }
      ]
  });
Run Code Online (Sandbox Code Playgroud)

如何将图像 URL 从 php 循环传递到 …

php arrays variables wordpress jquery

4
推荐指数
1
解决办法
1145
查看次数

动画虚线 SVG 线

我想为 SVG 文件中的虚线设置动画。该行应该“增长”从 0 长度到全长。我找到的所有方法都不适合我。

有没有人有想法,如何解决这个问题?

这是我的 svg 文件中的路径:

<path class="path" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M234.3,119
    c-31-0.7-95,9-128.7,50.8"/>
Run Code Online (Sandbox Code Playgroud)

要将线条动画为直线,我做了:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
Run Code Online (Sandbox Code Playgroud)

当然,当我想要虚线时,这不起作用。有没有人知道如何解决这个问题?

那是我的代码笔:http ://codepen.io/anon/pen/WpZNJY

PS:我不能使用两条相互重叠的路径来隐藏下面的路径,因为我有一个彩色背景。

css animation svg line

2
推荐指数
1
解决办法
6221
查看次数

标签 统计

animation ×1

arrays ×1

css ×1

css3 ×1

javascript ×1

jquery ×1

jquery-masonry ×1

line ×1

php ×1

svg ×1

variables ×1

wordpress ×1