Wagerfield выглядит отличается от источника

Question

Настройки 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 похоже, что изображения вводятся как фоновое изображение блока div внутри каждого элемента класса .layer.

объяснение я могу дать себе, что в этом случае изображение можно управлять более гибко,

---

Я только начиная с 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(/\.[^/.]+$/, "") 

Answer 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(){ 
 
\t 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>