Move (अनुवाद + संक्रमण) मनोरम तस्वीर के आधार माउस स्थिति

मैं निम्नलिखित स्थिति है: मैं एक केंद्रित मनोरम तस्वीर (दाएं और बाएं भागों तस्वीर नहीं दिखाई दे रहा की अभी तक स्क्रीन पर) है।Move (अनुवाद + संक्रमण) मनोरम तस्वीर के आधार माउस स्थिति

मुझे लगता है कि चाहते हैं, माउस स्थिति (चित्र के बीच एक्स से संबंधित) के आधार पर चित्र:

-> बाईं ओर (जैसे कि एक आभासी दौरे में) चालें (माउस है अगर तस्वीर के दाहिने भाग पर);

-> सही करने के लिए ले जाता है (अगर माउस चित्र के बाएं हिस्से पर है);

-> और वापस प्रारंभिक केंद्रित स्थिति (जब माउस चित्रों के बाहर है) करने के लिए आता है।

<head> 
<style type="text/css"> 
    #smartdemo3 { 
    width: 75%; 
    overflow: hidden; 
    } 

    #smartdemo3 img:hover { 
    transform: translate3d(-200px, 0px, 0px); 
    transition: transform 5s linear; 
    } 

    #smartdemo3 img { 
    transition: 4s all ease-in-out; 
    } 
</style> 
</head> 

<body> 
<div id="smartdemo3"> 
    <img src="../images/Panint1.jpg" /> 
</div> 
</body> 
</html>

मैं ऐसा कैसे कर सकता है:, (दो दिशाओं लेकिन मैं चाहता हूँ/जरूरत केवल एक दिशा में आंदोलन)

इस तरह मैंने कोशिश की है?

धन्यवाद।

स्रोत

2016-02-14 colombo2003

कैसे इस बारे में?

फिडल डेमो: https://jsfiddle.net/os0moz5j/1/

एचटीएमएल

<div class="panorama default"> 
    <img src="https://unsplash.it/2500/500?image=914"> 
</div>

सीएसएस

.panorama{ width:400px; height:200px; margin:100px; overflow:hidden; position:relative; } 
.panorama img{ height:200px; width:auto; position:absolute; left:0; } 

.panorama.default img{ left:50%; transform:translateX(-50%); transition:all .2s ease; }

जे एस

$('.panorama').on('mousemove',function(e){ 
    mousePos = e.pageX - $(this).offset().left; 
    eleWidth = $(this).outerWidth(); 
    imgWidth = $(this).find('img').outerWidth(); 
    relativeMousePos = mousePos/eleWidth; 
    imgPos = (imgWidth - eleWidth) * relativeMousePos; 
    $(this).find('img').css('transform','translateX(-'+imgPos+'px)'); 
}); 

$('.panorama').on('mouseenter',function(){ 
    $(this).removeClass('default'); 
}).on('mouseleave',function(){ 
    $(this).addClass('default'); 
    $(this).find('img').css('transform',''); 
});

स्रोत

2016-02-14 22:55:26 rorymorris89

आपकी मदद के लिए बहुत बहुत धन्यवाद। हालांकि मुझे यह पसंद है कि जब चित्र चित्र के दोनों तरफ होता है तो चित्र स्वयं ही चलता है। अगर मैं दाएं तरफ माउस को इंगित करता हूं (माउस अभी भी नहीं चल रहा है) तो तस्वीर बाईं ओर जाती है और इसके विपरीत। इसके अलावा, अगर मैं तस्वीर को धीरे-धीरे स्थानांतरित करना चाहता हूं तो क्या यह पैनोरमा.डेफॉल्ट.आईएमजी में संक्रमण से मूल्य को संशोधित करने के लिए पर्याप्त है? इसके अलावा, पूरी तरह से केंद्रित चित्रों के लिए, मुझे संशोधित करने की क्या ज़रूरत है? आपकी सहायता के लिए मिलियन धन्यवाद। – colombo2003

Move (अनुवाद + संक्रमण) मनोरम तस्वीर के आधार माउस स्थिति

उत्तर

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