क्या पृष्ठ लोड होने पर div ज़ूम-इन करने का कोई तरीका है? जैसे जब आप क्रोम में एक नया ऐप इंस्टॉल करते हैं, तो यह आपको नए टैब पेज पर लाता है और नए ऐप में ज़ूम करता है। यह अच्छा दिखता है।

क्या कोई जानता है कि jQuery के साथ ऐसा कैसे करें?

2
Nathan 16 अगस्त 2011, 07:42

3 जवाब

सबसे बढ़िया उत्तर

यहाँ jQuery के साथ ज़ूम करने का एक तरीका है

उदाहरण jsfiddle

अपने सीएसएस में शुरुआती आकार सेट करें (और स्थिति ऑफ़सेट top और left) के साथ:

#zoom-box {
    background: #7d7e7d;
    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
    border-radius:10px;
    width:0;
    height:0;
    position:relative;
    top:150px;
    left:150px;
    border:solid 4px yellow;
    font-size:0;
    line-height:0;
    vertical-align:middle;
    text-align:center;
    color:#fff;
}

फिर एक jQuery animate() विधि के साथ सब कुछ आकार दें

$('#zoom-box').animate({
    width:'300px',
    height:'300px',
    top:'0',
    left:'0',
    'font-size':'50px',
    'line-height':'300px'
}, 1000);
8
MikeM 16 अगस्त 2011, 07:55
बहुत खूब! यह एकदम सही काम करता है। धन्यवाद :) क्या इसके साथ आकार बदलने के लिए पृष्ठभूमि-छवि प्राप्त करने के लिए वैसे भी है? जैसे इस डिव में बैकग्राउंड-इमेज है और यह आकार नहीं बदलता है। क्या पृष्ठभूमि-छवि को भी विकसित करने के लिए मैं उसमें कुछ जोड़ सकता हूं? (यह पहले से ही आकार जैसा है और div बस बढ़ता है लेकिन यह उतना अच्छा नहीं दिखता है।)
 – 
Nathan
16 अगस्त 2011, 08:04
ज़ूम करते समय आप छवि का आकार बदल सकते हैं यदि आप एक <img> तत्व का उपयोग करते हैं तो इसे देखें example fiddle a> चौड़ाई सेट करके 100%... और असल में CSS3 के साथ आप background-size से 100% भी सेट कर सकते हैं उदाहरण fiddle लेकिन यह सुनिश्चित नहीं है कि कौन से ब्राउज़र इसका समर्थन करते हैं (Chrome 14 में परीक्षण/कार्य किया गया)
 – 
MikeM
16 अगस्त 2011, 08:18
धन्यवाद। यह वास्तव में पहले से ही एक <img> है लेकिन पृष्ठभूमि-छवि के साथ है। इसका कारण यह है कि जब उपयोगकर्ता राइट क्लिक करके इसे सहेजने का प्रयास करता है, तो वे वास्तविक छवि के बजाय blank.gif सहेज रहे होते हैं। मैं शायद इसे केवल एक नियमित <img> में बदल दूंगा क्योंकि साइट को सबसे अधिक संभावना IE 8 उपयोगकर्ताओं द्वारा देखी जाएगी, दुख की बात है। मेरी इच्छा है कि आईई नियमित ब्राउज़र की तरह सबकुछ के साथ सीएसएस अनुपालन हो। वैसे भी, आपकी मदद के लिए बहुत बहुत धन्यवाद! इससे साइट वाकई अच्छी लगेगी। वैसे, साइट है weebuild1.yolasite.com जिस छवि को मैं ज़ूम इन कर रहा हूं वह है निगरानी
 – 
Nathan
16 अगस्त 2011, 08:51
छोटी सी मदद कुछ समय के बाद इसे सामान्य स्थिति में रीसेट किया जाना चाहिए और उसके लिए घूमना चाहिए मुझे क्या करना चाहिए
 – 
Developer
15 मार्च 2012, 16:34

आपको डीआईवी के अंदर सब कुछ ज़ूम-इन करना होगा, जैसे छवियां, टेक्स्ट आकार बढ़ाना, आदि ...

हो सकता है कि jQuery के लिए जूमिंग प्लगइन्स हों।

0
avetarman 16 अगस्त 2011, 07:46

सीएसएस:

div {
    width:50px;
    height:50px;
    margin:20px;
    background-color:red;
    font-size:1em;
}

.big {
    width:100px;
    height:100px;
    font-size:2em;
}

JQuery (JQueryUI के साथ):

$(function(){
      $('#my_div').addClass("big",500).removeClass("big",500);
});

यह रहा डेमो: http://jsfiddle.net/tjRvn/

दुर्भाग्य से addClass() अवधि के साथ आज रात क्रोम में काम नहीं कर रहा है। अजीब :/

0
AlienWebguy 16 अगस्त 2011, 07:58