入門相機狀柵閃光效果的按鈕點擊與HTML5和jQuery

Question

$('#btn').on('click', function(e) { 
 
    $('#skm_LockPane').addClass('LockOn'); 
 
    var millisecondsToWait = 100; 
 
    setTimeout(function() { 
 
    $('#skm_LockPane').removeClass('LockOn'); 
 
    }, millisecondsToWait); 
 

 
});

.LockOff { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 
.LockOn { 
 
    overflow: hidden; 
 
    display: block; 
 
    visibility: visible; 
 
    position: absolute; 
 
    z-index: 999; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    text-align: center; 
 
    padding-top: 20%; 
 
    filter: alpha(opacity=75); 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="skm_LockPane" class="LockOff"></div> 
 
<button id="btn">Click!</button>

我使用getUserMedia獲取圖像和HTML5上的按鈕「咔嚓！」。點擊按鈕時，我需要在屏幕上顯示閃光燈等本機相機。我嘗試使用上面的代碼，但它仍然缺乏這種感覺。嘗試以下鏈接，我想要一個類似於此的效果：Demo

Answer 1

您可以使用快速CSS過渡和聲音。效果「感覺」在全屏

$('button').click(function() { 
 
    $('#shutter').addClass('on'); 
 
    $('audio')[0].play(); 
 
    setTimeout(function() { 
 
    $('#shutter').removeClass('on'); 
 
    }, 30*2+45);/* Shutter speed (double & add 45) */ 
 
});

body { 
 
    background-image: url(http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/03/wood-textures-high-quality-1.jpg); 
 
    margin: 0; 
 
} 
 
#shutter { 
 
    opacity: 0; 
 
    transition: all 30ms ease-in;/* Shutter speed */ 
 
    position: fixed; 
 
    height: 0%; 
 
    width: 0%; 
 
    pointer-events: none; 
 

 
    background-color: white;/* Shutter Color */ 
 
    
 
    left:50%; 
 
    top:50%; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%) 
 
} 
 
#shutter.on { 
 
    opacity: 1;/* Shutter Transparency */ 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<audio src="http://www.soundjay.com/mechanical/camera-shutter-click-08.mp3"></audio> 
 
<div id="shutter"></div> 
 
<button>Click!</button>