jQuery+CSS3制作全屏狭缝焦点广告特效代码

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

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

以下是 jQuery+CSS3制作全屏狭缝焦点广告特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Fullscreen Slit Slider with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
        <meta name="keywords" content="fullscreen, slideshow, slider, slit, opens, cuts, css3, jquery, transition, animation, jquery, tutorial, web development, component, plugin" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
		<!--<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css' />-->
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="js/modernizr.custom.04022.js"></script> 
		<![endif]-->
		<!--[if lt IE 8]>
			<style>.ie-note{display:block;}</style>
		<![endif]-->
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
		</noscript>
    </head>
    <body>
        <div class="container">
		
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <span class="right">
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			<div class="ie-note">Not supported by your browser</div>
			
			<section id="sl-slider" class="sl-slider">
			
				<div class="sl-slide" data-orientation="horizontal" data-cut1-rotation="-25" data-cut2-rotation="-25" data-cut1-scale="2" data-cut2-scale="2">
					<div class="sl-deco" data-icon="6"></div>
					<h2>A bene placito</h2>
					<blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
				</div>
				
				<div class="sl-slide sl-slide-dark" data-orientation="vertical" data-cut1-rotation="10" data-cut2-rotation="-15" data-cut1-scale="1.5" data-cut2-scale="1.5">
					<div class="sl-deco" data-icon="q"></div>
					<h2>Regula aurea</h2>
					<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
				</div>
				
				<div class="sl-slide sl-slide-color-1" data-orientation="horizontal" data-cut1-rotation="3" data-cut2-rotation="3" data-cut1-scale="2" data-cut2-scale="1">
					<div class="sl-deco" data-icon="O"></div>
					<h2>Dum spiro, spero</h2>
					<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
				</div>
				
				<div class="sl-slide sl-slide-color-2" data-orientation="vertical" data-cut1-rotation="-5" data-cut2-rotation="25" data-cut1-scale="2" data-cut2-scale="1">
					<div class="sl-deco" data-icon="I"></div>
					<h2>Donna nobis pacem</h2>
					<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
				</div>
				
				<div class="sl-slide sl-slide-color-3" data-orientation="horizontal" data-cut1-rotation="-5" data-cut2-rotation="10" data-cut1-scale="2" data-cut2-scale="1">
					<div class="sl-deco" data-icon="t"></div>
					<h2>Acta Non Verba</h2>
					<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
				</div>
			
			</section>
			
        </div>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
		<script type="text/javascript" src="js/jquery.transit.min.js"></script>
		<script type="text/javascript" src="js/jquery.slitslider.js"></script>
		<script type="text/javascript">	
			$(function() {
			
				$( '#sl-slider' ).slitslider();
			
			});
		</script>
	</body>
</html>

