模拟相机拍照的图片特效特效代码

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

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

以下是模拟相机拍照的图片特效特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asdfasd</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="photoShoot/jquery.photoShoot-1.0.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="photoShoot/jquery.photoShoot-1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body style="text-align:center">
<div id="main">
<h1>Making a Photoshoot Effect With jQuery &amp; CSS</h1>
</div>
</body>
</html>

JS代码(jquery.photoShoot-1.0.js):

/*! * jquery.photoShoot.js - Photo Shoot jQuery Plugin * * Copyright (c) 2009 Martin Angelov * http://tutorialzine.com/ * download by http://sc.xueit.com * Licensed under MIT * http://www.opensource.org/licenses/mit-license.php * * Launch:January 2010 * Version:1.0 * Released:Monday 29th January,2010 - 00:00 */
(function($){
	$.fn.photoShoot = function(options){
	return this.each(function(){
	var settings = $.extend({
	viewFinder:{
	width:300,height:200,img:''}
,image:'',blurLevel:4,opacity:0.92,onClick:function(){
}
}
,options);
	var scriptPath = '';
	$('script').each(function(){
	var src = $(this).attr('src');
	if(!src) return true;
	if(src.match(/jquery\.photoShoot/i)){
	scriptPath = src.replace(/[^\/]+$/,'');
	return false;
}
}
)if(!settings.viewFinder.img){
	settings.viewFinder.img = scriptPath + 'viewfinder.png';
}
var main = $(this);
	main.css('background','url('+settings.image+') no-repeat').addClass('container');
	settings.stage ={
	width:main.width(),height:main.height()}
;
	for(var i=0;
	i<10;
	i++){
	$('<div class="blur">').css({
	opacity:0.15,left:Math.round(-settings.blurLevel+(settings.blurLevel*2)*Math.random()),top:Math.round(-settings.blurLevel+(settings.blurLevel*2)*Math.random()),background:'url('+settings.image+') no-repeat',width:settings.stage.width+'px',height:settings.stage.height+'px'}
).appendTo(main);
}
var overlay = $('<div class="overlay">').css({
	opacity:1-settings.opacity}
).appendTo(main);
	if(navigator.userAgent.indexOf('Chrome')!=-1){
	main.addClass('googleChrome');
}
else if(navigator.userAgent.indexOf('MSIE')!=-1){
	main.css('cursor','url('+scriptPath+'/blank.cur),default');
}
var vf = $('<div class="viewFinder">').css({
	background:'url('+settings.image+') no-repeat',width:settings.viewFinder.width+'px',height:settings.viewFinder.height+'px'}
).html('<img src="'+settings.viewFinder.img+'" width="'+settings.viewFinder.width+'" height="'+settings.viewFinder.height+'" />').appendTo(main);
	var offSet = main.offset();
	var n_left,n_top;
	main.mousemove(function(e){
	n_left = (e.pageX-offSet.left)-settings.viewFinder.width/2;
	n_top = (e.pageY-offSet.top)-settings.viewFinder.height/2;
	if(n_left<0 || n_top<0) return false;
	if(n_left+settings.viewFinder.width >=settings.stage.width || n_top+settings.viewFinder.height >= settings.stage.height) return false;
	vf.css({
	left:n_left,top:n_top,backgroundPosition:'-'+n_left+'px -'+n_top+'px'}
);
}
).click(function(){
	settings.onClick({
	left:parseInt(vf.css('left')),top:parseInt(vf.css('top')),width:settings.viewFinder.width,height:settings.viewFinder.height}
);
}
);
}
)}
}
)(jQuery);

JS代码(script.js):

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
// Assigning the jQuery object to a variable for speed:var main = $('#main');
	// Setting the width of the photoshoot area to// 1024 px or the width of the document - whichever is smallest:// download by http://sc.xueit.commain.width(Math.min(1024,$(document).width()));
	// Creating an array with four possible backgrounds and their sizes:var pics = new Array({
	url:'images/01.jpg',size:{
	x:1024,y:677}
}
,{
	url:'images/02.jpg',size:{
	x:1024,y:768}
}
,{
	url:'images/03.jpg',size:{
	x:1024,y:768}
}
,{
	url:'images/04.jpg',size:{
	x:1158,y:756}
}
);
	// Choosing a random picture to be passed to the PhotoShoot jQuery plug-in:var bg = pics[parseInt(Math.random()*4)];
	// Creating an options object (try tweeking the variables):var opts ={
	image:bg.url,onClick:shoot,opacity:0.8,blurLevel:4}
// Converting the #main div to a photoShoot stage:main.photoShoot(opts);
	// Adding the album holder to the stage:$('<div class="album">').html('<div class="slide" />').appendTo(main);
	// Our own shoot function (it is passed as onClick to the options array above):function shoot(position){
	// This function is called by the plug-in when the button is pressed// Setting the overlay's div to white will create the illusion of a camera flash:main.find('.overlay').css('background-color','white');
	// The flash will last for 100 milliseconds (a tenth of the second):setTimeout(function(){
	main.find('.overlay').css('background-color','')}
,100);
	// Creating a new shot image:var newShot = $('<div class="shot">').width(150).height(100);
	newShot.append( $('<img src="'+bg.url+'" width="'+(bg.size.x/2)+'" height="'+(bg.size.y/2)+'" />').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') );
	// Removing the fourth shot (the count starts from 0):$('.shot').eq(3).remove();
	// Adding the newly created shot to the album div,but moved 160px to the right.// We start an animation to slide it in view:newShot.css('margin-right',-160).prependTo('.album .slide').animate({
	marginRight:0}
,'slow');
}
}
);

CSS代码(jquery.photoShoot-1.0.css):

.container{overflow:hidden;cursor:url(blank.cur),default;position:relative;}
/* download by http://sc.xueit.com*/
.container.googleChrome{cursor:url(blank_google_chrome.cur),default;}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:black;}
.viewFinder{position:absolute;top:0;left:0;}
.blur{position:absolute;top:0;left:0;}

CSS代码(styles.css):

body,h1,h2,h3,quote,small,form,input,ul,li,ol,label{/* Simple page reset download by http://sc.xueit.com*/
margin:0;padding:0;}
body{/* Setting default text color,background and a font stack */
color:#fcfcfc;font-size:0.825em;background-color:#011d2e;font-family:Arial,Helvetica,sans-serif;}
#main{/* This div is converted to a photoShoot stage by the Photo Shoot plug-in */
margin:0 auto;width:960px;height:600px;}
.shot{/* These contain a scaled down version of the background image:*/
border:3px solid #FCFCFC;float:right;position:relative;margin-left:10px;overflow:hidden;/* Adding a CSS3 shadow below the shots:*/
-moz-box-shadow:0 0 2px black;-webkit-box-shadow:0 0 2px black;box-shadow:0 0 2px black;}
.shot img{display:block;}
.album{/* This div holds the shots */
bottom:50px;height:110px;overflow:hidden;position:absolute;right:20px;width:490px;}
.album .slide{/* The slide div is contained in album */
width:700px;height:110px;position:relative;left:-210px;}
/* The styles below are only necessary for the styling of the demo page:*/
h1{background-color:#022f4a;border:1px solid #011d2e;font-size:1.5em;font-weight:normal;padding:15px;position:absolute;right:0;text-align:center;z-index:20;}
a,a:visited{color:#0196e3;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
p.tutInfo{/* The tutorial info on the bottom of the page */
padding:10px 0;text-align:center;position:fixed;bottom:0px;background-color:#011D2E;border-top:1px solid #011d2e;width:100%;}
h1,h2,p.tutInfo{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;}

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