jquery画中画切换特效js代码

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

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

以下是 jquery画中画切换特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>jquery画中画切换特效</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/modernizr.js" language="javascript"></script>
<script src="js/jquery.min.js" language="javascript"></script>
<script src="js/jquery.parallaxSlider.js" language="javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
	var easing = 'swing';
	$("#slider2").parallaxSlider({
		autoPlay:500,//false to disable, otherwise int duration in ms hold between slides
		speed:2000, //transition duration between slides
		easing: 'swing',
		numBackgrounds: 3,
		thumbRotation:false,
		//debug:true,
	});
	$("#slider").parallaxSlider({
		/* debug:true */
		}); 
})

</script>
<style>
#slider2 {
	position:relative;
}
</style>
</head>
<body>
 
<div id="slider" class="slider" >
	<div class="pxs_bg">
	</div>
	<!-- Background classes will be automatically generated, CSS must specify background images to use, see style.css for instructions -->
	<div class="pxs_loading">Loading images...</div>
	<div class="pxs_slider_wrapper">
		<ul class="pxs_slider">
			<li>
				<a href="#"><!-- Images may be wrapped in an anchor to make them clickable -->
					<img src="images/featured_011.jpg" height="250" width="940" title="Interactive Marketing" alt="Interactive Marketing" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/featured_012.jpg" title="WHMCS Services" height="250" width="940" alt="WHMCS Services" />
				</a>
			</li>
			<li>
				<img src="images/featured_013.jpg" title="Website Design" height="250" width="940" alt="Website Design" />
			</li>
			<li>
				<img src="images/featured_014.jpg" title="Web Hosting" height="250" width="940" alt="Web Hosting" />
			</li>
		</ul>
		<div class="pxs_navigation">
			<span class="pxs_next"></span>
			<span class="pxs_prev"></span>
		</div>
		<ul class="pxs_thumbnails">
			<li>
				<img src="images/featured_011-150x150.jpg" height="150" width="150" alt="Interactive Marketing" />
			</li>
			<li>
				<img src="images/featured_012-150x150.jpg" height="150" width="150" alt="WHMCS Services" />
			</li>
			<li>
				<img src="images/featured_013-150x150.jpg" height="150" width="150" alt="Website Design" />
			</li>
			<li>
				<img src="images/featured_014-150x150.jpg" height="150" width="150" alt="Web Hosting" />
			</li>
		</ul>
	</div><!-- End .pxs_slider_wrapper -->
</div>	
</body>
</html>

JS代码(modernizr.js):

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-cssanimations-csstransitions-testprop-testallprops-domprefixes */
;
	window.Modernizr=function(a,b,c){
	function w(a){
	i.cssText=a}
function x(a,b){
	return w(prefixes.join(a+";
	")+(b||""))}
function y(a,b){
	return typeof a===b}
function z(a,b){
	return!!~(""+a).indexOf(b)}
function A(a,b){
	for(var d in a)if(i[a[d]]!==c)return b=="pfx"?a[d]:!0;
	return!1}
function B(a,b,d){
	for(var e in a){
	var f=b[a[e]];
	if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}
return!1}
function C(a,b,c){
	var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+m.join(d+" ")+d).split(" ");
	return y(b,"string")||y(b,"undefined")?A(e,b):(e=(a+" "+n.join(d+" ")+d).split(" "),B(e,b,c))}
var d="2.5.3",e={
}
,f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={
}
.toString,l="Webkit Moz O ms",m=l.split(" "),n=l.toLowerCase().split(" "),o={
}
,p={
}
,q={
}
,r=[],s=r.slice,t,u={
}
.hasOwnProperty,v;
	!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){
	return u.call(a,b)}
:v=function(a,b){
	return b in a&&y(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
	var c=this;
	if(typeof c!="function")throw new TypeError;
	var d=s.call(arguments,1),e=function(){
	if(this instanceof e){
	var a=function(){
}
;
	a.prototype=c.prototype;
	var f=new a,g=c.apply(f,d.concat(s.call(arguments)));
	return Object(g)===g?g:f}
return c.apply(b,d.concat(s.call(arguments)))}
;
	return e}
),o.cssanimations=function(){
	return C("animationName")}
,o.csstransitions=function(){
	return C("transition")}
;
	for(var D in o)v(o,D)&&(t=D.toLowerCase(),e[t]=o[D](),r.push((e[t]?"":"no-")+t));
	return w(""),h=j=null,e._version=d,e._domPrefixes=n,e._cssomPrefixes=m,e.testProp=function(a){
	return A([a])}
,e.testAllProps=C,e}
(this,this.document);

CSS代码(style.css):

/*Slider Style*/
/*+clearfix{*/
#slider:after,UL.pxs_thumbnails:after,.pxs_actions:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
#slider,UL.pxs_thumbnails,.pxs_actions{display:inline-block;}
#slider,UL.pxs_thumbnails,.pxs_actions{/*\*/
display:block;/**/
-height:1px;}
/*+}
*/
BODY{margin:0;}
/*[clearfix]*/
#slider{width:85%;height:500px;position:relative;display:block;overflow:hidden !important;/*+box-shadow:0px 0px 30px #000;*/
-moz-box-shadow:0px 0px 30px #000;-webkit-box-shadow:0px 0px 30px #000;-o-box-shadow:0px 0px 30px #000;box-shadow:0px 0px 30px #000;margin-top:20px;margin-bottom:20px;/*+placement:margin-auto 0px 0px;*/
margin-left:auto;margin-right:auto;position:relative;left:0px;top:0px;}
.pxs_bg{background:transparent url(images/bg.png) repeat top left;height:100%;}
.pxs_bg DIV{position:absolute;top:0px;left:0px;width:7584px;/*1264px window width times number of images*/
height:500px;background-repeat:repeat;background-position:top left;background-color:transparent;}
/*Add a .pxs_bg# for each number of backgrounds specified in options.numBackgrounds*/
.pxs_bg .pxs_bg1{background-image:url(images/bg1.png);}
.pxs_bg .pxs_bg2{background-image:url(images/bg2.png);}
.pxs_bg .pxs_bg3{background-image:url(images/bg3.png);}
.pxs_slider_wrapper{display:none;}
UL.pxs_slider{position:absolute;left:0px;top:0px;height:420px;width:100%;padding:0;margin:0;}
UL.pxs_slider LI{float:left;list-style:none;position:relative;left:0px;text-align:center;margin-top:35px;}
UL.pxs_slider LI IMG{display:inline-block;border:10px solid rgba(251,249,205,0.3);/*+box-shadow:0px 0px 15px #000;*/
-moz-box-shadow:0px 0px 15px #000;-webkit-box-shadow:0px 0px 15px #000;-o-box-shadow:0px 0px 15px #000;box-shadow:0px 0px 15px #000;/*+border-radius:5px;*/
-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px 5px 5px 5px;text-align:center;}
/*[clearfix]*/
UL.pxs_thumbnails{height:160px;position:absolute;top:315px;width:100%;left:50%;padding:0;}
UL.pxs_thumbnails LI{position:absolute;display:block;}
UL.pxs_thumbnails LI IMG{border:5px solid #FFFFFF;cursor:pointer;/*+box-shadow:0px 0px 10px #000;*/
-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;-o-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;/*+opacity:70%;*/
filter:alpha(opacity=70);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);-moz-opacity:0.7;opacity:0.7;display:block;}
UL.pxs_thumbnails LI.selected IMG{/*+opacity:100%;*/
filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-moz-opacity:1;opacity:1;border-color:#09530D;}
.pxs_navigation SPAN{position:absolute;width:30px;height:60px;-moz-box-shadow:0px 0px 2px #000;-webkit-box-shadow:0px 0px 2px #000;box-shadow:0px 0px 2px #000;top:145px;/*+opacity:60%;*/
filter:alpha(opacity=60);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);-moz-opacity:0.6;opacity:0.6;cursor:pointer;/*+border-radius:5px;*/
-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px 5px 5px 5px;}
.pxs_navigation SPAN:hover{/*+opacity:100%;*/
filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-moz-opacity:1;opacity:1;}
.pxs_navigation SPAN.pxs_prev{background:#000 url(images/prev.png) no-repeat center center;}
.pxs_navigation SPAN.pxs_next{background:#000 url(images/next.png) no-repeat center center;}
.pxs_loading{color:#FFF;font-size:20px;padding:15px 15px 15px 50px;position:absolute;background:#333 url(images/ajax-loader.gif) no-repeat 10px 50%;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;opacity:0.7;width:180px;position:absolute;top:150px;left:50%;margin-left:-90px;}
/*[clearfix]*/
.pxs_actions{/*+placement:anchor-bottom-left 10px 10px;*/
position:absolute;left:10px;bottom:10px;display:block;width:38px;}
.pxs_pause,.pxs_play{/*+placement:float-left 0px 0px;*/
float:left;position:relative;left:0px;top:0px;border:1px solid #FFFFFF;width:20px;cursor:pointer;background-color:rgba(0,0,0,0.5);/*+opacity:70%;*/
filter:alpha(opacity=70);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);-moz-opacity:0.7;opacity:0.7;cursor:hand;text-indent:-10000em;background-image:url(images/play_pause.png);/*+border-radius:3px;*/
-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px 3px 3px 3px;height:20px;}
.pxs_pause:hover,.pxs_play:hover{border-color:#828282;background-color:#FFF;}
.pxs_pause{background-position:-15px -10px;}
.pxs_pause:hover{background-position:-15px -21px;}
.pxs_play{background-position:2px -10px;}
.pxs_play:hover{background-position:2px -21px;}
#birds{width:5%;height:auto;/*+placement:displace 0px 0px;*/
position:absolute;margin-left:0px;margin-top:0px;z-index:0;}
#birds IMG{width:30%;height:auto;z-index:0;/*+placement:anchor-top-left 0px 0px;*/
position:absolute;left:0px;top:0px;}
#birds #bird1{width:50%;left:2%;}
#birds #bird2{width:40%;top:30%;}
#birds #bird3{width:30%;left:64%;top:10%;}
#birds #bird4{width:20%;top:15%;left:100%;}

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