जावास्क्रिप्ट में एक स्लाइडिंग एनीमेशन को सही ढंग से कैसे कार्यान्वित करें?

मेरी खोज में जावास्क्रिप्ट मैं एक ही स्लाइडर बनाने हूँ जानने के लिए, लेकिन जावास्क्रिप्ट पर एनीमेशन के साथ (सीएसएस का उपयोग कर यह मेरे लिए कोई मुद्दा नहीं है - यह साइट गूगल पर बनाया गया था) के नीचे एक के रूप में,:जावास्क्रिप्ट में एक स्लाइडिंग एनीमेशन को सही ढंग से कैसे कार्यान्वित करें?

मूल गूगल स्लाइडर (सीएसएस के साथ एनिमेशन):
http://www.google.com/about/datacenters/inside/

मेरा काम अब तक:

http://jsfiddle.net/TS7Xu/3/

<!-- language-all: lang-html --> 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
    #promo{ 
    display:block; 
    height: 354px; 
    width: 790px; 
    } 
    .promo-item { 
     width: 81px; 
     height: 354px; 
     float: left; 
    } 
    .promo-item.wide { 
     width: 613px; 
    } 
    .threeP { 
     background-color: rgb(206, 203, 203); 
    } 
    .oneP { 
     background-color: rgb(241, 220, 182); 
    } 
    .twoP { 
     background-color: rgb(187, 217, 226); 
    } 
</style> 
</head> 
<body> 
<div id="promo"> 
    <div class="promo-item twoP wide" id="twoP"> 
     <div> 
     </div> 
    </div> 
    <div class="promo-item threeP" id="threeP"> 
     <div> 
     </div> 
    </div> 
    <div class="promo-item oneP" id="oneP"> 
     <div> 
     </div> 
    </div> 
</div> 


<script type="text/javascript"> 
var oneP = document.getElementById('oneP'); 
var twoP = document.getElementById('twoP'); 
var threeP = document.getElementById('threeP'); 
step = 1; 
      function expandPanel1(){ 
       var h = oneP.clientWidth + step; 
       oneP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel1()", 5); 
       } else { oneP.style.width = 613+"px"; } 
      }    
      function expandPanel2(){ 
       var h = twoP.clientWidth + step; 
       twoP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel2()", 5) 
       } else { twoP.style.width = 613+"px"; } 
      }    
      function expandPanel3(){ 
       var h = threeP.clientWidth + step; 
       threeP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel3()", 5) 
       } else { threeP.style.width = 613+"px"; } 
      } 
      //--------------------------------------------- 
       function expandPanel1Minus(){ 
        var h = oneP.clientWidth - step; 
        oneP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel1Minus()", 5) 
        } else { oneP.style.width = 81+"px"; } 
       }    
       function expandPanel2Minus(){ 
        var h = twoP.clientWidth - step; 
        twoP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel2Minus()", 5) 
        } else { twoP.style.width = 81+"px"; } 
       }    
       function expandPanel3Minus(){ 
        var h = threeP.clientWidth - step; 
        threeP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel3Minus()", 5) 
        } else { threeP.style.width = 81+"px"; } 
       } 
      //--------------------------------------------- 
    oneP.onmouseover = function() { 
     expandPanel1() 
      expandPanel3Minus() 
      expandPanel2Minus() 
    } 
    twoP.onmouseover = function() { 
     expandPanel2() 
      expandPanel3Minus() 
      expandPanel1Minus() 
    } 
    threeP.onmouseover = function() { 
     expandPanel3() 
      expandPanel2Minus() 
      expandPanel1Minus() 
    } 
</script>

मैं जानता हूँ कि इस उदाहरण में त्रुटियाँ हैं, तो स्लाइडर पर माउस के साथ एक लंबी सैर, यह "हिंसक" चलाने के लिए शुरू होता है :) मैं जानबूझ कर एनीमेशन गति को कम कर दिया है।

क्या कोई मुझे सही तरीके से कार्यान्वित करने के बारे में कुछ मार्गदर्शन दे सकता है?

स्रोत

2012-10-24 user1769072

आप इसे पूरी तरह से css3 के साथ कर सकते हैं। आपके लिए एक उदाहरण पर काम करना – tobspr

