放大和缩小动态图像答案

【问题标题】：Zoom In and Zoom Out for dynamic Image放大和缩小动态图像
【发布时间】：2015-12-04 19:46:21
【问题描述】：

这是我的放大和缩小代码

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

【问题讨论】：

考虑发布涉及的 html 和/或 CSS！

标签： javascript jquery jquery-ui javascript-events

【解决方案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'});
                }
            );
        });

【讨论】：

这个包含悬停效果我想通过点击一个按钮来实现

【解决方案2】：

我认为这个链接就是你要找的..

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

See it on jsfiddle...

【讨论】：

不，这个不能解决我的问题，我的图像像在虚拟游览中一样旋转 360，所以我想为旋转图像添加缩放

【解决方案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>

【讨论】：