javascript - jQuery 自定义快门

Question

我有一个带有网络摄像头的识别站点。在 this tutorial有良好的快门效果。我有一个简单的按钮和一个 <div> 。 我希望当单击按钮时 div 被关闭。我尝试了很多次，但我做不到。 有人可以帮助我吗？

我的划分风格。

<div id="CustomWebCam" class="CustomWebCam">

.CustomWebCam{
            padding: 1px 1px 1px 1px;
            background-color: #f6c0c0;
            height: 96%;
            width: 900px;
            display: inline-block;
            margin: 1% 1% 1% 1%;

}

Answer 1

只需链接库和 CSS:

<link href="your-path/jquery.shutter.css" type="text/css" rel="stylesheet">
<script src="your-path/jquery.shutter.js">

按钮:

<button id="btn" onclick="onClick();"> Shutter </button>

JS:

$(document).ready(function(){

    var container = $('#container');

    container.tzShutter({

        imgSrc: 'http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/jquery.shutter/shutter.png',

        closeCallback: function(){

            /* AFTER CLOSE */

            // Scheduling a shutter open in 0.1 seconds ( time that keep closed )
            setTimeout(function(){container.trigger('shutterOpen')},100);
        },
    });
});


function onClick(){
    $("#container").trigger('shutterClose');
};

Working example .