以下是 jQuery数字按钮焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jQuery数字按钮焦点图切换</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css">-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/strapslide.css" rel="stylesheet" media="screen">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
body{
background:url('img/bg.png') repeat;
}
/* SLIDE BUILDING */
#buildtext{
top:0;
z-index:7;
margin-top:5%;
text-indent:80px;
}
#buildtext:hover #buildtext_imagination span,#buildtext:hover #buildtext_possibilities span{
color:white;
background:black;
}
#buildtext_imagination span{
color:black;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#buildtext_possibilities span{
color:black;
font-size:12px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
/* SLIDE UFO */
#ufo{
padding:0;
position:absolute;
left:-300px;
}
#ufo img{
width:100%;
max-width:300px;
height:auto;
}
#ufotext{
float:right;
right:-500px;
position:absolute;
margin-top:80px;
text-align:center;
}
/* SLIDE PLANE */
#plane{
padding:0;
}
#plane img{
width:100%;
height:auto;
}
#touchtext{
position:absolute;
}
#touchtext_and{
font-size:20px;
position:relative;
left:25px;
font-weight:normal;
top:-10px;
}
#touchtext_responsive{
position:relative;
left:22px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#touchtext:hover #touchtext_responsive{
color:#bdc3c7;
}
#touchtext h1{
font-size:36px;
}
#applecontainer{
position:absolute;
bottom:40%;
}
#apple{
margin-left:50px;
position:relative;
}
#macbook{
position:absolute;
z-index:1;
bottom:0;
}
#ipad{
position:absolute;
z-index:1;
bottom:0;
}
#iphone{
position:absolute;
z-index:1;
bottom:0;
}
/*DOG*/
#famoustext{
float:right;
color:black;
}
/* GENERAL */
.nopadding{
padding:0;
}
.nomargin{
margin:0;
}
.withpadding{
padding:20px;
}
.accentblue{
color:#3498db;
}
/*RESPONSIVE*/
@media screen and (max-width:767px){
#touchtext{
margin-left:40px;
}
#touchtext h1{
font-size:24px;
}
#touchtext_and{
font-size:14px;
left:25px;
top:-5px;
}
#ufotext{
top:0px!important;
right:40px;
}
#ufotext h3{
font-size:24px;
}
#buildtext{
position:absolute;
top:0;
z-index:7;
margin-top:3%;
text-indent:20px;
}
#famoustext{
margin-right:0px;
margin-top:100px;
}
}
#transitions li{
height:30px;
}
</style>
</head>
<body>
<div class="container-fluid nopadding">
<div class="row-fluid">
<!-- 1ST SLIDER START -->
<div class="span12 strapslide" id="strapslide">
<!-- SLIDER CONTAINER START -->
<ul class="slider-container unstyled">
<!-- SLIDE START -->
<li class="slide active" data-transition="scaleup" id="dontbuy">
<div class="container-fluid slide-content nopadding">
<div class="row-fluid">
<div class="widthpadding offset3 span6 text-center" data-top="45" id="dontbuytext1">
<h1 class="background-black">IT'S A BIRD! </h1>
</div>
</div>
<div class="row-fluid">
<div class="widthpadding offset3 span6 text-center" data-top="45" id="dontbuytext2">
<h1 class="background-black">IT'S A PLANE! </h1>
</div>
</div>
<div class="row-fluid">
<div class="widthpadding offset3 span6 text-center" data-top="45" id="dontbuytext3">
<h1 class="background-black">NO. IT'S STRAPSLIDE!
</h1>
</div>
</div>
<div class="row-fluid">
<div class="widthpadding offset3 span6 text-center" data-top="38" id="dontbuytext4">
<h1 style="text-shadow: 1px 1px 0px #000000; filter: dropshadow(color=#000000, offx=1, offy=1);">
DON'T BUY STRAPSLIDE </h1>
<h3 class="background-black" style="font-weight:normal;">
IF YOU EXPECT ANYTHING LESS THAN AWESOME </h3>
<a href="#" class="btn btn-large btn-primary">
BUY NOW </a></div>
</div>
</div>
<img class="slide-background" src="img/placeholder1.jpg"> </li>
<!-- SLIDE END -->
<!-- SLIDE START --></li>
<li class="slide" data-transition="scaledownrotateccw" id="famous">
<div class="container-fluid slide-content nopadding">
<div class="row-fluid">
<div class="widthpadding span5 text-center" id="famoustext" data-top="15" data-right="5">
<div class="strapslide-video visible-desktop">
<iframe src="#" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe></div>
<h1 class="background-black">IT'S SHOWTIME </h1>
<h3 style="font-weight:normal">STRAPSLIDE IS TOTALLY
CINEMATIC </h3>
</div>
</div>
</div>
<img class="slide-background" src="img/placeholder4.jpg"> </li>
<!-- SLIDE END -->
<!-- SLIDE START --></li>
<li class="slide" data-transition="fromtop" id="touchresponsive">
<div class="container-fluid slide-content nopadding">
<div class="row-fluid" id="plane">
<div class="span12 nopadding">
<img src="img/plane.png"> </div>
</div>
<div class="row-fluid">
<div id="touchtext" data-left="10" style="position:absolute;" class="span12 widthpadding">
<h1>TOUCH ENABLED <br />
<span id="touchtext_and">AND</span>
<span class="accentblue" id="touchtext_responsive">RESPONSIVE</span>
</h1>
</div>
</div>
<div class="row-fluid" id="applecontainer">
<div class="span5 hidden-phone" id="apple">
<img id="macbook" src="img/applemacbook.png">
<img id="ipad" src="img/appleipad.png">
<img id="iphone" src="img/appleiphone.png"> </div>
</div>
</div>
<img class="slide-background" src="img/placeholder2.jpg"> </li>
<!-- SLIDE END -->
<!-- SLIDE START --></li>
<li class="slide" data-transition="scaledownrotatecw" id="omg">
<div class="container-fluid slide-content nopadding">
<div class="row-fluid">
<div class="widthpadding span5 text-center" id="omgtext" data-top="20" data-left="10">
<h1 class="background-red">WHOA! </h1>
<h1 style="color:black; font-weight:normal;">YOU FOUND
STRAPSLIDE! </h1>
<ul id="omgtextlist" class="text-left" style="text-indent:45px; list-style-image:url('img/liststyle.png');color:black;">
<li><b>UNLIMITED</b> Customizability</li>
<li>Based on Bootstrap</li>
<li>Touch Enabled</li>
<li>Responsive</li>
<li>Keyboard Navigation </li>
</ul>
</div>
</div>
</div>
<img class="slide-background" src="img/placeholder6.jpg"> </li>
<!-- SLIDE END -->
<!-- SLIDE START --></li>
<li class="slide" data-transition="fromleft" id="seenufo">
<div class="row-fluid" id="ufo">
<div class="span12 nopadding">
<img src="img/ufo.png"> </div>
</div>
<div class="row-fluid">
<div id="ufotext">
<h1 style="color:#0074cd;">YOU LOOK LIKE</h1>
<h1 class="background-darkblue" style="font-weight:normal;">
YOU'VE SEEN AN UFO </h1>
<p style="color:#5d5d5d;">Fortunately, strapslide has that
effect on people </p>
</div>
</div>
<img class="slide-background" src="img/placeholder3.jpg"> </li>
<!-- SLIDE END -->
<!-- SLIDE START --></li>
<li class="slide" data-transition="fromright">
<div class="row-fluid nopadding">
<div class="span12">
<iframe class="strapslide-videofullscreen" src="#" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe></div>
</div>
</li>
<!-- SLIDE END --></li>
</ul>
<!-- SLIDER CONTAINER END -->
<!-- PROGRESS START -->
<div class="progress progress-striped">
<div class="bar" style="width: 0%">
</div>
</div>
<!-- PROGRESS END -->
<!-- PAGINATION START -->
<div class="row">
<div class="span12">
<div class="pagination">
<ul class="strapslide-pagination autocenter">
</ul>
</div>
</div>
</div>
<!-- PAGINATION END -->
<!-- CONTROLS START -->
<div class="row-fluid">
<div class="span2 offset5 text-center">
<div class="strapslide-controls btn-group">
<a class="prev btn btn-primary btn-large" href="javascript:void(0);">
< </a>
<a class="next btn btn-primary btn-large" href="javascript:void(0);">
> </a></div>
</div>
</div>
<!-- CONTROLS END --></div>
<!-- 1ST SLIDER END --></div>
</div>
</div>
</div>
</div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js">
</script>
<script src="js/respond.min.js">
</script>
<!-- JavaScript plugins (requires jQuery) -->
<script src="js/jquery-1.7.2.min.js">
</script>
<script src="js/jquery.touchSwipe.min.js">
</script>
<script src="js/jquery.transit.min.js">
</script>
<script src="js/jquery.mousewheel.js">
</script>
<!-- Slider plugin -->
<script src="js/strapslide.js">
</script>
<!-- Script -->
<script src="js/script.js">
</script>
</body>
</html>JS代码(respond.min.js):
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012:Scott Jehl,Paul Irish,Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE:If you're already including a window.matchMedia polyfill via Modernizr or otherwise,you don't need this part */
window.matchMedia=window.matchMedia||function(a){
"use strict";
var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");
return g.id="mq-test-1",g.style.cssText="position:absolute;
top:-100em",f.style.background="none",f.appendChild(g),function(a){
return g.innerHTML='­
<style media="'+a+'"> #mq-test-1{
width:42px;
}
</style>',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{
matches:c,media:a}
}
}
(document);
/*! Respond.js v1.1.0:min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(a){
"use strict";
function x(){
u(!0)}
var b={
}
;
if(a.respond=b,b.update=function(){
}
,b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){
var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={
}
,i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){
for(var b=0;
l.length>b;
b++){
var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();
d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({
href:d,media:e}
))}
o()}
,o=function(){
if(m.length){
var b=m.shift();
v(b.href,function(c){
p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){
o()}
,0)}
)}
}
,p=function(a,b,c){
var d=a.match(/@media[^\{
]+\{
([^\{
\}
]*\{
[^\}
\{
]*\}
)+/gi),g=d&&d.length||0;
b=b.substring(0,b.lastIndexOf("/"));
var h=function(a){
return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")}
,i=!g&&c;
b.length&&(b+="/"),i&&(g=1);
for(var j=0;
g>j;
j++){
var k,l,m,n;
i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{
]+)\{
([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;
for(var o=0;
n>o;
o++)l=m[o],e.push({
media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")}
)}
u()}
,s=function(){
var a,b=c.createElement("div"),e=c.body,f=!1;
return b.style.cssText="position:absolute;
font-size:1em;
width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)}
,u=function(b){
var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={
}
,o=l[l.length-1],p=(new Date).getTime();
if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;
q=p;
for(var v in e)if(e.hasOwnProperty(v)){
var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";
x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}
for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);
for(var D in n)if(n.hasOwnProperty(D)){
var E=c.createElement("style"),F=n[D].join("\n");
E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}
}
,v=function(a,b){
var c=w();
c&&(c.open("GET",a,!0),c.onreadystatechange=function(){
4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)}
,4!==c.readyState&&c.send(null))}
,w=function(){
var b=!1;
try{
b=new a.XMLHttpRequest}
catch(c){
b=new a.ActiveXObject("Microsoft.XMLHTTP")}
return function(){
return b}
}
();
n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}
}
)(this);
JS代码(script.js):
$(document).ready(function(){
$( "#strapslide" ).strapslide({
animation:"scaledown",speed:800,timeout:5500,autoplay:true,autoHeight:true,pagination:true,mousewheel:false,pauseOnHover:true}
,function(){
if($('#strapslide .active').attr('id') == 'touchresponsive'){
$('#plane').animationIn('scaledown',500);
$('#touchtext').css({
'top':'0%'}
).animationIn('fromtop',1000,function(){
$('#touchtext').transition({
'top':'15%'}
,2000,'ease');
}
);
$('#macbook').animationIn('fromright',500);
$('#ipad').delay(300).animationIn('fromright',500);
$('#iphone').delay(600).animationIn('fromright',500);
}
if($('#strapslide .active').attr('id') == 'seenufo'){
$('#ufo').css({
'left':'-300px'}
).animationIn('scaleup',1000,function(){
$('#ufo').transition({
'left':'140%'}
,4000,'ease');
$('#ufotext').css({
'right':'-500px'}
).transition({
'right':'10%'}
,500);
}
);
}
if($('#strapslide .active').attr('id') == 'famous'){
$('#famoustext').animationIn('scaleuprotatecw',500);
}
if($('#strapslide .active').attr('id') == 'dontbuy'){
$('#dontbuytext1').animationIn('scaleup',500);
setTimeout(function(){
$('#dontbuytext1').animationOut('scaleup',100)}
,500);
$('#dontbuytext2').delay(600).animationIn('scaleup',500);
setTimeout(function(){
$('#dontbuytext2').animationOut('scaleup',100)}
,1100);
$('#dontbuytext3').delay(1200).animationIn('scaleup',700);
setTimeout(function(){
$('#dontbuytext3').animationOut('scaleup',100)}
,1900);
$('#dontbuytext4').delay(2000).animationIn('scaleup',500);
}
if($('#strapslide .active').attr('id') == 'omg'){
$('#omgtext').animationIn('scaleup',500);
$('#omgtextlist').animationIn('scaledown',500);
}
}
,function(){
if($('#strapslide .active').attr('id') == 'touchresponsive'){
$('#plane').animationOut('scaleup',500);
$('#touchtext').animationOut('tobottom',1000);
$('#macbook').delay(600).animationOut('toleft',500);
$('#ipad').delay(300).animationOut('toleft',500);
$('#iphone').animationOut('toleft',500);
}
if($('#strapslide .active').attr('id') == 'seenufo'){
$('#ufotext').transition({
'right':'-500px'}
,1000);
}
if($('#strapslide .active').attr('id') == 'dontbuy'){
$('#dontbuytext4').animationOut('scaleup',500);
}
if($('#strapslide .active').attr('id') == 'omg'){
$('#omgtext').animationOut('fallright',500);
}
if($('#strapslide .active').attr('id') == 'famous'){
$('#famoustext').animationOut('scaledownrotateccw',500);
}
}
);
$( "#strapslide2" ).strapslide({
animation:"scaledown",speed:800,timeout:3000,autoplay:true,autoHeight:false,pagination:false,mousewheel:true,pauseOnHover:true}
,function(){
if($('#strapslide2 .active').attr('id') == 'imboxed'){
$('#imboxedtext').animationIn('scaleup',300);
}
if($('#strapslide2 .active').attr('id') == 'imunlimited'){
$('#imunlimitedtext').animationIn('scaledown',300);
}
if($('#strapslide2 .active').attr('id') == 'showtime'){
$('#showtimetext').animationIn('fromtop',300);
}
if($('#strapslide2 .active').attr('id') == 'scrollable'){
$('#scrollabletext').animationIn('frombottom',300);
}
if($('#strapslide2 .active').attr('id') == 'imstrapslide'){
$('#imstrapslidetext').animationIn('scaleuprotatecw',300);
}
}
);
}
);
CSS代码(strapslide.css):
/* Document:strapslide Created on:Jul 28,2013,10:14:06 AM Author:Awesome Description:Purpose of the stylesheet follows.*/
#strapslide2 .slider-container{height:150px;}
#strapslide .slider-container{height:820px;}
.strapslide{margin:0;padding:0;height:auto;position:relative;}
.strapslide .slider-container{position:relative;margin:0;padding:0;overflow:hidden;z-index:999;}
.strapslide .slider-container .slide{position:absolute;z-index:999;display:none;overflow:hidden;}
.strapslide .slider-container .active{z-index:1000;}
.strapslide .slider-container .slide .slide-content{position:absolute;width:100%;z-index:1001;top:0;color:white;display:none;}
.strapslide .slider-container .slide .slide-background{width:100%;height:auto;position:static;}
.spacer{width:100%;height:50px;position:relative;}
.strapslide .split-top{width:100%;float:left;display:block;}
.strapslide .strapslide-pagination{display:none;position:absolute;bottom:100px;left:50%;margin:0;}
.strapslide .pagination,.strapslide .strapslide-pagination,.strapslide .strapslide-pagination li,.strapslide .strapslide-pagination li a,.strapslide .strapslide-controls{z-index:1002;}
.strapslide-pagination li a{-webkit-transition:all 0.4s ease-in-out 0s;-moz-transition:all 0.4s ease-in-out 0s;-o-transition:all 0.4s ease-in-out 0s;-ms-transition:all 0.4s ease-in-out 0s;transition:all 0.4s ease-in-out 0s;}
.strapslide-pagination li a:hover{background:#ddd!important;}
.strapslide .progress{margin-bottom:0;height:5px;}
.strapslide-videofullscreen{width:100%;height:100%;}
.strapslide .background-red{color:white;background:#e74c3c;padding:5px 10px;}
.strapslide .background-orange{color:white;background:#e67e22;padding:5px 10px;}
.strapslide .background-yellow{background:#f1c40f;padding:5px 10px;}
.strapslide .background-green{background:#1abc9c;padding:5px 10px;}
.strapslide .background-blue{color:white;background:#3498db;padding:5px 10px;}
.strapslide .background-darkblue{color:white;background:#0074cd;padding:5px 10px;}
.strapslide .background-lightgray{background:#7f8c8d;padding:5px 10px;}
.strapslide .background-darkgray{color:white;background:#34495e;padding:5px 10px;}
.strapslide .background-black{color:white;background:black;padding:5px 10px;}
分享到QQ
分享到微博
微信扫一扫
