javascript - jQuery自定义快门

我有一个带有摄像头的识别站点。在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%;

}

最佳答案

只需链接库和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。