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 + ')'
    });
});

See it on 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 个答案: