0

最近、ウェブカメラ アプリケーションを作成しました。こちらをご覧ください：http://kennipoke.dk/nickelodeon/da/docs/webcam.php

上部には 4 つのヘルメットがあり、クリックすると ?helmet=X が URI に追加されます。

実際のウェブカメラ画面の上に、選択したヘルメットを透明にして表示し、自分の顔が透けて見えるようにします。

画像は、撮影ボタンをホバーしたときにのみ表示されます。

これで、IE を除いてすべてが機能するようになりました!!!!!!

関連するコードは次のとおりです。

<div id="camera">
    <div id="screen-frame<?php echo $helmet ?>"></div>
    <div id="screen"></div>
    <div id="buttons">
         <div class="buttonPane">
           <a id="shootButton" href="" class="blueButton btn btn-info">Hold musen over denne knap og tag et billede</a>
         </div>
         <div class="buttonPane hidden">
               <a id="cancelButton" href="" class="blueButton btn btn-danger">Tag et nyt</a> <a id="uploadButton" href="" class="greenButton btn btn-info">Videre</a>
         </div>
    </div>
    <span class="settings"></span>
</div>

もちろん $helmet は URI の値です

$('#shootButton').mouseover(function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
});
$('#shootButton').mouseout(function() {
    $('#screen-frame1').removeClass('show').addClass('hide');

私は jQuery の経験が少ないので、このスクリプトのコピーを 4 つ作成しました。#screen-frameX ごとに 1 つ

CSSは次のとおりです。

#camera{
    background:url('../img/cam_bg.jpg') repeat-y;
    border:1px solid #f0f0f0;
    height:370px;
    width:520px;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    border-radius:4px 4px 0 0;
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6);
    box-shadow:0 0 4px rgba(0,0,0,0.6);
    margin: 130px 30px 0;
    position: relative;
    z-index: 5;
}

#screen{
    width:520px;
    height:370px;
    background:#ccc;
    line-height: 360px;
    text-align: center;
    color:#666;
}

#screen-frame1 {
    background: url("../img/overlay/transparent/helmet-t-1.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame2 {
    background: url("../img/overlay/transparent/helmet-t-2.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame3 {
    background: url("../img/overlay/transparent/helmet-t-3.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame4 {
    background: url("../img/overlay/transparent/helmet-t-4.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}


.hide {
    height:0;
}

.show {
    height:370px;
}

IEでこれが誤動作する原因となる問題を誰かが見つけることができますか?

4

3 に答える 3

0

試す ：

$('#shootButton').mouseenter(function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
});
$('#shootButton').mouseleave(function() {
    $('#screen-frame1').removeClass('show').addClass('hide');
于 2012-08-19T15:44:53.560 に答える
0

私の理解では、あなたのコンテンツは動的にロードされていますか? 単一のホバーではなく、.live を使用してみてください。

$('#shootButton').live('hover', function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
}, function() {
    $('#screen-frame1').removeClass('show').addClass('hide');
});
于 2012-08-19T14:12:32.417 に答える
0

通常のホバー機能は試しましたか？

$('#shootButton').hover(function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
}, function() {
    $('#screen-frame1').removeClass('show').addClass('hide');
});

編集：

showおよびhideクラスに次の CSS を試してください。

.show {
   display: block;
   height: 370px;
}
.hide {
   display: none;
   height: 0px;
}

heightプロパティを変更する必要さえないかもしれません.IEでもこれでうまくいくはずです.

于 2012-08-19T13:01:24.197 に答える