<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-3.1.0.js"></script>
<style>
body{
margin:0 auto;
padding:0;
}
#wrap{
width:70vw;
height:80vh;
margin:10vh 15vw;
position: relative;
}
#blur,#clear{
display: block;
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
}
#blur{
z-index: 1;
-webkit-filter:blur(20px) ;
-moz-filter:blur(20px) ;
-ms-filter:blur(20px) ;
-o-filter:blur(20px) ;
filter:blur(20px) ;
}
#clear{
z-index: 10;
-webkit-clip-path:circle(50px at 50% 50%) ;
-moz-clip-path:circle(50px at 50% 50%) ;
-ms-clip-path:circle(50px at 50% 50%) ;
-o-clip-path:circle(50px at 50% 50%) ;
clip-path:circle(50px at 50% 50%) ;
}
#btns{
position: absolute;
top:35vh;
left:75vw;
}
#btns input{
display: block;
margin-bottom:10vh;
width:100px;
height:50px;
font-size: 2em;
}
</style>
</head>
<body>
<div id="wrap">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg" alt="图片" id="blur">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg" alt="图片" id="clear">
<div id="btns">
<input type="button" id="toClear" value="清晰">
<input type="button" id="toLocation" value="变位">
</div>
</div>
<script >
window.onload = function(){
var wrap = document.getElementById('wrap');
var clear = document.getElementById('clear');
var toClear = document.getElementById('toClear');
var toLocation = document.getElementById('toLocation');
var point = {//圆心坐标
x:0,
y:0
};
var r = 50;//半径
var minX = 50;//圆心最小横坐标 其中50是圆的半径
var maxX = wrap.offsetWidth - 50;//圆心最大横坐标
var minY = 50//圆心最小纵坐标
var maxY = wrap.offsetHeight - 50;//圆心最大纵坐标
var timer;//定时器
var clickClearFlag = 0; //点击清晰按钮标志，防止因用户连续点击该按钮，
// 而多次触发setInterval，使得clearInterval失效
// 0表示未点击，1表示已点击一次
// 在绑定变位事件时，会将该标志置为0
//计算页面中圆的圆心原始位置（页面刚刚加载后的位置）
function getOriginalLocation(){
point.x = wrap.offsetWidth / 2;
point.y = wrap.offsetHeight / 2;
}
getOriginalLocation();
//产生符合范围的随机数，
//并作为透明区域的新圆心位置
function randomDatas(){
do{
point.x = Math.random() * maxX;
point.y = Math.random() * maxY;
}while(point.x < minX point.y < minY);
}
function setLocation(){
clear.style.webkitClipPath = "circle(50px at " + point.x +"px "+ point.y + "px)";
clear.style.mozClipPath = "circle(50px at " + point.x +"px "+ point.y + "px)";
clear.style.msClipPath = "circle(50px at " + point.x +"px "+ point.y + "px)";
clear.style.oClipPath = "circle(50px at " + point.x +"px "+ point.y + "px)";
clear.style.clipPath = "circle(50px at " + point.x +"px "+ point.y + "px)";
}
//改变圆半径,
//并作为新圆半径
function changeRadius(){
if(r < 2000){
r += 1;
}
else{
clearInterval(timer);
}
}
function setRadius(){
changeRadius();
clear.style.webkitClipPath = "circle(" + r + "px at " + point.x +"px "+ point.y + "px)";
clear.style.mozClipPath = "circle(" + r + "px at " + point.x +"px "+ point.y + "px)";
clear.style.msClipPath = "circle(" + r + "px at " + point.x +"px "+ point.y + "px)";
clear.style.oClipPath = "circle(" + r + "px at " + point.x +"px "+ point.y + "px)";
clear.style.clipPath = "circle(" + r + "px at " + point.x +"px "+ point.y + "px)";
}
//给变位按钮（toLocation）绑定圆心位置变更事件,
//保证js代码中r=50,并还原clickClearFlag
toLocation.onclick = function(){
r = 50; //当点击一次清晰按钮后，r的值会改变，若此时点击变位按钮，再点击清晰按钮，
//r的值会从上一次点击清晰按钮后的r值开始，为避免该情况，在点击变位按钮时，将r人为
//初始化为50，这样一来，在进行下一次清晰时，效果依然从r=50开始
clickClearFlag = 0;
if(timer != "undefine" && timer != null){
clearInterval(timer);
}
randomDatas();
setLocation();
}
//给清晰按钮（toClear）绑定图像整张清晰事件（逐渐扩大圆的半径）
toClear.onclick = function(){
if(clickClearFlag === 0){
timer = setInterval(setRadius,1);
}
clickClearFlag = 1;
}
}
</script>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