@ tobias-springer मुझे पता है कि यह सीएसएस के साथ किया जा सकता है (मेरे लिए यह काफी सरल है), लेकिन मैं जावास्क्रिप्ट सीख रहा हूं और मुझे इसके साथ ऐसा करने में बहुत दिलचस्पी है। – user1769072

ठीक है, लेकिन यहां सीएसएस समाधान है: http://jsfiddle.net/aJzgJ/4/embedded/result/ – tobspr

यहां एक शुद्ध जेएस कार्यान्वयन - JSFiddle link है। अगर पहेली को सहेजा नहीं गया है, तो यहां केवल जेएस बिट है। बाकी एचटीएमएल ओपी के समान है। फ़ंक्शन go को बॉडी लोड पर बुलाया जाता है।

var f, s, t; 
var which; 

function go() { 
    f = document.getElementById('oneP'); 
    s = document.getElementById('twoP'); 
    t = document.getElementById('threeP'); 

    which = s; 

    f.onmouseover = function() { 
     foo(this) 
    }; 

    s.onmouseover = function() { 
     foo(this) 
    }; 

    t.onmouseover = function() { 
     foo(this) 
    }; 
} 

function foo(e) { 
    if (e.clientWidth < 613) { 
     e.style.width = (e.clientWidth) + 10 + "px"; 
     which.style.width = (which.clientWidth - 10) + "px"; 

     setTimeout(function() { 
      foo(e); 
     }, 5); 
    } 
    else if (e.clientWidth > 613) { 
     e.style.width = "613px"; 
     which.style.width = "81px"; 

     which = e; 
    } 
}

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

स्रोत

2012-10-24 18:31:46 Satyajit

हो-हो। इस तरह के एक सुरुचिपूर्ण समाधान के लिए बहुत आभारी हैं। बाकी चीजें जो मैं करता हूं वह खुद को सही करेगी :) – user1769072

यदि आप बहुत समय बचा लेना चाहते हैं, तो आपको इसे jQuery के साथ करना चाहिए। इस http://jsfiddle.net/QXRVb/ सोलेशन का प्रयास करें। उस उदाहरण में, मैंने divs का आकार बदलने के लिए पसंद नहीं किया था। मैंने उन्हें स्थानांतरित करने के लिए जेड-इंडेक्स और jQuery एनिमेट का उपयोग किया। इस तरह उनके लिए सही स्थिति बनाना आसान है।

<style> 
#promo{ 
    width:900px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
} 
#oneP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background:#999; 
    z-index:1; 
} 
#twoP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:150px; 
    background:#ddd; 
    z-index:0; 
} 
#threeP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:750px; 
    background:#666; 
    z-index:1; 
} 
</style> 

<html> 
<div id="promo"> 
<div id="oneP">  
</div> 
<div id="twoP">  
</div> 
<div id="threeP">  
</div> 
</div> 
</html> 

<script> 
$('#oneP').mouseover(function() { 
    $('#oneP').animate({ 
     left: 0 
    },200); 
    $('#threeP').animate({ 
     left: 750 
    },200); 
    $('#twoP').animate({ 
     left: 450 
    },200); 
}); 

$('#twoP').mouseover(function() { 
    $('#oneP').animate({ 
     left: -450 
    },200);  
    $('#threeP').animate({ 
     left: 750 
    },200); 
    $('#twoP').animate({ 
     left: 150 
    },200); 
}); 

$('#threeP').mouseover(function() { 
    $('#threeP').animate({ 
     left: 300 
    },200);  
    $('#oneP').animate({ 
     left: -450 
    },200); 
    $('#twoP').animate({ 
     left: -150 
    },200); 
}); 
</script>`

इस विधि के साथ आप आसानी से divs के अंदर छवि टैग डाल सकते हैं।

स्रोत

2012-10-24 18:47:16 satire

आपके दिमाग के आपके समय और "प्रसंस्करण समय" के लिए बहुत बहुत धन्यवाद। :) आपकी विधि अनजान नहीं हुई, अनुभव के लिए धन्यवाद! – user1769072

जावास्क्रिप्ट में एक स्लाइडिंग एनीमेशन को सही ढंग से कैसे कार्यान्वित करें?

उत्तर

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