JS代码(modernizr.custom.04022.js):

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-shiv-cssclasses-load */
;
	window.Modernizr=function(a,b,c){
	function u(a){
	j.cssText=a}
function v(a,b){
	return u(prefixes.join(a+";
	")+(b||""))}
function w(a,b){
	return typeof a===b}
function x(a,b){
	return!!~(""+a).indexOf(b)}
function y(a,b,d){
	for(var e in a){
	var f=b[a[e]];
	if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}
return!1}
var d="2.5.3",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m={
}
,n={
}
,o={
}
,p=[],q=p.slice,r,s={
}
.hasOwnProperty,t;
	!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){
	return s.call(a,b)}
:t=function(a,b){
	return b in a&&w(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=q.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(q.call(arguments)));
	return Object(g)===g?g:f}
return c.apply(b,d.concat(q.call(arguments)))}
;
	return e}
);
	for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));
	return u(""),i=k=null,function(a,b){
	function g(a,b){
	var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
	return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function h(){
	var a=k.elements;
	return typeof a=="string"?a.split(" "):a}
function i(a){
	var b={
}
,c=a.createElement,e=a.createDocumentFragment,f=e();
	a.createElement=function(a){
	var e=(b[a]||(b[a]=c(a))).cloneNode();
	return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e}
,a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+h().join().replace(/\w+/g,function(a){
	return b[a]=c(a),f.createElement(a),'c("'+a+'")'}
)+");
	return n}
")(k,f)}
function j(a){
	var b;
	return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
	display:block}
audio{
	display:none}
canvas,video{
	display:inline-block;
	*display:inline;
	*zoom:1}
[hidden]{
	display:none}
audio[controls]{
	display:inline-block;
	*display:inline;
	*zoom:1}
mark{
	background:#FF0;
	color:#000}
")),f||(b=!i(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;
	(function(){
	var a=b.createElement("a");
	a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){
	try{
	b.createElement("a")}
catch(a){
	return!0}
var c=b.createDocumentFragment();
	return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
	var k={
	elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j}
;
	a.html5=k,j(b)}
(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}
(this,this.document),function(a,b,c){
	function d(a){
	return o.call(a)=="[object Function]"}
function e(a){
	return typeof a=="string"}
function f(){
}
function g(a){
	return!a||a=="loaded"||a=="complete"||a=="uninitialized"}
function h(){
	var a=p.shift();
	q=1,a?a.t?m(function(){
	(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
	function k(b){
	if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
	a!="img"&&m(function(){
	t.removeChild(l)}
,50);
	for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l={
}
,o=0,r=0,u={
	t:d,s:c,e:f,a:i,x:j}
;
	y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
	k.call(this,r)}
,p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
	return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}
function k(){
	var a=B;
	return a.loader={
	load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
	return o.call(a)=="[object Array]"}
,x=[],y={
}
,z={
	timeout:function(a,b){
	return b.length&&(a.timeout=b[0]),a}
}
,A,B;
	B=function(a){
	function b(a){
	var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
	url:c,origUrl:c,prefixes:a}
,e,f,g;
	for(f=0;
	f<d;
	f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
	for(f=0;
	f<b;
	f++)c=x[f](c);
	return c}
function g(a,e,f,g,i){
	var j=b(a),l=j.autoCallback;
	j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){
	k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2}
)))}
function i(a,b){
	function c(a,c){
	if(a){
	if(e(a))c||(j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
),g(a,j,b,0,h);
	else if(Object(a)===a)for(n in m=function(){
	var b=0,c;
	for(c in a)a.hasOwnProperty(c)&&b++;
	return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
:j[n]=function(a){
	return function(){
	var b=[].slice.call(arguments);
	a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
	c(h?a.yep:a.nope,!!i),i&&c(i)}
var j,l,m=this.yepnope.loader;
	if(e(a))g(a,0,m,0);
	else if(w(a))for(j=0;
	j<a.length;
	j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);
	else Object(a)===a&&i(a,m)}
,B.addPrefix=function(a,b){
	z[a]=b}
,B.addFilter=function(a){
	x.push(a)}
,B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
	b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
	var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
	k.src=a;
	for(o in d)k.setAttribute(o,d[o]);
	c=j?h:c||f,k.onreadystatechange=k.onload=function(){
	!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
	l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
	var e=b.createElement("link"),j,c=i?h:c||f;
	e.href=a,e.rel="stylesheet",e.type="text/css";
	for(j in d)e.setAttribute(j,d[j]);
	g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
	yepnope.apply(window,[].slice.call(arguments,0))}
;

CSS代码(demo.css):

@import url('normalize.css');@font-face{font-family:'AnimalsNormal';src:url('fonts/animals-webfont.eot');src:url('fonts/animals-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/animals-webfont.woff') format('woff'),url('fonts/animals-webfont.ttf') format('truetype'),url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');font-weight:normal;font-style:normal;}
/* General Demo Style */
body{font-family:Georgia,serif;background:#ddd;font-weight:400;font-size:15px;color:#333;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;font-smoothing:antialiased;overflow:hidden;}
a{color:#555;text-decoration:none;}
.clr{clear:both;padding:0;height:0;margin:0;}
/* Header Style */
.codrops-top{line-height:24px;font-size:10px;text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#aaa;display:inline-block;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.ie-note{color:#7b0c31;font-size:30px;text-align:center;padding:20px;display:none;}

CSS代码(styleNoJS.css):

body{overflow:auto;}
.sl-slider{position:absolute;width:100%;height:100%;top:0;left:0;font-family:'Montserrat',Arial,sans-serif;}
/* Slide wrapper and slides */
.sl-slide,.sl-slides-wrapper{position:relative;width:100%;height:100%;background:#fff;}
.sl-slide blockquote{width:50%;left:25%;}
/* Dark slides */
.sl-slide-dark{background:#000;}
/* Color 1 slides */
.sl-slide-color-1{background:#8d0f39;}
/* Color 2 slides */
.sl-slide-color-2{background:#ade1f4;}
/* Color 2 slides */
.sl-slide-color-3{background:#ffeb41;}

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