以下是 jQuery Immersive Slider插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Immersive Slider插件</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.immersive-slider.js"></script>
<link href='immersive-slider.css' rel='stylesheet' type='text/css'>
<style>
html {
height: 100%;
}
body {
background: #f3f3f3;
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2 {
width: 100%;
float: left;
}
h1 {
margin-top: 25px;
color: #000;
margin-bottom: 5px;
font-size: 50px;
letter-spacing: -4px;
}
h2 {
color: #444;
font-weight: 100;
margin-top: 0;
margin-bottom: 10px;
}
.pointer {
color: #9b59b6;
font-family: 'Pacifico', cursive;
font-size: 30px;
margin-top: 15px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-width: 500px;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
background: #161923;
}
.main h1 {
padding:20px 50px;
float: left;
width: 100%;
font-size: 90px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
color: black;
margin: 0;
margin-top: 70px;
font-family: 'Playfair Display';
letter-spacing: -1px;
}
.main h1.demo1 {
background: #1ABC9C;
}
.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.reload, .btn{
display: inline-block;
border: 4px solid #A2261E;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #CC3126;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
color: #fff;
width: 100px;
line-height: 140%;
font-size: 17px;
font-family: open sans;
font-weight: bold;
}
.reload:hover{
background: #A2261E;
}
.btn {
width: 200px;
color: #fff;
border: none;
margin-left: 10px;
background: black;
}
.clear {
width: auto;
}
.btn:hover, .btn:hover {
background: rgba(0,0,0,0.8);
}
.btns {
width: 410px;
margin: 50px auto;
}
.credit {
text-align: center;
color: #444;
padding: 10px;
margin: 0 0 0 0;
background: #161923;
color: #FFF;
float: left;
width: 100%;
}
.credit a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: rgba(255, 255, 255, 0.25);
font-weight: bold;
font-size: 13px;
color: #000;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
color: black;
background: rgba(255, 255, 255, 0.5);
}
.page_container {
max-width: 960px;
margin: 50px auto;
}
.header {
background: white;
padding-top: 10px;
margin-bottom: 0;
}
.header h1{
margin-bottom: 0;
font-size: 45px;
}
.header .menu {
padding-bottom: 10px;
}
.benefits {
color: black;
height: 100px;
background: #FFF;
position: relative;
width: 100%;
padding: 25px;
font-size: 40px;
font-weight: 100;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.benefits .page_container{
margin-bottom: 50px;
margin-top: 0;
}
.immersive_slider .is-slide .content h2{
line-height: 140%;
font-weight: 100;
color: white;
font-weight: 100;
}
.immersive_slider .is-slide .content a {
color: white;
}
.immersive_slider .is-slide .content p{
float: left;
font-weight: 100;
width: 100%;
font-size: 17px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="page_container">
<div id="immersive_slider">
<div class="slide" data-blurred="img/slide1_blurred.jpg">
<div class="content">
<h2><a href="#" target="_blank">BucketListly</a></h2>
<p>It’s never been easier to watch YouTube on the big screen
Send your favorite YouTube videos from your Android phone or tablet to TV with the touch of a button. It’s easy. No wires, no setup, no nothing. Find out more here.</p>
</div>
<div class="image">
<a href="#" target="_blank">
<img src="img/slide1.jpg" alt="Slider 1">
</a>
</div>
</div>
<div class="slide" data-blurred="img/slide2_blurred.jpg">
<div class="content">
<h2>BucketListly Apps</h2>
<p>It’s never been easier to watch YouTube on the big screen
Send your favorite YouTube videos from your Android phone or tablet to TV with the touch of a button. It’s easy. No wires, no setup, no nothing. Find out more here.</p>
</div>
<div class="image">
<a href="#/" target="_blank"> <img src="img/slide2.jpg" alt="Slider 1"></a>
</div>
</div>
<div class="slide" data-blurred="img/slide3_blurred.jpg">
<div class="content">
<h2><a href="#" target="_blank">The Pete Design</a></h2>
<p>It’s never been easier to watch YouTube on the big screen
Send your favorite YouTube videos from your Android phone or tablet to TV with the touch of a button. It’s easy. No wires, no setup, no nothing. Find out more here.</p>
</div>
<div class="image">
<a href="#" target="_blank"><img src="img/slide3.jpg" alt="Slider 1"></a>
</div>
</div>
<a href="#" class="is-prev">«</a>
<a href="#" class="is-next">»</a>
</div>
</div>
</div>
<div class="benefits">
<div class="page_container">
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("#immersive_slider").immersive_slider({
container: ".main"
});
});
</script>
</div>
</body>
</html>
JS代码(jquery.immersive-slider.min.js):
!function(e){
var t={
animation:"bounce",slideSelector:".slide",container:".main",cssBlur:false,pagination:true,loop:true,autoStart:4e3}
;
e.fn.swipeEvents=function(){
return this.each(function(){
function i(e){
var i=e.originalEvent.touches;
if(i&&i.length){
t=i[0].pageX;
n=i[0].pageY;
r.bind("touchmove",s)}
e.preventDefault()}
function s(e){
var i=e.originalEvent.touches;
if(i&&i.length){
var o=t-i[0].pageX;
var u=n-i[0].pageY;
if(o>=50){
r.trigger("swipeLeft")}
if(o<=-50){
r.trigger("swipeRight")}
if(u>=50){
r.trigger("swipeUp")}
if(u<=-50){
r.trigger("swipeDown")}
if(Math.abs(o)>=50||Math.abs(u)>=50){
r.unbind("touchmove",s)}
}
e.preventDefault()}
var t,n,r=e(this);
r.bind("touchstart",i)}
)}
;
e.fn.transformSlider=function(t,n){
var r=e(this);
switch(t.animation){
case"slide":r.addClass("ease").css({
"-webkit-transform":"translate3d("+n+"%,0,0)","-moz-transform":"translate3d("+n+"%,0,0)","-ms-transform":"translate3d("+n+"%,0,0)",transform:"translate3d("+n+"%,0,0)"}
);
break;
case"slideUp":r.addClass("ease").css({
"-webkit-transform":"translate3d(0,"+n+"%,0)","-moz-transform":"translate3d(0,"+n+"%,0)","-ms-transform":"translate3d(0,"+n+"%,0)",transform:"translate3d(0,"+n+"%,0)"}
);
break;
case"bounce":r.addClass("bounce").css({
"-webkit-transform":"translate3d("+n+"%,0,0)","-moz-transform":"translate3d("+n+"%,0,0)","-ms-transform":"translate3d("+n+"%,0,0)",transform:"translate3d("+n+"%,0,0)"}
);
break;
case"bounceUp":r.addClass("bounce").css({
"-webkit-transform":"translate3d(0,"+n+"%,0)","-moz-transform":"translate3d(0,"+n+"%,0)","-ms-transform":"translate3d(0,"+n+"%,0)",transform:"translate3d(0,"+n+"%,0)"}
);
break;
case"fade":r.addClass("no-animation").fadeOut("slow",function(){
r.css({
"-webkit-transform":"translate3d("+n+"%,0,0)","-moz-transform":"translate3d("+n+"%,0,0)","-ms-transform":"translate3d("+n+"%,0,0)",transform:"translate3d("+n+"%,0,0)"}
).fadeIn("slow")}
);
break}
}
;
e.fn.positionSlides=function(t,n){
var r=e(this);
if(t.animation=="slideUp"||t.animation=="bounceUp"){
r.css({
top:n*100+"%"}
)}
else{
r.css({
left:n*100+"%"}
)}
}
;
e.fn.immersive_slider=function(n){
var r=e.extend({
}
,t,n),i=e(this),s="",o="";
i.addClass("immersive_slider");
i.find(r.slideSelector).addClass("is-slide");
if(r.cssBlur==true){
i.find(".is-slide img:first-child").each(function(t){
var n="";
if(t==0)n="active";
var i=e(this);
e(r.container).addClass("is-container").prepend("<div id='slide_"+(t+1)+"_bg' class='is-background gs_cssblur "+n+"'>"+i.clone().wrap("<div />").parent().html()+"</div>");
e("#slide_"+(t+1)+"_bg").positionSlides(r,t)}
)}
else{
i.find(".is-slide").each(function(t){
var n="";
if(t==0)n="active";
var i="<img src='"+e(this).data("blurred")+"'>";
e(r.container).addClass("is-container").prepend("<div id='slide_"+(t+1)+"_bg' class='is-background "+n+"'>"+i+"</div>");
e("#slide_"+(t+1)+"_bg").positionSlides(r,t)}
)}
if(r.autoStart!=0||r.autoStart!=false){
setInterval(function(){
i.moveNext()}
,r.autoStart)}
e(r.container).find(".is-background").wrapAll("<div class='is-bg-overflow' />");
i.find(".is-slide").wrapAll("<div class='is-overflow' />");
i.find(".is-slide").each(function(t){
var n="";
if(t==0)n="active";
e(this).attr("id","slide_"+(t+1)).addClass(n);
e(this).positionSlides(r,t);
if(r.pagination==true){
o+="<li><a class='is-page "+n+"' href='#slide_"+(t+1)+"'></a></li>"}
}
);
e("<ul class='is-pagination'>"+o+"</ul>").appendTo(i);
if(r.pagination==true){
e(".is-pagination li a").click(function(){
var t=e(this).attr("href");
if(!e(this).hasClass("active")){
i.moveSlider(r,t)}
return false}
)}
e(".is-next").click(function(){
i.moveNext();
return false}
);
e(".is-prev").click(function(){
i.movePrev();
return false}
);
e.fn.moveSlider=function(t,n){
var r=e(this),i=r.find(".is-slide.active"),s=r.find(".is-slide"+n),o=e(t.container).find(".is-background.active"),u=e(t.container).find(".is-background"+n+"_bg");
if(s){
i.removeClass("active");
s.addClass("active");
o.removeClass("active");
u.addClass("active");
e(".is-pagination li a"+".active").removeClass("active");
e(".is-pagination li a"+"[href='"+n+"']").addClass("active")}
pos=(n.replace("#slide_","")-1)*100*-1;
r.find(".is-overflow").transformSlider(t,pos);
e(t.container).find(".is-bg-overflow").transformSlider(t,pos)}
;
e.fn.moveNext=function(){
var t=e(this),n=t.find(r.slideSelector).length+1,i=parseInt(e(this).find(".is-slide.active").attr("id").replace("slide_",""))+1;
if(i<n){
t.moveSlider(r,"#slide_"+i)}
else{
if(r.loop==true)t.moveSlider(r,"#slide_1")}
}
;
e.fn.movePrev=function(){
var t=e(this),n=t.find(r.slideSelector).length+1,i=parseInt(e(this).find(".is-slide.active").attr("id").replace("slide_",""))-1;
if(i<=n&&i>0){
t.moveSlider(r,"#slide_"+i)}
else{
if(r.loop==true)t.moveSlider(r,"#slide_"+(n-1))}
}
;
i.swipeEvents().bind("swipeRight",function(){
i.movePrev()}
).bind("swipeLeft",function(){
i.moveNext()}
)}
}
(window.jQuery)CSS代码(immersive-slider.css):
/*=================================================Class Definitions=================================================*/
.immersive_slider{background:#161923;max-width:100%;height:480px;opacity:.9;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;overflow:hidden;}
.immersive_slider .is-slide{display:table;height:100%;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:50px 100px;position:absolute;}
.immersive_slider .is-slide .image{float:none;width:50%;padding-left:10px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;vertical-align:middle;display:table-cell;padding:0 0 0 10px;}
.is-bg-overflow{width:100%;height:100%;position:absolute;z-index:0;}
.is-overflow,.is-bg-overflow{height:100%;}
.ease{-webkit-transition:1000ms ease all;-moz-transition:1000ms ease all;-o-transition:1000ms ease all;transition:1000ms ease all;}
.bounce{-webkit-transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;-moz-transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;-o-transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;}
.no-animation{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none !important;}
.immersive_slider .is-slide .image img{max-width:100%;display:block;width:100%;}
.immersive_slider .is-slide .content{float:none;width:50%;padding-right:10px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;color:white;text-align:left;line-height:160%;vertical-align:middle;display:table-cell;}
.immersive_slider .is-slide .content h2{font-size:42px;font-weight:300;text-align:left;}
.is-container{position:relative;overflow:hidden;}
.is-container .is-background{position:absolute;top:0;left:0;width:100%;height:100%;}
.is-container .is-background img{width:100%;height:100%;left:0;position:relative;}
.is-container .is-background.gs_cssblur{-webkit-filter:blur(20px);-moz-filter:blur(20px);-o-filter:blur(20px);filter:blur(20px);}
.is-pagination{position:absolute;left:0;width:100%;bottom:20px;z-index:5;list-style:none;margin:0;padding:0;text-align:center;}
.is-pagination li{padding:0;display:inline-block;text-align:center;position:relative;}
.is-pagination li a{padding:10px;width:4px;height:4px;display:block;}
.is-pagination li a:before{content:'';position:absolute;width:4px;height:4px;background:rgba(255,255,255,0.85);border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;}
.is-pagination li a.active:before{width:10px;height:10px;background:none;border:1px solid white;margin-top:-4px;left:8px;}
.is-next,.is-prev{padding:5px 5px 15px;font-size:50px;position:absolute;bottom:50%;margin-bottom:-36px;width:35px;color:#FFF;display:inline-block;line-height:100%;background:rgba(0,0,0,0.35);}
.is-next{right:10px;}
.is-prev{left:10px;}
分享到QQ
分享到微博
微信扫一扫
