8

jquery.viewport を使用してビューポート関数を作成しています。jquery ui を使用してスライダーを作成し、独自のズーム関数を使用して画像をズームします。また、このプラグインを使用してビューポート機能を作成します。

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

2 に答える 2

3

以下は、問題の説明に基づいた解決策を提供するはずです。問題を少し単純化しましたが、これは正しい方向に向けるのに役立ちます。

また、動作$('#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());
     }
});
于 2012-12-17T13:01:24.717 に答える
0

ブラウザーでズーム ハンドル ポイントを設定することはできません。ただし、幅をそのまま変更し、追加された幅の半分を差し引いてleft位置 (相対配置を使用している場合はマイナス) を変更することで、効果を模倣できます。left-margin

于 2012-12-10T12:13:48.327 に答える