jQuery के साथ div के फीड किनारों

Question

मैं jQuery के साथ div के किनारों को कैसे फीका कर सकता हूं? क्षैतिज स्लाइड के अंदर छवियों के साथ एक कैरोसेल के बारे में सोचो। मैं बाएं और दाएं तरफ कैसे फीका कर सकता हूं ताकि किनारों के पास की छवियां धीरे-धीरे गायब हो जाएं।

आशा है कि यह स्पष्ट है। :)

Answer 1

विभिन्न अस्पष्टता स्तरों के साथ ऊर्ध्वाधर स्ट्रिप्स जैसे किनारों पर divs का एक सेट प्रदर्शित करने के लिए एक आसान तरीका हो सकता है, जिससे छवियों का प्रभाव खराब हो जाता है।

Answer 2

एलेक्स की तरह, सबसे आसान तरीका शायद अंतर्निहित div बाहर फीका करने के लिए कुछ ओवरले कर रहा है। हालांकि मैं बस एक पीएनजी पारदर्शी ढाल का उपयोग करता हूं।

यह आसानी से IE6 में कार्य नहीं करेंगी हालांकि, लेकिन वहाँ हमेशा एक तरीका है (व्यक्तिगत रूप से मैं IE6 अब समर्थन नहीं करते):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

Answer 3

आप इसे उपयोग कर सकते हैं कम करने के साथ कई divs स्थापित करने के लिए पारदर्शिता और डाल कि आइटम आप बाहर फीका करने के लिए चाहते हैं पर एक नकाब में को यहां बताए गए: http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

Answer 4

मुझे लगता है कि इस बात की तरह आप देख रहे हैं हो सकता है: http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

रिच

Answer 5

वेबकिट ब्राउज़र (यानी। क्रोम और सफारी) -webkit-mask नामक एक सीएसएस संपत्ति का समर्थन करते हैं, जो आपको CSS3 प्रभाव (यानी एक रैखिक ढाल) वाले तत्व को ओवरले करने की अनुमति देता है।

निम्नलिखित स्टाइलशीट शासन वर्ग .mask साथ तत्वों के लिए एक fading सफेद बढ़त लागू होगी: दुर्भाग्य से

.mask { 
    -webkit-mask: -webkit-linear-gradient(
      left, 
     rgba(255,255,255,0), 
     rgba(255,255,255,1) 5%, 
     rgba(255,255,255,1) 95%, 
     rgba(255,255,255,0) 
    ); 
} 

, इस होगा WebKit- आधारित ब्राउज़र में केवल काम करते हैं। यदि आप बाकी सब कुछ (जो आप शायद करते हैं) का समर्थन करना चाहते हैं, तो आप पारदर्शी पीएनजी का उपयोग कर सबसे अच्छा हो सकते हैं।

Answer 6

आप छवियों वाले div पर एक इन्सेट छाया या बाएं या दाएं कोने वाली छाया के साथ एकल-पिक्सेल-चौड़ा बॉक्स आज़मा सकते हैं। इन बाहरी तत्वों के लिए सीएसएस पर लागू छाया की एक श्रृंखला हो सकती है, जो एक बहुत ही पारदर्शी लेकिन चौड़ी छाया से काफी अपारदर्शी छाया तक बनती है। आप इन छाया को तत्व के केवल एक तरफ भी लागू कर सकते हैं।

इनसेट के लिए

: (आप ओवरले छवियों के लिए कंटेनर, लेकिन एक ही चौड़ाई से लंबे करना होगा, और यह ज़्यादा तैरने लगते हैं, अगर यह एक ही ऊंचाई छाया सभी पक्षों से दिखाई देगा)

#container_overlay{ 
    box-shadow: inset 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

किसी भी अंत में किसी तत्व के लिए, सामान्य बॉक्स छाया का उपयोग करें।

#end_overlay{ 
    width:2px; 
    box-shadow: 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

नाव है कि या सही है और यह किसी भी ब्राउज़र ओवरले समझता है पर काम करना चाहिए, और किसी भी ओवरले के बिना यह ध्यान नहीं देगा छोड़ दिया है। मुझे नहीं लगता कि आपको इनके अंदर कुछ भी करने की ज़रूरत है, इसलिए यह एक अदृश्य वस्तु होगी जिसके साथ वह छाया फैल रहा है।

मैंने देखा है कि यह कई पत्रिका ऐप्स के शीर्ष और निचले क्षेत्र को संशोधित करने के लिए उपयोग किया जाता है, इसलिए टेक्स्ट दिखता है जैसे यह पृष्ठ छोड़ देता है।