Javascript 如何模糊除光标所在位置以外的所有图像
登录屏幕上有一个很酷的效果，我想复制一下 关于如何显示模糊图像的一部分，有一个答案，但它没有目标示例那么复杂Javascript 如何模糊除光标所在位置以外的所有图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,登录屏幕上有一个很酷的效果，我想复制一下 关于如何显示模糊图像的一部分，有一个答案，但它没有目标示例那么复杂 这是否可以只使用html、css和js（jquery和其他插件都可以）？可以使用jquery。我已经用jquery解决方案创建了一个代码笔 查看此链接： HTML JAVASCRIPT （函数（）{ window.navigator.userAgent.match（/Macintosh/）； $（n）； 函数n（）{ $（“形式”）。每个（函数（）{ 0==$（窗口）.height
这是否可以只使用html、css和js（jquery和其他插件都可以）？可以使用jquery。我已经用jquery解决方案创建了一个代码笔
查看此链接：
HTML
JAVASCRIPT
（函数（）{
window.navigator.userAgent.match（/Macintosh/）；
$（n）；
函数n（）{
$（“形式”）。每个（函数（）{
0==$（窗口）.height（）/2
？window.setTimeout（函数（）{
n（）；
}, 100)
：$（this.css（“页边空白顶部”，-$（this.outerHeight（）/2）；
});
}
函数r（a，b）{
this.j=（this.i=“PUBLIC”！==a）？a:“*”；
这个。o=b；
}
r、 prototype.init=函数（a）{
window.addEventListener(
“信息”，
职能（b）{
b=b.数据；
b、 isCanvaApi&&（a[b.type]| |$.noop）（b）；
},
1.
);
sendMessage（{type:“Init”，authenticated:this.i}）；
};
r、 prototype.sendMessage=函数（a）{
a、 isCanvaApi=！0；
this.o.postMessage（a，this.j）；
};
函数u（）{
var a={embedDomain:“PUBLIC”}；
职能b（c）{
0==$（c.target）。最近（“#loginForm，#signupForm”）。长度&&
f、 sendMessage（{type:“LoginSignup”，action:“hide”}）；
}
函数k（c）{
c=c.电子邮件地址；
h（）；
c&（$（“#loginUsername”）.val（c），$（“#emailSignup#email”）.val（c））；
d（）；
}
函数d（）{
setTimeout（函数（）{
f、 sendMessage（{type:“LoginSignup”，action:“show”}）；
}, 300);
}
函数g（）{
变量c=$（“主体”）
.css（“背景图像”）
.replace（“url”，“”）
.替换（“（”，“”）
.替换（“）”，“”）
.替换（/[“]/g，”）；
f、 发送消息({
键入：“LoginSignup”，
行动：“页面转换”，
u:c
});
}
函数h（）{
$（“html”）.addClass（“嵌入式”）；
$（.embedded canvas”）.css（“显示”、“无”）；
if（/login\？重定向/gi.test（window.location.href））{
var c=window.location.href
.替换（“登录？”，“注册？”）
.替换（“重定向”、“signupRedirect”），
c=c+%3下载%26版面；
$（函数（）{
if（1==$（“#signupLinkWrapper a”）.length）
$（“#signupLinkWrapper a”）.attr（“href”，c），
$（“#signupLinkWrapper a”）。on（“mousedown”，g）；
否则{
变量a=$（'\x3ca href\x3d“'+c+”\x3eSignup now\x3c/a\x3e'）；
a、 on（“mousedown”，g）；
$（“#loginForm.message”）
.html（“您没有帐户吗？”）
.附加（a）；
}
});
}else if（/signup\？signupRedirect/gi.test（window.location.href））{
var a=window.location.href
.替换（“注册？”，“登录？”）
.替换（“signupRedirect”、“重定向”）；
$（函数（）{
if（1==$（“#loginLinkWrapper a”）.length）
$（“#loginLinkWrapper a”）.attr（“href”，a），
美元（“#loginLinkWrapper a”）。on（“mousedown”，g）；
否则{
变量c=$(
“\x3cp style\x3d”页边距顶端：2em；“\x3eAlready有账户吗？\x3c/p\x3e”
),
d=$（'\x3ca href\x3d“'+a+”\x3eLogin\x3c/a\x3e'）；
c、 附加（d）；
d、 on（“mousedown”，g）；
$（“#注册表格”）。附加（c）；
}
});
}
var d=document.createElement（“样式”）；
d、 setAttribute（“类型”、“文本/css”）；
var e=document.head | | document.getElementsByTagName（“head”）[0]；
d、 样式表
？（d.styleSheet.cssText=
“\n.embedded header{display:none！important；}。embedded footer{display:none！important；}。embedded body\x3e canvas{display:none！important；}”）
：d.appendChild(
document.createTextNode(
“\n.embedded header{display:none！important；}。embedded footer{display:none！important；}。embedded body\x3e canvas{display:none！important；}”
)
);
e、 儿童（d）；
$（“标题”）.hide（）；
$（“页脚”）.hide（）；
}
if（window！=window.top）{
var f=新的r（a.embeddedomain，window.parent）；
f、 初始化({
blur:function（）{}，
焦点：函数（）{}，
registerOrShowLogin:k
});
f、 sendMessage（{type:“LoginSignup”}）；
window.addEventListener（“单击”，b，！1）；
}
}
window！==window.top&&u（）；
（功能（）{
函数a（）{
$（“body”）.mousemove（函数（a）{
m=a.clientX；
q=a.clientY；
t=日期。现在（）；
p | | k（）；
});
$（窗口）
.on（“模糊鼠标输出”，函数（）{
q=m=null；
})
.on（“调整大小”，函数（）{
d&&d.parentNode&&d.parentNode.removeChild（d）；
b（）；
});
b（）；
}
函数b（）{
var a=null==g？！0:！1；
d=document.createElement（“画布”）；
d、 宽度=$（窗口）.width（）；
d、 高度=$（窗口）.height（）；
$（“正文”）。附加（d）；
g=document.createElement（“画布”）；
g、 宽度=$（窗口）.width（）；
g、 高度=$（窗口）.height（）；
if（d.getContext&&d.getContext（“2d”））{
h=d.getContext（“2d”）；
f=g.getContext（“2d”）；
f、 lineCap=“圆形”；
f、 shadowColor=“#000000”；
f、 阴影模糊=30；
c=新图像（）；
var e=$（“body”）.css（“背景图像”）；
e&&
（$（c）.1（“加载”，函数（）{
a&&k（）；
}),
（e=e
.替换（/url\（.*）/，“$1”）
.替换（/[“]/gi，”）
.replace（/\.jpg/，“\u color.jpg”），
美元（c）.attr（“src”，e），
（e=$(
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
body {
margin: 0;
background: url(https://static.canva.com/static/images/bg_tiles.jpg) no-repeat;
background-size: cover;
}
(function() {
window.navigator.userAgent.match(/Macintosh/);
$(n);
function n() {
$("form").each(function() {
0 === $(window).height() / 2
? window.setTimeout(function() {
n();
}, 100)
: $(this).css("margin-top", -$(this).outerHeight() / 2);
});
}
function r(a, b) {
this.j = (this.i = "PUBLIC" !== a) ? a : "*";
this.o = b;
}
r.prototype.init = function(a) {
window.addEventListener(
"message",
function(b) {
b = b.data;
b.isCanvaApi && (a[b.type] || $.noop)(b);
},
!1
);
this.sendMessage({ type: "Init", authenticated: this.i });
};
r.prototype.sendMessage = function(a) {
a.isCanvaApi = !0;
this.o.postMessage(a, this.j);
};
function u() {
var a = { embedDomain: "PUBLIC" };
function b(c) {
0 === $(c.target).closest("#loginForm, #signupForm").length &&
f.sendMessage({ type: "LoginSignup", action: "hide" });
}
function k(c) {
c = c.emailAddress;
h();
c && ($("#loginUsername").val(c), $("#emailSignup #email").val(c));
d();
}
function d() {
window.setTimeout(function() {
f.sendMessage({ type: "LoginSignup", action: "show" });
}, 300);
}
function g() {
var c = $("body")
.css("background-image")
.replace("url", "")
.replace("(", "")
.replace(")", "")
.replace(/["']/g, "");
f.sendMessage({
type: "LoginSignup",
action: "pageTransition",
u: c
});
}
function h() {
$("html").addClass("embedded");
$(".embedded canvas").css("display", "none");
if (/login\?redirect/gi.test(window.location.href)) {
var c = window.location.href
.replace("login?", "signup?")
.replace("redirect", "signupRedirect"),
c = c + "%3Fonboarding%26layouts";
$(function() {
if (1 === $("#signupLinkWrapper a").length)
$("#signupLinkWrapper a").attr("href", c),
$("#signupLinkWrapper a").on("mousedown", g);
else {
var a = $('\x3ca href\x3d"' + c + '"\x3eSignup now\x3c/a\x3e');
a.on("mousedown", g);
$("#loginForm .message")
.html("Don\x26#8217;t have an account?")
.append(a);
}
});
} else if (/signup\?signupRedirect/gi.test(window.location.href)) {
var a = window.location.href
.replace("signup?", "login?")
.replace("signupRedirect", "redirect");
$(function() {
if (1 === $("#loginLinkWrapper a").length)
$("#loginLinkWrapper a").attr("href", a),
$("#loginLinkWrapper a").on("mousedown", g);
else {
var c = $(
'\x3cp style\x3d"margin-top:2em;"\x3eAlready have an account?\x3c/p\x3e'
),
d = $('\x3ca href\x3d"' + a + '"\x3eLogin\x3c/a\x3e');
c.append(d);
d.on("mousedown", g);
$("#signupForm").append(c);
}
});
}
var d = document.createElement("style");
d.setAttribute("type", "text/css");
var e = document.head || document.getElementsByTagName("head")[0];
d.styleSheet
? (d.styleSheet.cssText =
"\n.embedded header { display: none !important; } .embedded footer { display: none !important; } .embedded body \x3e canvas { display: none !important; } ")
: d.appendChild(
document.createTextNode(
"\n.embedded header { display: none !important; } .embedded footer { display: none !important; } .embedded body \x3e canvas { display: none !important; } "
)
);
e.appendChild(d);
$("header").hide();
$("footer").hide();
}
if (window != window.top) {
var f = new r(a.embedDomain, window.parent);
f.init({
blur: function() {},
focus: function() {},
registerOrShowLogin: k
});
f.sendMessage({ type: "LoginSignup" });
window.addEventListener("click", b, !1);
}
}
window !== window.top && u();
(function() {
function a() {
$("body").mousemove(function(a) {
m = a.clientX;
q = a.clientY;
t = Date.now();
p || k();
});
$(window)
.on("blur mouseout", function() {
q = m = null;
})
.on("resize", function() {
d && d.parentNode && d.parentNode.removeChild(d);
b();
});
b();
}
function b() {
var a = null == g ? !0 : !1;
d = document.createElement("canvas");
d.width = $(window).width();
d.height = $(window).height();
$("body").append(d);
g = document.createElement("canvas");
g.width = $(window).width();
g.height = $(window).height();
if (d.getContext && d.getContext("2d")) {
h = d.getContext("2d");
f = g.getContext("2d");
f.lineCap = "round";
f.shadowColor = "#000000";
f.shadowBlur = 30;
c = new Image();
var e = $("body").css("background-image");
e &&
($(c).one("load", function() {
a && k();
}),
(e = e
.replace(/url\((.*)\)/, "$1")
.replace(/["']/gi, "")
.replace(/\.jpg/, "_color.jpg")),
$(c).attr("src", e),
(e = $(
'\x3cdiv style\x3d"position:absolute;height:0;width:0;overflow:hidden;"\x3e\x3c/div\x3e'
)),
$("body").append(e),
e.append(c));
}
}
function k() {
var a,
b = Date.now();
p = b > t + 500 ? !1 : !0;
m && p && e.splice(0, 0, { time: b, x: m, y: q });
for (a = 0; a < e.length; )
1e3 < b - e[a].time ? e.splice(a, e.length) : a++;
0 < e.length && window.l(k);
f.clearRect(0, 0, g.width, g.height);
for (a = 1; a < e.length; a++) {
var v = Math.sqrt(
Math.pow(e[a].x - e[a - 1].x, 2) + Math.pow(e[a].y - e[a - 1].y, 2)
);
f.strokeStyle =
"rgba(0,0,0," + Math.max(1 - (b - e[a].time) / 1e3, 0) + ")";
f.lineWidth = 25 + 75 * Math.max(1 - v / 50, 0);
f.beginPath();
f.moveTo(e[a - 1].x, e[a - 1].y);
f.lineTo(e[a].x, e[a].y);
f.stroke();
}
a = d.width;
b = d.width / c.naturalWidth * c.naturalHeight;
b < d.height &&
((b = d.height), (a = d.height / c.naturalHeight * c.naturalWidth));
h.drawImage(c, 0, 0, a, b);
h.globalCompositeOperation = "destination-in";
h.drawImage(g, 0, 0);
h.globalCompositeOperation = "source-over";
}
var d,
g,
h,
f,
c,
m = null,
q = null,
e = [],
t = 0,
p = !0;
"createTouch" in document || $(a);
window.l = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(a) {
window.setTimeout(a, 1e3 / 60);
}
);
})();
})();
$(function() {
$("menu .dropdown").on("mouseover", function() {
if (0 >= $(this).parents("#movedMenus").length) {
var a = $(this),
b = Number(a.data("timer"));
null != b && clearTimeout(b);
b = setTimeout(function() {
a
.parent()
.find("li.hover")
.not(a)
.removeClass("hover")
.addClass("hoverOff");
a.removeClass("hoverOff").addClass("hover");
}, 0);
a.data("timer", b);
a.on("mouseout", function() {
var b = Number(a.data("timer"));
null != b && clearTimeout(b);
b = setTimeout(function() {
a
.off("mouseout")
.removeClass("hover")
.addClass("hoverOff");
}, 500);
a.data("timer", b);
});
}
});
});
})();