close the light.. 给body的mousemove绑定事件，移动aperture_track的位置{其内部四子相对于上下左右，中间留白.} 同时，对于aperture-top等是在track图片的四周部分，利用rgba来设定0.8黑.

aperture.html

<div id="aperture-wrap" style="width:1160px;height:1px;pointer-events: none;">
    <div style="position: fixed; width: 100%; height: 100%; z-index: 99998; top: 0px; left: 0px; background-color: black; opacity: 0.8; display: none;"></div>
    <div style="position: absolute; background-image: url(http://a.xnimg.cn/imgpro/onehour2/where.png); width: 434px; height: 215px; z-index: 99999; zoom: 1; left: 477px; top: 219.5px; display: none; background-position: initial initial; background-repeat: initial initial;"></div>
    <div id="aperture-track" style="position: absolute; z-index: 99999; top: -183px; left: -249px; display: none;">
        <div style="position: absolute; background-image: url(http://a.xnimg.cn/imgpro/onehour2/aperture-top.png); width: 548px; height: 269px; background-position: initial initial; background-repeat: initial initial;"></div>
        <div style="position: absolute; background-image: url(http://a.xnimg.cn/imgpro/onehour2/aperture-left.png); top: 269px; width: 264px; height: 20px; background-position: initial initial; background-repeat: initial initial;"></div>
        <div style="position: absolute; background-image: url(http://a.xnimg.cn/imgpro/onehour2/aperture-right.png); left: 284px; top: 269px; width: 264px; height: 20px; background-position: initial initial; background-repeat: initial initial;"></div>
        <div style="position: absolute; background-image: url(http://a.xnimg.cn/imgpro/onehour2/aperture-bottom.png); top: 289px; width: 548px; height: 259px; background-position: initial initial; background-repeat: initial initial;"></div>
    </div>
    <div id="aperture-top" style="background-color: black; position: absolute; width: 1363px; height: 0px; top: 0px; left: 0px; z-index: 99998; opacity: 0.8; display: none;"></div>
    <div id="aperture-left" style="background-color: black; position: absolute; width: 0px; height: 9632px; top: -183px; left: 0px; z-index: 99998; opacity: 0.8; display: none;"></div>
    <div id="aperture-right" style="background-color: black; position: absolute; width: 1064px; height: 9632px; top: -183px; left: 299px; z-index: 99998; opacity: 0.8; display: none;"></div>
    <div id="aperture-bottom" style="background-color: black; position: absolute; width: 548px; height: 9084px; top: 365px; left: -249px; z-index: 99998; opacity: 0.8; display: none;"></div>
    <div style="position: absolute; pointer-events: auto; background-image: url(http://a.xnimg.cn/imgpro/onehour2/light-renren-close.png); width: 50px; height: 90px; top: 40px; left: 142px; z-index: 99999; cursor: pointer; background-position: initial initial; background-repeat: initial initial;"></div>
    <div style="position: absolute; pointer-events: auto; background-image: url(http://a.xnimg.cn/imgpro/onehour2/right.png); width: 103px; height: 85px; z-index: 99999; cursor: pointer; left: 1172px; top: 40px; background-position: initial initial; background-repeat: initial initial;"></div>
    <div style="display: none; position: absolute; pointer-events: auto; background-image: url(http://a.xnimg.cn/imgpro/onehour2/more.png); width: 103px; height: 85px; z-index: 99999; cursor: pointer; left: 1172px; top: 40px; background-position: initial initial; background-repeat: initial initial;"></div>
</div>