Wagerfield'的例子看起来和来源不一样
Wagerfield's example looks different from source
在设置parallax.js时,我遇到了以下问题:
html源标记(在官方的GIThub项目中)是:
<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示例,它看起来像是作为每个.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(/'.[^/.]+$/, "")
这样的东西应该能起到作用。
$('#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>
相关文章:
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- 看起来第一个console.log是'It’不太对
- 如何使用CSS或JQuery使整个网页看起来更小(就像Chrome的缩小功能一样)
- 是否可以使用 DIV 而不是 iFrame,以便内容看起来像在同一页面中
- 我让一个图像看起来像一个可点击的按钮,但现在当我点击它时,它不会起到超链接的作用
- 钛-圆形表视图看起来不像代码
- .stop()会破坏渐变元,而黄色框不会'看起来不太合适
- 删除/隐藏 javascript 中的选择选项而不会使其看起来很尴尬(需要延迟 select 元素的本机 onclick
- 我的网站在不同的分辨率下看起来不正确
- setInterval上的计时;看起来不准确
- Wagerfield'的例子看起来和来源不一样
- JQuery幻灯片看起来不太流畅
- 看起来不像链接的链接
- AJAX调用使用IIFE?看起来不能像普通函数那样使用.done
- AngularJS json多维数组看起来不像它应该的样子
- jQuery拖放示例:有序列表在目的地看起来不像有序列表
- 我怎样才能更好地编写代码,使我的代码看起来不那么业余呢?
- Javascript贪婪正则表达式看起来不贪婪
- 有两种类似的方法,但;s看起来不太好看,其中一种方法就是重构
- 为什么我的CSS定位在Mac OS上看起来不一样?