以下是 仿苹果CoverFlow图片切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿苹果CoverFlow图片切换特效</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.demo{width:960px;margin:20px auto 0 auto;}
#shelf{width:900px;height:210px;background:url("images/shelf-bg.png") no-repeat scroll 0 -25px transparent;}
.itemTitle{padding-top:30px;}
/* container */
#container{width:850px;height:160px;margin-left:25px;}
#container img, #container .item{
width:100%;height:100%;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0px 5px 5px #777;
-webkit-box-shadow:0px 5px 5px #777;
box-shadow:0px 5px 5px #777;
}
#container .selectedItem{
-moz-box-shadow:0 4px 10px #0071BC;
-webkit-box-shadow:0 4px 10px #0071BC;
box-shadow:0 4px 10px #0071BC;
border:1px solid #0071BC;
}
#container .item{width:160px;height:160px;left:0px;}
/* container2 */
#container2{width:850px;height:200px;margin-left:25px;}
#container2 img, #container2 .item{
width:100%;height:100%;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0px 5px 5px #777;
-webkit-box-shadow:0px 5px 5px #777;
box-shadow:0px 5px 5px #777;
}
/* similarity */
.similarity{bottom:5%;position:absolute;right:5%;font-size:2.5em;*font-size:1.3em;width:1.5em;height:1.5em;line-height:1.5em;text-align:center;}
.similarity{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:#84C440;
background:-moz-linear-gradient(top, #84C440 0%, #3CB64A 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#84C440), color-stop(100%,#3CB64A));
-webkit-box-shadow:inset 0px 1px 0px #a1d269;
-moz-box-shadow:inset 0px 1px 0px #a1d269;
box-shadow:inset 0px 1px 0px #a1d269;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
border-color:#8cc63f #6dc043 #359541 #6dc043;border-width:1px;border-style:solid;color:#fff;float:left;font-size:14px;font-weight:bold;padding:3px 6px;
}
.similarity:hover{
background:#bbde51;border-color:#bbde51 #bbde51 #9eba45 #bbde51;cursor:pointer;
-webkit-box-shadow:inset 0px 1px 0px #cde671;
-moz-box-shadow:inset 0px 1px 0px #cde671;
box-shadow:inset 0px 1px 0px #cde671;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.coverscroll.min.js"></script>
</head>
<body>
<div class="demo">
<div id="shelf" style="background-position:0 0;">
<div id="container2">
<img title="title #1" src="images/1.jpg" />
<img title="title #2" src="images/2.jpg" />
<img title="title #3" src="images/3.jpg" />
<img title="title #4" src="images/4.jpg" />
<img title="title #5" src="images/5.jpg" />
<img title="title #6" src="images/6.jpg" />
<img title="title #7" src="images/7.jpg" />
<img title="title #1" src="images/1.jpg" />
<img title="title #2" src="images/2.jpg" />
<img title="title #3" src="images/3.jpg" />
<img title="title #4" src="images/4.jpg" />
</div>
</div>
<script type="text/javascript">
$(function(){
$('#container2').coverscroll();
});
</script>
<br><br><br><br><br><br>
<div id="shelf">
<div id="container">
<div class="item">
<img src="images/1.jpg" />
<div class="similarity">05</div>
<div class="itemTitle">the title 1</div>
</div>
</div>
</div><!--shelf end-->
<script type="text/javascript">
$(function(){
$('#container').coverscroll({
items:'.item',
minfactor:10,
scalethreshold:5,
staticbelowthreshold:true,
distribution:1
});
});
// 演示，动态地添加项目的CoverScroll
var cnt = 0;
var aitems = [
'<div class="item"><img src="images/2.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 2</div></div>',
'<div class="item"><img src="images/3.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 3</div></div>',
'<div class="item"><img src="images/4.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 4</div></div>',
'<div class="item"><img src="images/5.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 5</div></div>',
'<div class="item"><img src="images/6.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 6</div></div>',
'<div class="item"><img src="images/7.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 7</div></div>',
'<div class="item"><img " src="images/1.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 8</div></div>',
'<div class="item"><img " src="images/2.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 9</div></div>',
'<div class="item"><img " src="images/3.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 10</div></div>',
'<div class="item"><img " src="images/4.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 11</div></div>',
'<div class="item"><img " src="images/5.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 12</div></div>',
'<div class="item"><img " src="images/6.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 13</div></div>',
'<div class="item"><img " src="images/7.jpg" /><div class="similarity">05</div><div class="itemTitle">the title 14</div></div>'
];
function addItem(){
$('#container').append(aitems[cnt]);
$('#container').coverscroll({
items:'.item',
minfactor:10,
scalethreshold:5,
staticbelowthreshold:true,
distribution:1,
bendamount:1.5,
movecallback:getStatus
});
cnt++;
if(cnt >= aitems.length){
cnt=0
}
}
function getStatus(){
var stats = ($('#container .selectedItem').index()+1)+' of '+$('#container .item').length;
$('#stats').html(stats);
}
</script>
<p style="text-align:center;width:900px;">
<a onClick="$('#container').coverscroll('prev')" href="javascript:;">上一个</a>
<span id="stats"></span>
<a onClick="$('#container').coverscroll('next')" href="javascript:;">下一个</a>
<br/><br/>
<button onClick="addItem()">添加图片</button>
</p>
</div>
</body>
</html>
JS代码(jquery.coverscroll.min.js):
(function(c){
var b={
}
;
var a={
init:function(f){
var g={
minfactor:20,distribution:1.5,scalethreshold:0,staticbelowthreshold:false,titleclass:"itemTitle",selectedclass:"selectedItem",scrollactive:true,step:{
limit:4,width:8,scale:true}
,bendamount:2,movecallback:function(){
}
,clicked:false}
;
b=g;
var h=false;
if(f){
c.extend(g,f)}
return this.each(function(){
var k=c(this);
if(g.items){
var m=k.find(g.items)}
else{
var m=k.find("img")}
if(m.length<=g.scalethreshold){
g.minfactor=0;
g.distribution=0.95}
k.css({
position:"relative"}
);
m.css({
position:"absolute","-webkit-transition":"all 0.5s ease-in-out","-moz-transition":"all 0.5s ease-in-out","-o-transition":"all 0.5s ease-in-out","-ms-transition":"all 0.5s ease-in-out",transition:"all 0.5s ease-in-out"}
);
var l=Math.ceil(m.length/2-1);
d(k,m,l);
if(m.length<=g.scalethreshold&&g.staticbelowthreshold){
m.each(function(n){
c(this).unbind("click.coverscroll");
c(this).bind("click.coverscroll",function(){
if(c(this).hasClass(g.selectedclass)){
return false}
e(k,this)}
)}
)}
else{
m.each(function(n){
c(this).unbind("click.coverscroll");
c(this).bind("click.coverscroll",function(){
if(c(this).hasClass(g.selectedclass)){
return false}
d(k,m,n)}
)}
)}
if(!g.scrollactive){
return true}
var j=function(n){
var o=n||window.event,p=0;
o=c.event.fix(o);
if(!h){
if(o.wheelDelta){
p=o.wheelDelta/120}
if(o.detail){
p=-o.detail/3}
if(p>0){
k.find("."+g.selectedclass+":eq(0)").next().trigger("click")}
else{
k.find("."+g.selectedclass+":eq(0)").prev().trigger("click")}
}
if(o.preventDefault){
o.preventDefault()}
o.returnValue=false}
;
if(k.get(0).addEventListener&&!k.get(0).onmousewheel){
k.get(0).removeEventListener("DOMMouseScroll",j,false);
k.get(0).addEventListener("DOMMouseScroll",j,false)}
k.get(0).onmousewheel=j}
);
function d(k,o,v){
var w=c(o.get(v));
var s=(k.height()>250)?250:k.height();
var p={
width:s,height:s,top:0,left:Math.round(k.width()/2-s/2)}
;
if(c.browser.msie){
h=true;
w.animate(p,500,function(){
h=false}
)}
else{
w.css(p)}
w.fadeIn(80);
var u=g.minfactor===0||g.minfactor>0?g.minfactor:15;
var j=g.distribution?g.distribution:2;
var m=g.titleclass?g.titleclass:"itemTitle";
if(!g.bendamount){
g.bendamount=2}
e(k,w,true);
var l=s,t=0;
sf=false;
var q=true;
var r=Math.round(k.width()/2-s/2);
for(i=v-1;
i>=0;
i--){
var n=c(o.get(i));
l=l-u;
if(!sf){
r=Math.round(r-l/j+u)}
else{
l=g.step.scale?l:l+u;
r=Math.round(r-g.step.width);
t++}
if(r>=0&&q&&t<=g.step.limit){
n.show()}
else{
if(!sf){
r=Math.round(r+(l/j)-u-g.step.width);
sf=true;
t++;
n.show()}
else{
n.hide();
q=false}
}
var p={
width:l,height:l,top:Math.round(k.height()/g.bendamount-l/g.bendamount),left:r}
;
if(c.browser.msie){
h=true;
n.animate(p,500,function(){
h=false}
)}
else{
n.css(p)}
}
var l=s,t=0;
sf=false;
var r=Math.round(k.width()/2-s/2);
var q=true;
for(i=v+1;
i<o.length;
i++){
var n=c(o.get(i));
l=l-u;
if(!sf){
r=Math.round(r+l/j)}
else{
l=g.step.scale?l:l+u;
r=Math.round(r+g.step.width+(g.step.scale?u:0));
t++}
if((r+l)<k.width()&&q&&t<=g.step.limit){
n.show()}
else{
if(!sf){
sf=true;
t++;
r=Math.round((r-l/j)+g.step.width+u);
n.show()}
else{
n.hide();
q=false}
}
var p={
width:l,height:l,top:Math.round(k.height()/g.bendamount-l/g.bendamount),left:r}
;
if(c.browser.msie){
h=true;
n.animate(p,500,function(){
h=false}
)}
else{
n.css(p)}
}
setTimeout(function(){
var x=100;
o.each(function(y){
if(y<=v){
x=x+y}
else{
x=x-y}
c(this).css("z-index",x)}
)}
,100)}
function e(l,m,j){
m=c(m);
var o=(l.outerHeight()>250)?250:l.outerHeight();
var n=false;
if(n=m.attr("title")){
l.find("."+g.titleclass).remove();
if(j){
var k=Math.round(l.width()/2-o/2)}
else{
var k=parseInt(m.css("left"))}
c('<div style="position:absolute;
text-align:center;
top:'+o+"px;
left:"+(k-o/2)+"px;
width:"+(o*2)+'px" class="'+g.titleclass+'">'+n+"</div>").appendTo(l);
setTimeout(function(){
g.movecallback.call(this,m)}
,600)}
else{
if(n=m.find("."+g.titleclass+":eq(0)")){
l.find("."+g.titleclass).hide();
n.css({
position:"absolute",width:(o*2),"text-align":"center",top:o,left:Math.round(0-(o/2))}
);
setTimeout(function(){
n.show();
g.movecallback.call(this,m)}
,500)}
}
if(g.items){
var p=l.find(g.items)}
else{
var p=l.find("img")}
setTimeout(function(){
p.removeClass(g.selectedclass);
m.addClass(g.selectedclass)}
,100)}
}
,next:function(d){
return this.each(function(){
var e=c(this);
e.find("."+b.selectedclass+":eq(0)").next().trigger("click")}
)}
,prev:function(){
return this.each(function(){
var d=c(this);
d.find("."+b.selectedclass+":eq(0)").prev().trigger("click")}
)}
}
;
c.fn.coverscroll=function(d){
if(a[d]){
return a[d].apply(this,Array.prototype.slice.call(arguments,1))}
else{
if(typeof d==="object"||!d){
return a.init.apply(this,arguments)}
else{
c.error("Method "+d+" does not exist on this plugin")}
}
}
}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
