1

これらのコードを使用するよりも、別の画像を表示する必要がありますが、マウスが画像を表示するリストであるリスデルの上にあると、マウスアウトイベントを受け取るため消えます。説明するのは非常に難しいですが、デバッグしてみて、表示される画像内でマウスを動かしてみてください。

<script>
    var mouseOverListDel = false;
    // Detect if the browser is IE or not.
    // If it is not IE, we assume that the browser is NS.
    var IE = document.all ? true : false

    // If NS -- that is, !IE -- then set up for mouse capture
    if (!IE) document.captureEvents(Event.MOUSEMOVE)

    // Set-up to use getMouseXY function onMouseMove
    document.onmousemove = getMouseXY;

    // Temporary variables to hold mouse x-y pos.s
    var tempX = 0
    var tempY = 0

    // Main function to retrieve mouse x-y pos.s

    function getMouseXY(e) {
        if (IE) { // grab the x-y pos.s if browser is IE
            tempX = event.clientX + document.body.scrollLeft
            tempY = event.clientY + document.body.scrollTop
        } else {  // grab the x-y pos.s if browser is NS
            tempX = e.pageX
            tempY = e.pageY
        }
        // catch possible negative values in NS4
        if (tempX < 0) { tempX = 0 }
        if (tempY < 0) { tempY = 0 }
        // show the position values in the form named Show
        // in the text fields named MouseX and MouseY
        var txbX = document.getElementById('TextBox1');
        var txbY = document.getElementById('TextBox2');
        txbX.value = tempX;
        return true
    }


    function getPosition(element) {
        var xPosition = 0;
        var yPosition = 0;

        while (element) {
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
            element = element.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }



    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = document.createElement('span');

                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                      '" title="', escape(theFile.name), '"/>'].join('');
                    span.style.height = "65px";
                    span.style.width = "90px";
                    document.getElementById('list').insertBefore(span, null);

                    var del = document.createElement('del');
                    del.style.visibility = "hidden";
                    del.innerHTML = ['<img class="thumbdel" src="http://s7.postimage.org/fc6w3qjp3/del.png',
                                      '" title="', escape(theFile.name + "del"), '"/>'].join('');
                    document.getElementById('listdel').insertBefore(del, null);
                    del.addEventListener("click", function () { delClick(del, span) }, false);

                    del.addEventListener('mouseover', function () { opacityOn(del) }, false)
                    del.addEventListener('mouseout', function () { opacityOn(del) }, false);
                    span.addEventListener('mouseover', function () { opacityOn(del) }, false);
                    span.addEventListener('mouseout', function () { opacityOff(del) }, false);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    function delClick(imgDel, img)
    {
        var listImg = document.getElementById('list');
        listImg.removeChild(img);

        var listDelImg = document.getElementById('listdel');
        listDelImg.removeChild(imgDel);
    }

    function opacityOn(imgDel)
    {
        imgDel.style.visibility = "visible";
    }

    function opacityOff(imgDel)
    {
            imgDel.style.visibility = "hidden";
    }


    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
4

1 に答える 1

0

これにCSSを使用できますか？好き ：

.listDel {
    background: none;
}

.listDel :hover {
    background: URL("URL to image");
}

画像をJavaScriptで表示するための複雑な条件を実行したい場合は、次のように考えてみてください。

var listdel = document.getElementById('listdel');
listdel.addEventListener('mouseover', 
    function () { window.mouseOverListDel = true; }
    , false);
listdel.addEventListener('mouseout', 
    function () { 
         setTimeout( 
             function () {  window.mouseOverListDel = false; }
             , 333
         );
    }
    , false);

次に、opacityOn関数（おそらく削除ボタンの画像も非表示にしますか？）で、そのフラグが設定されているかどうかを確認します（mouseOverListDel）。設定されている場合は、マウスがオーバーしていることがわかっているので、delボタンの画像を非表示にしません。削除画像のリスト。何も非表示にしないでください。

私があなたの詳細を完全に理解していなくても、このパターンは役に立ちます。基本的に、マウスがローカルでその画像の境界を離れた場合でも、画像を表示し続けたいと考えていますが、それでもその画像の「ユーザー関連」の場所にあります。つまり、「その画像にかなり近いように見えます」。画像を表示し続ける場合は役に立ちますが、表示しない場合は役に立ちません。

のようなライブラリを使用して、hoverIntentこれを簡単にするjQueryを使用することも、例を示したように自分でコーディングすることもできます。基本的な考え方は2つの部分に分かれています。

  1. マウスがそれらの上にあるときに関心のある領域にフラグを設定し、マウスがそれらの上にないときにそれを解除します。
  2. 他のマウスオーバーイベントハンドラーからこれらのフラグをチェックして、アクションに選択した条件（画像の表示、画像の非表示など）が満たされているかどうかを判断します。
  3. これがクリンチャーです。イベントの発生時間にわずかなばらつきがあるため、フラグのチェックをわずかに1秒遅らせる必要があります（これらのミリ秒の値をテストできます）。したがって、たとえば、イベントが発生してコードが実行されたときにまだ発生していない可能性があるため、ハンドラーコードをmouseoutたとえば333ミリ秒遅らせる必要があります。listdel mouseoverdel mouseout

  4. また、追加のポイントについては、これらの遅延と条件を使用して、よりスムーズなUIを提供できます。mouseoutたぶん、ユーザーがランダムな曲がりくねった動きによって、画像を表示するために関心のある領域をわずかに離れたが、その後、たとえば500ms以内に戻ってきたときに、ある程度の許容範囲を許可します-フラグとハンドラーのチェックを遅らせると、この種の偶発的な終了は許容できます。しかし、UIデザインのその部分は、あなたにとって有用なもの次第です。

    また、この行は問題を引き起こしている可能性があります： del.style.visibility = "hidden"; あなたはそれを元に戻したことがありvisibleますか？そうでない場合、あなたのデルは表示されません。不透明度は可視性と同じではありません。

于 2013-01-26T06:23:07.670 に答える