javascript - 使用 Jquery 缩放图像后可拖动区域不正确

Question

我正在使用 jquery.viewport 创建一个视口(viewport)函数:我使用 jquery ui 创建 slider 和一个自己编写的缩放函数来缩放图像。此外，使用此插件创建视口(viewport)功能。

http://borbit.github.com/jquery.viewport/

问题是，缩放图像后，可拖动区域只是内容的一部分。这意味着我不能在它的某些区域拖动内容。无论如何要解决这个问题？谢谢

HTML:

<div id="view">
    <img src="demo/Web081112_P002_text.png" id = "largeText"/>
    <img src="demo/Web081112_P002_image.jpg" id = "largeImg"/>
</div>
<div id='slider' style='display:block;position:fixed;z-index:105;height:25%;right: 2%;top:25%;'></div>

Javascript

<script>

    $(document).ready(function(){

        $("#view").css("height",$(window).height());
        $("#view").css("width",$(window).width());

        /*
        $("#box").css("height",$("#largeImg").height());
        $("#box").css("width",$("#largeImg").width());
        */

        //initiate the viewport
        var element = $('#view').viewport();
        var content = element.viewport('content');
        content.draggable({containment: 'parent'});
        content.scraggable({containment: 'parent'});

               $( "#slider" ).slider({
                orientation: "vertical",
                range: "min",
                min: 100,
                max: 200,
                value: 100,
                slide: function( event, ui ) {

                    $("#largeText").css("width",ui.value+"%");
                    $("

#largeImg").css("width",ui.value+"%");


                    $("#largeText").css("height",ui.value+"%");
                    $("#largeImg").css("height",ui.value+"%");


                    $("#largeText").css('top', ($("#view").height()/2-$("#largeText").height()/2) +'px');
                    $("#largeImg").css('top', ($("#view").height()/2-$("#largeImg").height()/2) +'px');

                    $('#largeText').css('left', ($("#view").width()/2 - $('#largeText').width()/2)+'px');
                    $('#largeImg').css('left', ($("#view").width()/2 - $('#largeImg').width()/2)+'px');

                    //element.viewport('update');
                    //Using this statement to update will occur error.

                 }
            });   


    });
    </script>

CSS:

<style>
    #view {
        height:600px;
        width:350px;
    }

    #largeImg {     
            position:absolute;
            display:block;
            width: 1250px;
            height: 1500px;
            z-index: 100;
    }

    #largeText {
            position:absolute;
            display:block;
            width: 1250px;
            height: 1500px;
            z-index: 101;
    }

    body {
        width : auto;
        height: auto;
        overflow:hidden;
    }
</style>

Answer 1

下面应该根据您对问题的描述为您提供解决方案。我稍微简化了问题，但这仍然可以帮助您指明正确的方向。

此外，如果 $('#view').viewport('update'); 无法正常工作，请提供您使用的浏览器和版本。

解决方案示例: http://jsfiddle.net/wA3eU/3/

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://github.com/borbit/jquery.viewport/raw/master/jquery.viewport.js"></script>
    <script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>

<table id="SliderData">
    <tr><td>Scale: </td><td> <div id="UIVal">0</div></td><tr>
    <tr><td>Width: </td><td> <div id="Width">0</div></td><tr>
    <tr><td>Height: </td><td> <div id="Height">0</div></td><tr>
</table>
<div id="view">
    <img src="http://farm8.static.flickr.com/7108/6947221908_3675a27fe9.jpg" id = "largeImg"/>
</div>
<div id='slider'></div>

CSS

#slider {
    display:block;
    position:fixed;
    z-index:105;
    height:25%;
    right:2%;
    top:25%; 
    margin:1em;
    background:#ccc;
}

#SliderData {
    float:left;
    display:block;
    position:fixed;
    z-index:105;
    padding: .5em;
    background: #ccc;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

#view {
    height:250px;
    width:250px;
}

#largeImg {     
        position:absolute;
        display:block;
        width: 500px;
        height: 500px;
        z-index: 100;
}

body {
    width : auto;
    height: auto;
    overflow:hidden;
}​

JQuery

$("#view").css("height",$(window).height());
$("#view").css("width",$(window).width());

//initiate the viewport
var element = $('#view').viewport();
var content = element.viewport('content');
content.draggable({containment: 'parent'});
content.scraggable({containment: 'parent'});

var defaultHeight = $("#largeImg").height();
var defaultWidth = $("#largeImg").width();

 $( "#slider" ).slider({
    orientation: "vertical",
    range: "min",
    min: 100, // 1x 
    max: 300, // 3x
    value: 100,
    slide: function(event, ui) {

        scale = ui.value/100.;

        $("#largeImg").css('width',defaultHeight * scale);
        $("#largeImg").css('height',defaultWidth * scale);     

        element = $('#view').viewport('update');

        $("#UIVal").text(scale);
        $("#Width").text($("#largeImg").width());
        $("#Height").text($("#largeImg").height());
     }
});