1

写真のWebページの場合、参照画像の上に半透明の長方形をドラッグすることにより、縮小された参照画像で関心のある領域を選択できる画像ビューアを実装しています。選択した領域は、100% の拡大率で領域を表示する 2 番目の画像ビューアに継続的に「ミラーリング」されます。

私のソリューションは XHTML/CSS と jQuery を使用しており、基本的なバージョンは既に動作していますが、初期化時に問題が発生し、解決できません。divjQuery UIドラッグ可能を使用してドラッグ可能にされた対象領域を設定しました。対象領域を画像に制限するために、containmentプロパティを使用しました。

ただし、最初は div は画像の外に表示されます。div関心のある領域をドラッグし始めるとすぐにdiv、画像の内部にスナップされ、それ以降は適切に封じ込めが適用されます。私が見つけたすべてのサンプルコードは、ネストされた s による包含を示しています。私の知る限り、画像 (XHML ) には他の要素を含めることができないdivため、これは私のケースには当てはまりません。img

divWeb ページが最初にレンダリングされるときに、ドラッグ可能な対象領域が既に含まれていることを強制する方法はありますか?

コードから問題を説明するために最小限のコードに抽出しました。以下を参照してください。

ヒントをいただければ幸いです。

乾杯、クリスチャン

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $("#zoom_area").draggable( {
            containment: '#the_image'
        });
    });

    </script>

<style type="text/css">

#the_image {
    width: 640px;
    height: 427px;
}

#zoom_area {
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

</style>

</head>
<body>

<div id="image_viewer">
    <img id="the_image" src="img/img1.jpg" alt="reference image" />
</div>

<div id="zoom_area">
</div>

</body>
</html>
4

1 に答える 1

2

これには 2 つの方法があります。まず、画像タグなしでやってみてください。#image_viewer 内に #zoom_area を配置し、画像タグではなく CSS 背景画像を使用して画像を含めてみてください。

HTML:

<div id="the_image">    
    <div id="zoom_area"></div>
</div>

CSS:

#the_image {
    width: 640px;
    height: 427px;
    background-image:url('img/img1.jpg');
}

#zoom_area {
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

実際のこの最初の例を参照してください: http://jsfiddle.net/qUtEW/

イメージ タグを使用する必要がある場合は、次のコードを使用できます。

HTML

<div id="image_viewer"> 
        <img id="the_image" src="img/img1.jpg" alt="reference image" /> 
        <div id="zoom_area"></div>
</div>

CSS:

#the_image {
    width: 640px;
    height: 427px;
}

#zoom_area {
    position: absolute;
    z-index:10;
    top:10px;
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

ここでのコツは、絶対位置と z-index 10 を設定することです。

この 2 番目の例を実際に参照してください: http://jsfiddle.net/pBRgb/

于 2011-02-04T20:59:13.507 に答える