Javascript 是否可以将css模糊效果移除到完整div的特定区域
我有一个具有模糊效果的背景图像的div htmlJavascript 是否可以将css模糊效果移除到完整div的特定区域,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个具有模糊效果的背景图像的div html 当我将鼠标悬停在背景图像上时,我想消除鼠标指针所在位置的模糊效果。是否可以从jquery中执行此操作。这就是我想要实现的例子 我用jQuery解决方案创建了一个小提琴。它模糊了图像悬停的部分。希望它能帮助: jQuery $('.pic').mousemove(function(event){ event.preventDefault(); var upX=event.clientX; var upY=event.clie
当我将鼠标悬停在背景图像上时,我想消除鼠标指针所在位置的模糊效果。是否可以从jquery中执行此操作。这就是我想要实现的例子 我用jQuery解决方案创建了一个小提琴。它模糊了图像悬停的部分。希望它能帮助: jQuery
$('.pic').mousemove(function(event){
event.preventDefault();
var upX=event.clientX;
var upY=event.clientY;
$('#blurr').css({'display':'block','top':''+(upY-15)+'px','left':''+(upX-15)+'px'});
});
/**Give equal width and height as <img> to .blurPic**/
var hgt = $('.blurPic').width($('#container img').width());
$('.blurPic').height($('#container img').height());
/*****************************************************/
/*******Get shadow values*****/
var result = $('.blurPic').css('boxShadow').match(/(-?\d+px)|(rgb\(.+\))/g)
var color = result[0],
y = result[1],
x = result[2],
blur = result[3];
/******************************/
/**Change box-shadow on mousemove over image**/
var blurStartW = hgt.width()/2;
var blurStartH = hgt.height()/2;
$('.blurPic').mousemove(function(event){
event.preventDefault();
var scrollLeftPos = $(window).scrollLeft(),
scrollTopPos = $(window).scrollTop(),
offsetLft = hgt.offset().left,
offsetTp = hgt.offset().top;
var upX=event.clientX;
var upY=event.clientY;
$(this).css({boxShadow : ''+(-offsetLft+upX-blurStartW+scrollLeftPos)+'px '+(-offsetTp+upY-blurStartH+scrollTopPos)+'px 20px 100px white inset'});
});
/*********************************************/
/***reset box-shadow on mouseout***/
$('.blurPic').mouseout(function(){
$(this).css({boxShadow : '0px 0px 0px 160px white inset'});
});
/**********************************/
html,body{
margin:0px;
padding:0px;
}
#container{
position:relative;
margin-left:100px;
display:inline-block;
}
.revealPic{
position:absolute;
top:0px;
left:0px;
background-image:url('http://i.imgur.com/IGKVr8r.png');
background-color:white;
background-position:0px 0px;
background-repeat:no-repeat;
width:50px;
height:50px;
/*making div circular*/
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-khtml-border-radius: 50%;
}
CSS
.pic{
display:inline-block;
}
/*below CSS for the blurring div*/
#blurr{
position:absolute;
display:none;
width:30px;
height:30px;
background-color:rgb(240,240,240);
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
box-shadow:0px 0px 10px 10px white;
-moz-box-shadow:0px 0px 10px 10px white;
-webkit-box-shadow:0px 0px 10px 10px white;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
html,body{
margin:0px;
padding:0px;
}
#container{
position:relative;
}
.blurPic{
position:absolute;
top:0px;
left:0px;
width:0px;
height:0px;
box-shadow:0px 0px 0px 160px white inset;
-moz-box-shadow:0px 0px 0px 160px white inset;
-webkit-box-shadow:0px 0px 0px 160px white inset;
-ms-box-shadow:0px 0px 0px 160px white inset;
opacity:0.9;
filter:alpha(opacity=0.9); /* For IE8 and earlier */
}
<div id="container">
<img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
<div class="revealPic"></div>
</div>
更新日期:2014年2月28日 HTML
<div id="container">
<div class="blurPic"></div>
<img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
</div>
jQuery
$('.pic').mousemove(function(event){
event.preventDefault();
var upX=event.clientX;
var upY=event.clientY;
$('#blurr').css({'display':'block','top':''+(upY-15)+'px','left':''+(upX-15)+'px'});
});
/**Give equal width and height as <img> to .blurPic**/
var hgt = $('.blurPic').width($('#container img').width());
$('.blurPic').height($('#container img').height());
/*****************************************************/
/*******Get shadow values*****/
var result = $('.blurPic').css('boxShadow').match(/(-?\d+px)|(rgb\(.+\))/g)
var color = result[0],
y = result[1],
x = result[2],
blur = result[3];
/******************************/
/**Change box-shadow on mousemove over image**/
var blurStartW = hgt.width()/2;
var blurStartH = hgt.height()/2;
$('.blurPic').mousemove(function(event){
event.preventDefault();
var scrollLeftPos = $(window).scrollLeft(),
scrollTopPos = $(window).scrollTop(),
offsetLft = hgt.offset().left,
offsetTp = hgt.offset().top;
var upX=event.clientX;
var upY=event.clientY;
$(this).css({boxShadow : ''+(-offsetLft+upX-blurStartW+scrollLeftPos)+'px '+(-offsetTp+upY-blurStartH+scrollTopPos)+'px 20px 100px white inset'});
});
/*********************************************/
/***reset box-shadow on mouseout***/
$('.blurPic').mouseout(function(){
$(this).css({boxShadow : '0px 0px 0px 160px white inset'});
});
/**********************************/
html,body{
margin:0px;
padding:0px;
}
#container{
position:relative;
margin-left:100px;
display:inline-block;
}
.revealPic{
position:absolute;
top:0px;
left:0px;
background-image:url('http://i.imgur.com/IGKVr8r.png');
background-color:white;
background-position:0px 0px;
background-repeat:no-repeat;
width:50px;
height:50px;
/*making div circular*/
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-khtml-border-radius: 50%;
}
jQuery
$('.pic').mousemove(function(event){
event.preventDefault();
var upX=event.clientX;
var upY=event.clientY;
$('#blurr').css({'display':'block','top':''+(upY-15)+'px','left':''+(upX-15)+'px'});
});
/**Give equal width and height as <img> to .blurPic**/
var hgt = $('.blurPic').width($('#container img').width());
$('.blurPic').height($('#container img').height());
/*****************************************************/
/*******Get shadow values*****/
var result = $('.blurPic').css('boxShadow').match(/(-?\d+px)|(rgb\(.+\))/g)
var color = result[0],
y = result[1],
x = result[2],
blur = result[3];
/******************************/
/**Change box-shadow on mousemove over image**/
var blurStartW = hgt.width()/2;
var blurStartH = hgt.height()/2;
$('.blurPic').mousemove(function(event){
event.preventDefault();
var scrollLeftPos = $(window).scrollLeft(),
scrollTopPos = $(window).scrollTop(),
offsetLft = hgt.offset().left,
offsetTp = hgt.offset().top;
var upX=event.clientX;
var upY=event.clientY;
$(this).css({boxShadow : ''+(-offsetLft+upX-blurStartW+scrollLeftPos)+'px '+(-offsetTp+upY-blurStartH+scrollTopPos)+'px 20px 100px white inset'});
});
/*********************************************/
/***reset box-shadow on mouseout***/
$('.blurPic').mouseout(function(){
$(this).css({boxShadow : '0px 0px 0px 160px white inset'});
});
/**********************************/
html,body{
margin:0px;
padding:0px;
}
#container{
position:relative;
margin-left:100px;
display:inline-block;
}
.revealPic{
position:absolute;
top:0px;
left:0px;
background-image:url('http://i.imgur.com/IGKVr8r.png');
background-color:white;
background-position:0px 0px;
background-repeat:no-repeat;
width:50px;
height:50px;
/*making div circular*/
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-khtml-border-radius: 50%;
}
我想我在几天前看到了类似的东西,但当时正在使用SVG。如果您对使用SVG很满意,我将尝试看看我是否能挖掘出这一点。您将找到SVG和JQUERI的答案。我不知道SVG。我将搜索和学习。如果你能试试,那就太好了。但是从jquery不可能吗。\n我的解决方案是使用JavaScript。您可以创建一个元素“放大镜”具有相同的背景图像,但使其裁剪图像的一部分。保持你目前的背景。当鼠标在背景图像上移动时,“放大镜”元素也跟着鼠标指针移动,并修改背景位置以在背景图像的相应位置显示图像。