放大和缩小动态图像

Question

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

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();" />';

Answer 1

这是我过去用于在图像上获得缩放效果的代码。如果您可以使用，请告诉我：

            $('#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'});
                }
            );
        });

Answer 2

我认为这个链接是你正在寻找的..

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

在 jsfiddle 上看到它...

Answer 3

如果下面给出的示例代码有帮助，请告诉我。

<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>

放大和缩小动态图像

问题描述

3 个解决方案

解决方案1
0 2015-12-04 19:55:02

解决方案2
0 2015-12-04 20:01:48

解决方案3
0 2015-12-04 20:28:28

放大和缩小动态图像

问题描述

3 个解决方案

解决方案1 0 2015-12-04 19:55:02

解决方案2 0 2015-12-04 20:01:48

解决方案3 0 2015-12-04 20:28:28

解决方案1
0 2015-12-04 19:55:02

解决方案2
0 2015-12-04 20:01:48

解决方案3
0 2015-12-04 20:28:28