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+）中運行此代碼在此先感謝。

來源

2014-10-12 Sharif Sajid

你看着http://stackoverflow.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

過濾器不是在IE支持，僅在FF 35

支持參見

來源

2014-10-12 03:45:54

我不知道爲什麼你被拒絕，你的答案似乎是我的谷歌搜索已經在這個問題上出現... – 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'); 
}

來源

2014-10-12 04:04:55 user1572796

實際上這裏是修復更新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

jQuery函數在mozila Firefox中不工作，但在谷歌瀏覽器的工作

回答

相關問題