javascript - Equation for image mouseover pan? -
मेरे पास एक साधारण jq स्क्रिप्ट है:
- एक निर्धारित चौड़ाई / ऊंचाई कंटेनर एक परिदृश्य आईएमजी (कंटेनर से बड़ा या छोटा हो सकता है)
- जब छवि पर कोई प्रयोक्ता मसौदा होता है, तो यह अंत तक पहुंचने तक पैन (कोई क्लिक / ड्रैग) नहीं करता
आईएमजी को बायीं ओर ले जाने के लिए समीकरण यह है: -1 (सापेक्ष माउस-स्थिति) * (आईएमजी चौड़ाई) / (कंटेनर की चौड़ाई)
यह ठीक काम करता है, लेकिन इसे छोड़ देता है अंतरिक्ष एक माउस img के अंत तक पहुँच जाता है।
$ ("आकृति img")। mousemove (फ़ंक्शन (e) {var a = $ (this) .clostest ("आंकड़ा"), बी = $ (यह)। वाइड (), सी = a.width (), डी = (e.clientX - a.offset ()। बाएं); $ (यह) .css {बाएं: -1 * (d * b / c)}, 100);});
क्या कोई मदद कर सकता है? मैं चाहता हूं कि आईएमजी को कंटेनर के दाहिनी ओर पूरी तरह से गठबंधन किया जाए, जब माउस अंत तक पहुंच जाएगा।
सही सूत्र है:
-1 * (d / c) * (b - c)
या, अधिक स्पष्ट रूप से:
-1 * (माउसएक्स / आकृतिविधि) * (imgWidth - figureWidth)
(माउसएक्स / आकृतिविधि) उस आंकड़े की चौड़ाई के प्रतिशत को दर्शाता है जो माउस पर स्थित है यह 0 से 1 के बीच की संख्या होगी।
(imgWidth - figureWidth) सबसे बड़ा एक्स मान का प्रतिनिधित्व करता है जिसे आप छवि को विपरीत दिशा में स्थिति में रखना चाहते हैं।
आकृतिविधि ,
imgWidth ,
mouseX आदि। आपके लिए समझना आसान नहीं होगा, लेकिन लोगों के जवाब देने में आसान होगा।
Comments
Post a Comment