我有一个具有zoom-in
,zoom-out
和zoom-by
功能的Web应用程序,我已如下实现:
HTML
<ul class="canvas-zoom">
<li id="id_zoom_in"><span class="icon-Icon-ZoomIn"></span><span class="lblText">Zoom In</span></li>
<li id="id_zoom_out"><span class="icon-Icon-ZoomOut"></span><span class="lblText">Zoom Out</span>
</li>
<li>
<div class="select-editable">
<select id="id_zoom_select" class="zoom-combo-box" >
<option value="25">25%</option>
<option value="50">50%</option>
<option value="66">66%</option>
<option value="75">75%</option>
<option value="100">100%</option>
<option value="Fit" selected>Fit</option>
</select>
<input type="text" id="id_zoom_text" value="" maxlength="4" />
</div>
<span class="lblText">Zoom By</span>
</li>
</ul>
JS
zoom: function (event) {
var textElem = $('.canvas-zoom #id_zoom_text'),
selectElem = $('.canvas-zoom #id_zoom_select');
if (this.id == "id_zoom_in") {
var zoom_in = parseInt(textElem.val()) + 10;
console.log("value of zoom is : " + zoom_in );
textElem.val(zoom_in + "%");
selectElem.val(zoom_in);
console.log("value of zoom by should be : " + textElem.val());
textElem.trigger('change');
}
else if (this.id == "id_zoom_out") {
var zoom_out = parseInt(textElem.val()) - 10;
console.log("value of zoom is : " + zoom_out );
textElem.val(zoom_out + "%");
selectElem.val(zoom_out);
textElem.trigger('change');
}
else if (this.id == "id_zoom_select") {
var zoomValue = $(this).val();
textElem.val(zoomValue + "%");
textElem.trigger('change');
}
else if (this.id == "id_zoom_text") {
var percent = textElem.val();
//validate the input text
if (/^[0-9%]+$/.test(percent) && percent.indexOf("%") !== 0) {
var symbolCount = percent.match(/%/g) || [].length;
//append % if only numeric is entered
if (symbolCount == 0)
textElem.val(percent + "%");
percent = parseInt(percent);
if (percent < ZOOM_MIN)
percent = ZOOM_MIN;
//else if (percent > ZOOM_MAX)
// percent = ZOOM_MAX
}
else
percent = ZOOM_MAX;
textElem.val(percent + "%");
selectElem.val(percent);
ContentEditor.setCanvasArea(percent);
}
}
我可以像这样从zoom-by
中选择缩放百分比:
但是,当我按下zoom-in
或zoom-out
时,zoom-by
文本不会更新,除非放大/缩小百分比与html代码[25,50,66,75,100, "Fit"]
中的预设选项之一一致
我能够添加一些console.log
以确认如果放大/缩小百分比不是预设之一,则放大中的文本不会改变。理想情况下,我希望如果zoom-in
将缩放百分比提高到72%,则zoom-by
文本应显示该值而不是空白,如屏幕截图所示。
有没有一种方法可以实现我想要的功能?预先感谢!
/* scale : 1 is no zoom */
function zoomElement(element, scale){
var originZoom = parseInt($(element).css("transform").match(/scale\ +\((\d)\)/m) || 1);
var originWidth = $(element).width / originZoom;
var originHeight = $(element).height / originZoom;
$(element).css({
transform:"scale("+scale+")",
"transform-origin":"left top",
width: (100/scale)+"%",
height:(originHeight/scale)+"px"
});
}
function zoom(z){
zoomElement($("div"),z);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="zoom(.5)">0.5</button>
<button onclick="zoom(1)">1</button>
<button onclick="zoom(2)">2</button>
<button onclick="zoom(5)">5</button>
<div style="">
Hello World. This is zoom text example
</div>
我只能提出这个建议-希望它正是您要的东西。为了避免错误,我运行了一些if语句,以确保在整个过程中缩放值都很重要。检查JSFiddle here$(function(){ // Get all Zoom Controls var zoomInElement = $("#id_zoom_in"); var zoomOutElement = $("#id_zoom_out"); var zoomByElement = $("#id_zoom_select"); var zoomValueTextElement = $("#id_zoom_text"); function getZoomValue(){ return zoomValueTextElement.attr("value"); } function setZoomValue(value){ zoomValueTextElement.attr("value", value); } zoomByElement.on('change', (e)=>{ setZoomValue(e.target.value); } ); zoomInElement.on('click', ()=>{ // First Get the current Value var tempVal = getZoomValue(); // Esnure that before performing any calculations, the current zoomvalue is not "Fit" if(tempVal != "Fit") { tempVal = parseInt(tempVal); //Before you increase by 10, ensure that the zoom is not at 100% if(tempVal <= 100) { // Then increase tempVal += 10; //Check if the zoom is not over 100% after incrementing by 10 if(tempVal > 100) { // then set the zoom to Max tempVal = "Fit"; } } } setZoomValue(tempVal.toString()); }); zoomOutElement.on('click', ()=>{ // First Get the current Value var tempVal = getZoomValue(); // Esnure that before performing any calculations, the current zoomvalue is not "Fit" if(tempVal != "Fit") { // Convert value to integer tempVal = parseInt(tempVal); //Before you derease, ensure that the zoom is not less than 0% if(tempVal > 0) { // Then decrease by 10 tempVal -= 10; //Check if the zoom is not below 0% after decreasing by 10 if(tempVal < 0) { // then set the zoom to Max tempVal = 0; } } }else{ tempVal = 100; } setZoomValue(tempVal); }); });
.zoom-button{ display: block; padding: 15px; width: 120px; border: thin solid #e1e1e1; margin: 10px 0; cursor: pointer; } .zoom-button:hover{ background-color: #f5f5f5; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="canvas-zoom"> <li id="id_zoom_in" class="zoom-button"><span class="icon-Icon-ZoomIn"></span><span class="lblText">Zoom In</span></li> <li id="id_zoom_out" class="zoom-button"><span class="icon-Icon-ZoomOut"></span><span class="lblText">Zoom Out</span> </li> <li> <div class="select-editable"> <select id="id_zoom_select" class="zoom-combo-box" > <option value="25">25%</option> <option value="50">50%</option> <option value="66">66%</option> <option value="75">75%</option> <option value="100">100%</option> <option value="Fit" selected>Fit</option> </select> </div> <span class="lblText">Zoom By</span> </li> <li>Current Zoom Value: <input type="text" id="id_zoom_text" value="Fit" maxlength="4" /></li> </ul>