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

let zoom_param = 1;
function zooming_out(on_off) {
if (on_off == 0) {
    if (zoom_param >= 0.1) {
    zoom_out = setInterval(function() {
            blocks.style.transition = 50 + 'ms';
            blocks.style.zoom =  zoom_param;
            side_blocks.style.transition = 50 + 'ms';
            side_blocks.style.zoom =  zoom_param;
            zoom_param -= 0.001;
        }, 5);
    }
} else {
    clearInterval(zoom_out);
}
}
function zooming_in(on_off) {
if (on_off == 0) {
    zoom_in = setInterval(function() {
            blocks.style.transition = 50 + 'ms';
            blocks.style.zoom =  zoom_param;
            side_blocks.style.transition = 50 + 'ms';
            side_blocks.style.zoom =  zoom_param;
            zoom_param += 0.001;
        }, 5);
} else {
    clearInterval(zoom_in);
}
}

उन्हें एक मूसडाउन और माउसअप ईवेंट द्वारा बुलाया जाता है (यदि यह महत्वपूर्ण है तो आईडीके),
सहायता के लिए धन्यवाद!

1
Wiktor Kisielewski 20 फरवरी 2019, 12:00

1 उत्तर

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

CSS संपत्ति ज़ूम अच्छी तरह से समर्थित नहीं है। इसके बजाय इसे ट्रांसफॉर्म के साथ आज़माएं। कोई टाइमर की आवश्यकता नहीं है, एनीमेशन भी सुचारू होगा। आशा है कि यह कोड स्निपेट आपकी मदद कर सकता है।

var element = document.querySelector('.element');
element.style.transition = 'transform';
element.style.transitionTimingFunction = 'linear';
element.style.transformOrigin = 'left top';
element.style.transitionDuration = '2s';

let zoomMin = 1;
let zoomMax = 2;

document.querySelector('.zoom-in').addEventListener('click', function(e) {
	zoomingIn();
});

document.querySelector('.zoom-stop').addEventListener('click', function(e) {
	zoomingStop();
});

document.querySelector('.zoom-out').addEventListener('click', function(e) {
	zoomingOut();
});

function zoomingStop() {
	let scaleX = element.getBoundingClientRect().width / element.offsetWidth;
  element.style.transform = 'scale(' + scaleX + ', ' + scaleX + ')';
}

function zoomingIn() {
	element.style.transform = 'scale(' + zoomMax + ', ' + zoomMax + ')';   
}

function zoomingOut() {
	element.style.transform = 'scale(' + zoomMin + ', ' + zoomMin + ')';  
}
div {
  margin: 20px;
  padding: 20px;
  width: 100px;
  height: 100px;
  background: #0095ff;
}
<button class="zoom-in">zoomIn</button>
<button class="zoom-stop">stop</button>
<button class="zoom-out">zoomOut</button>

<div class="element">
  <p>Some</p>
  <p>Text</p>
</div>
1
kmgt 20 फरवरी 2019, 11:34