基于jQuery相机快门特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是基于jQuery相机快门特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>&quot;Shutter Effect&quot; with Canvas and jQuery | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="assets/jquery.shutter/jquery.shutter.css" />
</head>
<body>
<div id="top"></div>
<div id="page">
	<h1>Shutter Folio Photography</h1>
	<div id="container">
    	<ul>
        	<li><img src="assets/img/photos/1.jpg" width="640" height="400" alt="Landscape" /></li>
            <li><img src="assets/img/photos/2.jpg" width="640" height="400" alt="Yacht club" /></li>
            <li><img src="assets/img/photos/3.jpg" width="640" height="400" alt="Desert" /></li>
            <li><img src="assets/img/photos/4.jpg" width="640" height="400" alt="Machinery" /></li>
        </ul>
    </div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script src="assets/jquery.shutter/jquery.shutter.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	var container = $('#container'),li = container.find('li');
	// Using the tzShutter plugin. We are giving the path// to he shutter.png image in the plugin folder and two// callback functions.container.tzShutter({
	imgSrc:'assets/jquery.shutter/shutter.png',closeCallback:function(){
	// Cycling the visibility of the li items to// create a simple slideshow.li.filter(':visible:first').hide();
	if(li.filter(':visible').length == 0){
	li.show();
}
// Scheduling a shutter open in 0.1 seconds:setTimeout(function(){
	container.trigger('shutterOpen')}
,100);
}
,loadCompleteCallback:function(){
	setInterval(function(){
	container.trigger('shutterClose');
}
,4000);
	container.trigger('shutterClose');
}
}
);
}
);

CSS代码(styles.css):

*{margin:0;padding:0;}
html{background:url('../img/bg_tile.jpg') repeat;}
body{background:url('../img/bg_vert.jpg') repeat-x;font:13px/1.3 'Segoe UI',Arial,sans-serif;color:#999;}
#top{background:url('../img/top.jpg') repeat-x;height:31px;}
#page{background:url('../img/header.jpg') no-repeat center top;width:650px;}
h1{background:url('../img/logo.png') no-repeat;text-indent:-999999px;overflow:hidden;height:52px;margin:75px 0;}
#container{width:640px;height:400px;margin:0 auto;border:5px solid #fff;overflow:hidden;-moz-box-shadow:0 0 10px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);box-shadow:0 0 10px rgba(0,0,0,0.3);}
#container ul{list-style:none;}
#page{width:660px;margin:0 auto;border-top:1px solid transparent;}
.credit{text-align:center;padding:20px 0 100px;font-size:10px;}
a,a:visited{text-decoration:none;outline:none;color:#97cae6;}
a:hover{text-decoration:underline;}
#footer{background-color:#212121;position:fixed;width:100%;height:70px;bottom:0;left:0;z-index:100000;}
#footer h2{font-size:20px;font-weight:normal;left:50%;margin-left:-400px;padding:22px 0;position:absolute;width:400px;color:#eee;}
#footer a.tzine,a.tzine:visited{background:url("../img/tzine.png") no-repeat right top;border:none;text-decoration:none;color:#FCFCFC;font-size:12px;height:70px;left:50%;line-height:31px;margin:23px 0 0 110px;position:absolute;top:0;width:290px;}

附件:下载该文件资源,减少时间成本(增值服务)