jQuery函数在mozila Firefox中不工作，但在谷歌浏览器的工作
我想模糊div的内容，而这个功能在谷歌浏览器，但不是在mozila Firefox中正常工作，jQuery函数在mozila Firefox中不工作，但在谷歌浏览器的工作
这是我的代码，
<!doctype html>
<html>
<head>
<title>How to create blur effect with jQuery and CSS</title>
<style>
body{
text-align: center;
}
input{
margin-top:20px;
font-size:16px;
font-weight: bold;
padding:5px 10px;
}
#box{
margin:50px auto;
width:500px;
height:100px;
color:#fff;
padding:10px;
background: #333;
}
</style>
</head>
<body>
<input type="button" value="Blur Box" class="button" />
<input type="button" value="Reset Box" class="button2" />
<div id="box">We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page </div>
<!--
We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//DOM loaded
$(document).ready(function() {
//attach click event to button
$('.button').click(function(){
//when button is clicked we call blurElement function
blurElement("#box", 2);
});
//attach click event to button
$('.button2').click(function(){
//set box blur to 0
blurElement("#box", 0);
});
});
//set the css3 blur to an element
function blurElement(element, size){
var filterVal = 'blur('+size+'px)';
$(element)
.css('filter',filterVal)
.css('webkitFilter',filterVal)
.css('mozFilter',filterVal)
.css('oFilter',filterVal)
.css('msFilter',filterVal);
}
</script>
</body>
</html>
请帮助我，如何在所有浏览器（特别是mozilla firefox，IE 9+）中运行此代码 在此先感谢。
过滤器不是在IE支持，仅在FF 35
支持参见
- https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/6261306-filters
- http://css-tricks.com/almanac/properties/f/filter/
- http://caniuse.com/#feat=css-filters
- http://msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx
- https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility
我不知道为什么你被拒绝，你的答案似乎是我的谷歌搜索已经在这个问题上出现... – Rasclatt 2014-10-12 04:15:20
这应该让你开始你需要使用SVG的Firefox，并需要写些东西来改变feGaussianBlur标签上的值。没有测试IE部分，但我认为这是正确的。
看到它在行动：http://jsfiddle.net/nso4e1qu/9/
<input type="button" value="Blur Box" class="button" />
<input type="button" value="Reset Box" class="button2" />
<div id="box">We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page </div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
//DOM loaded
$(document).ready(function() {
//attach click event to button
$('.button').click(function(){
//when button is clicked we call blurElement function
blurElement("#box", 2);
});
//attach click event to button
$('.button2').click(function(){
//set box blur to 0
blurElement("#box", 0);
});
});
//set the css3 blur to an element
function blurElement(element, size){
var filterVal = 'blur('+size+'px)';
var filterValMoz = 'url(#blur)';
var filterIE = 'progid:DXImageTransform.Microsoft.Blur(PixelRadius=' + size + ')';
$(element)
.css('filter',filterVal)
.css('-webkit-filter',filterVal)
.css('-o-filter',filterVal)
.css('-ms-filter',filterVal)
.css('filter',filterValMoz);
}
body{
text-align: center;
}
input{
margin-top:20px;
font-size:16px;
font-weight: bold;
padding:5px 10px;
}
#box{
margin:50px auto;
width:500px;
height:100px;
color:#fff;
padding:10px;
background: #333;
}
svg {
position:absolute;
left:-999px;
}
.blur {
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
实际上这里是修复更新ff值：http://jsfiddle.net/nso4e1qu/ 11/ – user1572796 2014-10-12 04:07:57
谢谢哟，它的工作:) – 2014-10-12 04:23:11
没问题，你能接受答案吗？谢谢 – user1572796 2014-10-12 04:37:19
你看着http://*.com/questions/8514954/blur-imgs-divs-in-html-using-css？其中一个答案中的一条评论链接到http://caniuse.com/#feat=css-filters，其中显示了当前浏览器对CSS过滤器的支持 – Sean 2014-10-12 03:36:28
请参阅http://caniuse.com/#feat=css-filters – 2014-10-12 03:38:20