2014-06-15 10 views
5

मैं एक div पर कोणीय के साथ एक धुंधला पृष्ठभूमि प्रभाव बनाने की कोशिश कर रहा हूं, ऊपर की छवि की तरह कुछ, इसके लिए मैं blur.js का उपयोग कर रहा हूं और सबकुछ jquery के साथ ठीक काम करता है लेकिन असली सवाल यह है angularjs के साथ posible, और सबसे अच्छा तरीका क्या है?angularjs के साथ blur.js का उपयोग

मैं वास्तव में अग्रिम

यहाँ blurjs का उपयोग कर http://www.designedbyaturtle.co.uk/2013/blur-a-background-image/

हल (gtramontina की मदद से) का एक और उदाहरण में कोणीय

धन्यवाद के साथ नौसिखिया हूँ:

आप डाउनलोड कर सकते हैं यहां कोड demo-blurjs-angular

परिणाम (मेरे चित्र के साथ)

Result

इस डेमो में इस मुद्दे को शामिल अपने post

महत्वपूर्ण नोट पर Edd Turtle उल्लेख की तरह (है कि blur.js की वास्तव में है): इस तकनीक नहीं करता ' स्थानीय फाइलों के साथ काम नहीं करते हैं और इसी तरह एक सर्वर के माध्यम से चलना पड़ता है, वैसे ही अगर पृष्ठभूमि अमेज़ॅन एस 3 सेवा पर होस्ट की जाती है तो आपको क्रॉस-डोमेन कॉल (सीओआरएस) सक्षम करने की आवश्यकता होगी ..

उत्तर

2

मैं तुम्हें एक directive बनाते हैं, तो हो सकता है विशेषता के लिए प्रतिबंधित सुझाव देते हैं, और अपने प्रभाव को लागू करने कि यहां तरीका देखें: एक प्रश्न प्लगइन के लिए एक निर्देश लिखने के लिए का एक उदाहरण है।

कुछ इस तरह ( परीक्षण नहीं किया है - और आप को शामिल किया है यह मानते हुए कि, इसी क्रम में, jquery, blur.js, तो angular;

angular.module('myApp', []). 
directive('blurred', function() { 
    var directive = { restrict: 'A' }; 
    directive.compile = function compile (tElement) { 
    // taken from blur.js homepage 
    tElement.blurjs({ 
     source: 'body', 
     radius: 7, 
     overlay: 'rgba(255,255,255,0.4)' 
    }); 
    }; 
    return directive; 
}); 

फिर इसका इस्तेमाल:

<p blurred>lorem ipsum</p> 

ऊपर वर्णित आदेश के साथ इंगित करें, यह है कि यदि आप angular से पहले शामिल करते हैं, तो कोणीय अपने डोम तत्वों को लपेटने के लिए इसका उपयोग करता है, अन्यथा यह jqlite का उपयोग करें।

+0

धन्यवाद, यह मेरे लिए बहुत अच्छा काम करता है। मैं सोल्ड कोड पोस्ट करने के लिए जाता हूं। – Brujodedor

संबंधित मुद्दे