這裏是Plunker - Preview
Working Fiddle
腳本
$(function() {
$(document).on("mousemove", function (e) {
var me = $("#scene"),
cx = me.offset().left + me.width()/2,
cy = me.offset().top + me.height()/2,
d = (Math.sqrt(Math.pow(cx, 2) + Math.pow(cy, 2))),
md = (Math.sqrt(Math.pow(e.pageX - cx, 2) + Math.pow(e.pageY - cy, 2)));
me.css('opacity', md/d);
});
});
HTML
<ul id="scene" class="scene" style="position: relative;">
<li class="layer beresponsive" data-depth="0" style="position: relative; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
<img src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/bg-eyes.jpg" />
</li>
<li class="layer" data-depth="00" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
<img id="gradient" src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/empty.png" style="opacity: 0.196366554362154;" />
</li>
<li class="layer" data-depth="00" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
<img src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/spoon-logo-1920.png" />
</li>
</ul>
文卡塔,一個美妙的解決方案,非常感謝你!它的工作原理就像它應該除了不透明度應該顛倒 - 我正在尋找不透明度在中心0,在其他邊緣1。現在它在中心是1,在外邊緣是0:http://www.bjornfloki.com/dev/spoon(請注意,該函數被應用於一個空的PNG以產生背景效果,而不是bg- eyes.jpg圖片) – bjornfloki 2014-11-05 22:40:53
哎呀!那被忽略了。我只是通過反轉更新並從您的網站獲取一些html,並將其添加到小提琴和這裏,看看。 – 2014-11-06 00:07:55
你真了不起我的朋友!我完全按照您提供的代碼使用了該代碼,但在腳本中,我用#gradient替換了#scene,以完全按照我的意圖獲取外觀。再次感謝! – bjornfloki 2014-11-06 02:20:35