एक से एक छवि बढ़ते

इसकी मेरी पहली बार यहाँ जावास्क्रिप्ट के साथ बी को और मैं कैसे इंडेंट करने के लिए पता नहीं है इस खेद:/एक से एक छवि बढ़ते

मैं एक वैन की एक छवि है और मैं के पार ले जाने के लिए कोशिश कर रहा हूँ स्क्रीन जैसे कि यह गाड़ी चला रहा है। एक बार ऐसा करने के बाद मैं छवि को स्केल करने के लिए स्केल करूंगा जैसे कि यह दूर जा रहा है (और छोटा हो रहा है)।

मुझे किसी भी पैकेज (जैसे JQuery) के बिना मानक जावास्क्रिप्ट में इसे करने की आवश्यकता है।

मुझे जो मिला है वह एक वैन है जिसके कारण मैं टूट नहीं सकता क्योंकि एक के बजाय 2 पथ चल रहा है। गलत दिशा में भी आगे बढ़ना (इसे पथ y = -25x के साथ आगे बढ़ना चाहिए ताकि प्रत्येक 25 पिक्सल दाईं ओर चले जाएं, इसे 1 पिक्सेल ऊपर ले जाना चाहिए)।

<script type="text/javascript" src="delivery.js"> </script> <body onLoad="initVan();"> <img id="van" width=413 height=241/>

var viewWidth = 800;   
var viewHeight = 480;   
var fps = 30;   
var delay = getFrame(fps);   
var vanWidth, vanHeight, vanObj; 

function initVan() {   
    vanObj = document.getElementById("van");   
    vanObj.style.position = "absolute";   
    vanObj.src = "pics/delivery/van.png";   
    vanWidth = 413;   
    vanHeight = 241;   
    var startX = 0-vanWidth;   
    var startY = viewHeight-vanHeight;   
    setPosition(startX,startY);   
    transition(startX,startY,3000);   
} 

function transition(startX,startY,time) {   
    //the intention of this is to follow a path y=-25x in mathematical terms 
    var endX = viewWidth;   
    var endY = startY-(endX/-25);   
    //note that this is the velocity per millisecond 
    var velocityX = (endX-startX)/time;   
    var velocityY = (endY-startY)/time;   
    alert(endY+", "+startY);   
    move(velocityX,velocityY,endX,endY);   
} 

function move(vX,vY,eX,eY) {   
    var posX = getX();   
    var posY = getY();   
    if (posX<=eX || posY<=eY) {   
    //velocityX (in milliseconds) * delay = the amount of pixels moved in one frame @fps=30 
    var moveX = vX*delay;   
    var moveY = vY*delay;   
    var newX = posX+moveX;   
    var newY = posY+moveY;   
    setPosition(newX,newY);   
    setTimeout(function() {   
     move(vX,vY,eX,eY);   
    }, delay);   
    }   
} 


function getX() {   
    return vanObj.offsetLeft;   
}  

function getY() {   
    return vanObj.offsetTop;   
} 

function setPosition(newX,newY) {   
    vanObj.style.left = newY + "px";   
    vanObj.style.top = newX + "px";   
}   

function setSize(scaleX,scaleY) {   
    vanWidth *= scaleX;   
    vanHeight *= scaleY;   
    vanObj.width = vanWidth;   
    vanObj.height = vanHeight;   
}  

function getFrame(fps) {   
    return Math.floor(1000/fps);   
}

यह मेरा HTML फ़ाइल है: http://i.stack.imgur.com/9WIfr.jpg

यह मेरी जावास्क्रिप्ट फ़ाइल है:

इसे समझने के लिए मैं क्या हासिल करने की कोशिश कर रहा हूँ, कृपया इस छवि देखते हैं

स्रोत

2011-11-05 Ozzy

कैसे स्टैक ओवरफ़्लो पदों फ़ॉर्मेट करने के लिए: http://stackoverflow.com/editing-help –

आप दांतेदार यह माध्यम से नहीं बल्कि अच्छी तरह से किया है। सबसे अच्छा तरीका है अपने इंडेंट कोड को पेस्ट करना, इसे संपादक में हाइलाइट करना, और कोड बटन (या CTRL + K संयोजन) दबाएं। –

धन्यवाद, वास्तव में यह मुझे इसे पोस्ट करने की अनुमति नहीं देगा और त्रुटि संदेश ने कहा कि CTRL + K का उपयोग करें, इसलिए मैंने ऐसा किया। – Ozzy

जब तक आपके पास कोई पुस्तकालय आवश्यकता नहीं है, या विशेष रूप से पहिया को पुनर्निर्मित करने का आनंद लें, तो मैं हल करूँगा यह jQuery की प्रभाव लाइब्रेरी का उपयोग करके, और विशेष रूप से .animate: http://api.jquery.com/animate/। उस पृष्ठ पर पहला उदाहरण देखें।

$(document).ready(function() { 
    $('#van') 
    .attr({ 
     width: 413, 
     height: 241 //etc. 
    }) 
    .animate({ 
     width: "70%", 
     height: "70%" //etc. 
    }, 3000); 
});

कम कोड का मतलब कम रखरखाव है। खुश ग्राहक का मतलब है।

स्रोत

2011-11-05 17:25:47 Mithon

आपके उत्तर के लिए धन्यवाद, लेकिन मुझे वास्तव में एक बहुत ही सरल (इस 1 जावास्क्रिप्ट एनीमेशन के अपवाद के साथ) वेबसाइट पर 243 केबी जावास्क्रिप्ट फ़ाइल को शामिल करने की कोई इच्छा नहीं है। – Ozzy

आपको जावास्क्रिप्ट फ़ाइल की सेवा करने की आवश्यकता नहीं है। सीडीएन का प्रयोग करें। इस तरह जेएस-फाइल जो ब्राउज़र शायद किसी अन्य साइट पर इसका उपयोग करने से कैशिंग कर रही है, आपके लिए भी उपयोग की जाएगी। – Mithon

jQuery का छोटा और gzipped संस्करण केवल ~ 30kb है। और यदि आप इसे Googles cdn (https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js) से प्राप्त करते हैं, तो यह एक बहुत बड़ा बदलाव है जिसे उपयोगकर्ता ने इसे किसी अन्य पृष्ठ से लोड किया है पहले से ही (क्योंकि लगभग हर कोई इसे Google से प्राप्त करता है)। संपादित करें: मिथुन पहले – Webbies

भले ही आप पहले ही एक उत्तर स्वीकार कर चुके हैं, jQuery के बिना इसे करने का एक तरीका है।

समाप्त नहीं हुआ, लेकिन अवधारणा काम करती है।

window.onload = function() { 
    updateVan(0); 
    function updateVan(i) 
    { 
     var t = setTimeout(function() { 
      document.getElementById("van").style.marginLeft = i + "px"; 
      document.getElementById("van").style.marginTop = (i/10) + "px"; 
      document.getElementById("van").style.height = (100-(i/10)) + "px"; 
      document.getElementById("van").style.width = (100-(i/10)) + "px"; 
      if (i < 300) updateVan(i+1); 
     },30); 
    } 
}

कार्य यहाँ डेमो: http://webbies.dk/tmp/tmp.html

स्रोत

2011-11-05 17:56:21 Webbies

एक से एक छवि बढ़ते

उत्तर

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