Wagerfield 的示例看起来与源代码不同答案

【问题标题】：Wagerfield's example looks different from sourceWagerfield 的示例看起来与源代码不同
【发布时间】：2014-09-19 16:26:55
【问题描述】：

设置 parallax.js 我遇到了这个问题：

html 源代码标记（在official GIThub project 中）是：

    <ul id="scene" class="scene">
        <li class="layer" data-depth="1.00"><img src="images/layer1.png"></li>
        <li class="layer" data-depth="0.80"><img src="images/layer2.png"></li>
        <li class="layer" data-depth="0.60"><img src="images/layer3.png"></li>
        <li class="layer" data-depth="0.40"><img src="images/layer4.png"></li>
        <li class="layer" data-depth="0.20"><img src="images/layer5.png"></li>
        <li class="layer" data-depth="0.00"><img src="images/layer6.png"></li>
        </ul>

但是如果我们看一下（非常棒的）Wagerfield example，看起来图像是作为每个 .layer 类元素内的 div 块的背景图像引入的。

我能给自己的解释是这样可以更灵活地控制图像，

我刚开始使用 JS，所以我真的找不到解决方法：但是脚本不能改变这个

    <img src="images/layer1.png">

变成类似：

    <div class="layer1" style="background:url(images/layer1.png) no-repeat 50% 100%"></div>

这很容易实现吗？

扩展问题，使用通过脚本传递的内联样式完全设置 .layer 的样式会很酷。

到目前为止的脚本：

     jQuery("li.layer > img").replaceWith
    ("<div class=\"" + $((("li.layer > img").src).replace(/\.[^/.]+$/, "")) + "\"</div>" );

这部分不起作用（我正在寻找图像的 url 输出..）：

    (("li.layer > img").src).replace(/\.[^/.]+$/, "")

【问题讨论】：

到目前为止，您自己尝试过吗？你可以在这里发布代码吗？我推荐使用api.jquery.com/replacewith
我无法获得 img url 的输出； jQuery("li.layer > img").replaceWith("li.layer > img").attr("src"); 使用此代码，我将每个图像都替换为 li.layer > img; 而不是其中的 url....

标签： javascript jquery regex parallax parallax.js

【解决方案1】：

这样的事情应该可以解决问题。

$('#scene > .layer > img').replaceWith(function () { // select all images
    var s = this.src.substring(this.src.indexOf('images'), this.src.length);
    // get only the relative path of the url
    
  
    return $('<div/>', { // create a div
        class: s.replace(/\.[a-zA-Z]+/, '').split('/')[1], 
               // get the image name as class
        style: 'background:url(' + s + ') no-repeat 50% 100%' 
               // set style
    });
});

$('div').text(function(){
	return this.outerHTML;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="scene" class="scene">
    <li class="layer" data-depth="1.00">
        <img src="images/layer1.png">
    </li>
    <li class="layer" data-depth="0.80">
        <img src="images/layer2.png">
    </li>
    <li class="layer" data-depth="0.60">
        <img src="images/layer3.png">
    </li>
    <li class="layer" data-depth="0.40">
        <img src="images/layer4.png">
    </li>
    <li class="layer" data-depth="0.20">
        <img src="images/layer5.png">
    </li>
    <li class="layer" data-depth="0.00">
        <img src="images/layer6.png">
    </li>
</ul>

【讨论】：