2012-08-02 5 views
6

में लाइव टाइल्स फ़्लिपिंग सिमुलेटिंग मुझे कुछ एचटीएमएल स्क्वायर "लाइव टाइल्स" कोड करने की आवश्यकता है जो समय-समय पर 4 राज्यों के बीच फ़्लिप करते हैं। असल में मुझे क्या चाहिए यह प्लग-इन http://www.drewgreenwell.com/projects/metrojs करता है, लेकिन 4 राज्यों के बीच, केवल 2. क्या कोई निश्चित API/प्लग-इन है जो HTML/jquery साइटों में लाइव टाइल प्रबंधन की अनुमति देता है? मैं विंडोज 8 ऐप नहीं बना रहा हूं, मैं बस एचटीएमएल में लाइव टाइल्स फ़्लिपिंग अनुकरण करने की कोशिश कर रहा हूं, और उम्मीद है कि यह सभी प्रमुख ब्राउज़रों में काम करेगा। धन्यवाद।एचटीएमएल

+0

ड्रू का प्लग-इन केवल 2 राज्यों, सामने और पीछे के साथ टाइल्स का समर्थन करता है। मुझे प्रति टाइल 4 राज्यों या उससे अधिक का समर्थन करने की आवश्यकता है। और इस तरह काम करने के लिए इसे अनुकूलित करने में jquery – Voidsbane

+0

में अधिक अनुभव वाले किसी व्यक्ति के लिए बहुत समय लग सकता है असल में यह कई राज्यों का समर्थन करता है। नीचे मेरा जवाब देखें। – Voidsbane

उत्तर

-2

आप इस प्रभाव को पाने के लिए jQuery या jQuery UI का उपयोग कर सकते हैं। jQuery में .animate(), .show(), .hide() और अन्य विधियां हैं जो मदद कर सकती हैं।

+0

धन्यवाद, मुझे बस इसे इस तरह अनुकूलित करना होगा। मैं बस सोच रहा था, चूंकि मेट्रो स्टाइल ऐप और लाइव टाइल्स अधिक से अधिक आम हो रहे हैं, अगर प्लग-इन/एपीआई ने बॉक्स से बाहर किया था। – Voidsbane

+0

मैं jquery एनिमेशन का उपयोग करने की अनुशंसा नहीं करता जब तक कि उन्हें CSS3 संक्रमण/एनिमेशन में स्विच नहीं किया जाता है। स्क्रिप्ट में एनीमेशन चलाने से यह आसानी से –

4

मैं सिर्फ एचटीएमएल लाइव टाइलें flipping अनुकरण करने के लिए कोशिश कर रहा हूँ, और उम्मीद है कि यह सभी प्रमुख ब्राउज़रों

मुझे लगता है कि यह है कि तुम क्या जरूरत है में काम किया है। फ्लिप! http://lab.smashup.it/flip/

0

यह बहुत आसान होना चाहिए। विशेष रूप से:

  • अपने एन टाइल आकार सामग्री के साथ एक DIV
  • यह क्लिप बनाएं/आकार 1 टाइल आकार
  • के माता पिता div सुनिश्चित करें कि अतिप्रवाह छिपा हुआ है बनाओ।
  • लागू सीएसएस

का उपयोग कर तो सब कुछ ठीक हो जाना चाहिए & नई सामग्री पिछली सामग्री के लिए के अनुवाद करते हैं।

+0

चलाने की अनुमति नहीं देगा! मैं अभी भी jquery के लिए थोड़ा नया हूँ, लेकिन यह एक त्वरित समाधान हो सकता है। – Voidsbane

1

आप इस आलेख को नीचे (नीचे) पढ़ने पर विचार कर सकते हैं कि CSS3/HTML5 संक्रमणों के साथ फ़्लिप कैसे करें। यह जावास्क्रिप्ट नहीं है (और इस प्रकार कोई एपीआई नहीं है), लेकिन मेरे अनुभव में संक्रमण प्रभाव उनकी चिकनीता में थोड़ा और विश्वसनीय लगता है।

Animated Element Wall With CSS

+0

धन्यवाद! मैं इसे देख लूंगा – Voidsbane

5

अंत में, ऐसा लगता है Drew's plug-in कई टाइल राज्यों का समर्थन करता है कि, वह नमूने की एक जोड़ी प्रदान की है। Sample 1 और Sample 2। ऐसा लगता है कि मुझे लाइव टाइल सिमुलेशन के लिए क्या चाहिए।