【发布时间】：2014-03-13 07:26:35
【问题描述】：
不幸的是，我不是 jQuery 专家，我正在尝试重新创建媒体上的图像淡入淡出/模糊效果。这是一个例子 -https://medium.com/matter/76d9913c6011
如果您向下滚动页面，您会注意到一些图像，这些图像会随着您的滚动而逐渐淡入/淡出。检查代码后，我注意到创建效果的图像有两个版本，一个是普通版本，另一个是模糊的。
据我所知，事情是这样设置的：
<section class=
"section-bottom-center section-image-full section-using-canvas"
data-scroll="native">
<div class="section-background" data-height="2130" data-image-id=
"1*ladXngaMeWEqp1R18uSSQA.jpeg" data-scroll="post-section" data-width=
"3200">
<div class="section-background-image" style=
"background-image: url(https://d262ilb51hltx0.cloudfront.net/max/700/gradv/29/81/40/1*ladXngaMeWEqp1R18uSSQA.jpeg);">
</div><br>
</div>
<div class="section-inner layout-single-column">
<p>SOME TEXT THAT FADES OVER THE IMAGE</p>
</div>
</section>
我找到了一些jQuery，可惜我不是很了解它，所以我无法重新创建它。
var qm = function(a, b) {
var c = '\x3cdiv class\x3d"section-background' + (a.hasFocus ? " media-has-focus" : "") + '"' + ("section-image-full" == a.imageLayout ? ' data-scroll\x3d"post-section"' : "") + 'data-image-id\x3d"' + (0,z.N)(a.backgroundImage.id) + '"', d;
d = a.backgroundImage;
d = (d.originalWidth ? ' data-width\x3d"' + (0,z.N)(d.originalWidth) + '"' : "") + (d.originalHeight ? ' data-height\x3d"' + (0,z.N)(d.originalHeight) + '"' : "") + (d.filter ? ' data-filter\x3d"' + (0,z.N)(d.filter) + '"' : "") + (d.backgroundSize ? ' data-image-style\x3d"' + (0,z.N)(d.backgroundSize) + '"' : "");
c = c + d + "\x3e";
c = "section-image-full" == a.imageLayout ? c + ('\x3cdiv class\x3d"section-background-image" style\x3d"background-image: url(' + (0,z.N)((0,z.P)(b.miroUrl)) + "/max/" + (0,z.N)("700".replace(ji, ki)) + "/gradv/29/81/40/" + (0,z.N)(String(a.backgroundImage.id).replace(ji, ki)) + ');"\x3e\x3c/div\x3e\x3cbr\x3e') : "section-image-left" == a.imageLayout || "section-image-right" == a.imageLayout ? c + ('\x3cimg src\x3d"' + (0,z.N)((0,z.P)(b.miroUrl)) + "/max/" + (0,z.N)(b.postColumnWidth) + "/multiply/grey/" +
(0,z.N)(a.backgroundImage.id) + '"\x3e') : c + "\x3cbr\x3e";
return c + "\x3c/div\x3e";
};
我确实注意到的一件事是，这两个图像不是简单地淡入/淡出 - 淡入淡出水平以某种方式与滚动绑定，因此当您停止滚动时，图像停止淡入淡出。这是一个非常好的效果。
P.S 我希望尽可能简单地做到这一点，最好不要使用 jQuery 插件。
谢谢
【问题讨论】：
标签： javascript jquery html image