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 没有那么多经验，所以我制作了这个脚本的四个副本。每个#screen-frameX 一个

这是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

您是否尝试过正常的悬停功能？

$('#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 回答
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 回答