Функция jquery не работает в mozila firefox, но работает в Google Chrome

108
11

Я хочу размыть содержимое div, и эта функция работает правильно в Google Chrome, но не в Mozilla 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 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 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+) Спасибо заранее.

спросил(а) 2021-01-25T17:42:56+03:00 4 месяца, 3 недели назад
1
Решение
63

Это должно заставить вас начать использовать 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 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');
}

ответил(а) 2021-01-25T17:42:56+03:00 4 месяца, 3 недели назад
44
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема