放大和缩小动态图像

Zoom In and Zoom Out for dynamic Image

本文关键字：图像 动态 缩小 放大      更新时间：2023-09-26

这是我的放大和缩小代码：

function ZoomIn() {  
    var ZoomInValue =      parseInt(document.getElementById("stuff").style.zoom) + 1 + '%'  
    document.getElementById("stuff").style.zoom = ZoomInValue;  
    return false;  
}  
function ZoomOut() {  
    var ZoomOutValue = parseInt(document.getElementById("stuff").style.zoom) - 1 + '%'  
    document.getElementById("stuff").style.zoom = ZoomOutValue;  
    return false;  
}

这不正常工作，我希望它放大和缩小它会使图像变大，这不是一个令人愉快的缩放。有人能帮助我获得正确的放大和缩小代码，这样我的问题就可以解决吗？或者是否有更好的替代方案？

HTML：

echo'<input type="button" value="Zoom In" OnClick="return ZoomIn();" />';   
echo'<input type="button" value="Zoom out" OnClick="return ZoomOut();" />';

这是我过去用来获得图像缩放效果的代码。。让我知道你是否可以使用is：

            $('#container img').hover(
                function(){
                    var $this = $(this);
                    $this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
                },
                function(){
                    var $this = $(this);
                    $this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
                }
            );
        });

我认为这个链接就是您想要的。。

var currentZoom = 1;
$('button').click(function() {
    currentZoom += 0.1;
    $('body').css({
        zoom: currentZoom,
        '-moz-transform': 'scale(' + currentZoom + ')'
    });
});

在jsfiddle上看到它。。。

请告诉我下面给出的示例代码是否有帮助。

<html>
<head>
<!-- CSS -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <!-- JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>
<img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" alt="Mountain View" style="height:600;width:800;"id="stuff">
<hr>
<button type="button" id="ZoomIn">Zoom-In</button>
<button type="button" id="ZoomOut">Zoom-Out</button>
</body>
<script>
    var currentZoom = 1.0;
    $(document).ready(function () {
        //Resize on mouse over
        $('#stuff').hover(
        function() {
            $(this).animate({ 'zoom': 1.2 }, 400);
        },
        function() {
            $(this).animate({ 'zoom': 1 }, 400);
        });
        //Zoom in on mouse click
        $('#ZoomIn').click(
            function () {
                $('#stuff').animate({ 'zoom': currentZoom += .1 }, 'slow');
            })
        //Zoom out on mouse click   
        $('#ZoomOut').click(
            function () {
                $('#stuff').animate({ 'zoom': currentZoom -= .1 }, 'slow');
            })
    });
</script>
</html>
相关文章：