以下是 jQuery图片内容展开_收缩选项卡特效代码 的示例演示效果:
部分效果截图:
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=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery图片内容展开/收缩选项卡，属于站长常用代码" />
<title>jQuery图片内容展开/收缩选项卡</title>
<link rel="stylesheet" href="css/reset.css">
<!--必要样式-->
<link rel="stylesheet" href="css/jquery.gridquote.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridquote.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){
$('.grid-container').gridQuote();
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div class="wrapper">
<div class="popover top">
<div class="arrow"></div>
<div class="popover-inner">
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
</div>
<div class="grid-container">
<div class="thumb-container" data-title="Optional Background Color" data-fontsize="27" data-bgcolor="green">
<img src="images/thumbnail1.png" alt="" class="grid-img">
<div class="quote-container">
<p>
<span class="date-info">11 Jun, 2013</span>
It's responsive, please try to resize your browser. Auto delay slideshow, optional hover to pause. You can put any content in this quote block. <br />Please click the same thumbnail again to close this panel.<br />
<span class="little-info">--- Link to my profile</span>
</p>
</div>
</div>
<div class="thumb-container" data-title="Optional Font Size" data-bgcolor="orange">
<img src="images/thumbnail2.png" alt="" class="grid-img">
<div class="quote-container">
<img src="images/lychee.jpg" alt="" class="info-img">
<p class="light-info2">
Change the font color. You can put any content in here, a image for example. Consectetur adipisicing elit. Reiciendis, quia, porro, ab nihil quidem suscipit dolorum unde amet consectetur nam numquam at ut doloremque saepe reprehenderit cumque accusantium necessitatibus iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, doloribus sequi nihil possimus hic magni nesciunt dolorem rerum suscipit laudantium minima molestias eaque necessitatibus recusandae minus sit saepe iste sint.<br />
<span class="little-info">--- <a href="http://codecanyon.net/user/sike">A link here</a> </span>
</p>
</div>
</div>
<div class="thumb-container" data-title="Bertrand Russell">
<img src="images/russell.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>
<span class="light-info">a British philosopher, logician, mathematician, historian, and social critic.</span>
<br />If a man is offered a fact which goes against his instincts, he will scrutinize it closely, and unless the evidence is overwhelming, he will refuse to believe it. If, on the other hand, he is offered something which affords a reason for acting in accordance to his instincts, he will accept it even on the slightest evidence. The origin of myths is explained in this way.
</p>
</div>
</div>
<div class="thumb-container" data-title="Dorothy Parker" data-bgcolor="pink">
<img src="images/parker.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>I'm never going to be famous. My name will never be writ large on the roster of Those Who Do Things. I don't do any thing. Not one single thing. I used to bite my nails, but I don't even do that any more.</p>
</div>
</div>
<div class="thumb-container" data-title="E. B. White">
<img src="images/white.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>
<span class="date-info">Some other information here</span>
<br />I would feel more optimistic about a bright future for man if he spent less time proving that he can outwit Nature and more time tasting her sweetness and respecting her seniority.</p>
</div>
</div>
<div class="thumb-container" data-title="Paul Valery">
<img src="images/valery.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>The folly of mistaking a paradox for a discovery, a metaphor for a proof, a torrent of verbiage for a spring of capital truths, and oneself for an oracle, is inborn in us.</p>
</div>
</div>
<div class="thumb-container" data-title="Daniel Webster, Address at the laying of the cornerstone of the bunker hill monument" data-fontsize="16">
<img src="images/webster.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>Let us develop the resources of our land, call forth our powers, build up its institutions, promote all its great interests, and see whether we also, in our day and generation, may not perform something worthy to be remembered.</p>
</div>
</div>
<div class="thumb-container" data-title="Adlai E. Stevenson Jr., Welcoming address before the Democratic national convention, Chicago, Illinois, July 21, 1952" data-fontsize="14">
<img src="images/adlaistevenson.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>What counts now is not just what we are against, but what we are for. Who leads us is less important than what leads us-what convictions, what courage, what faith-win or lose. A man doesn't save a century, or a civilization, but a militant party wedded to a principal can.</p>
</div>
</div>
<div class="thumb-container" data-title="Albert Einstein">
<img src="images/einstein.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>
<span class="light-info">Albert Einstein was a German-born physicist who developed the theory of relativity. He is considered the most influential physicist of the 20th century.</span>
<br />
Gravitation cannot be held responsible for people falling in love. How on earth can you explain in terms of chemistry and physics so important a biological phenomenon as first love? Put your hand on a stove for a minute and it seems like an hour. Sit with that special girl for an hour and it seems like a minute. That's relativity.
</p>
</div>
</div>
<div class="thumb-container" data-title="Socrates" data-bgcolor="white">
<img src="images/socrates.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>Regard your good name as the richest jewel you can possibly be possessed of - for credit is like fire; when once you have kindled it you may easily preserve it, but if you once extinguish it, you will find it an arduous task to rekindle it again. The way to gain a good reputation is to endeavor to be what you desire to appear.</p>
</div>
</div>
<div class="thumb-container" data-title="Oscar Wilde" data-bgcolor="brown">
<img src="images/wilde.jpg" alt="" class="grid-img">
<div class="quote-container">
<p>Most modern calendars mar the sweet simplicity of our lives by reminding us that each day that passes is the anniversary of some perfectly uninteresting event.</p>
</div>
</div>
</div>
</div>
<!-- 代码 结束 -->
</body>
</html>
JS代码(jquery.gridquote.min.js):
!function(a){
a.fn.gridQuote=function(b){
function r(){
clearInterval(d.data("_slideshowID")),p=setInterval(function(){
var a=h.data("index");
a++,a>g.length-1&&(a=0),g[a].trigger("click")}
,c.slideshowDelay),d.data("_slideshowID",p)}
function t(){
j=Math.floor(d.width()/m)-1,d.find(".thumb-container").each(function(){
k=Math.floor(a(this).data("index")/(j+1)),a(this).data("row",k)}
),h&&(g[Math.min((h.data("row")+1)*j+h.data("row"),g.length-1)].after(e),l&&a("body,html").animate({
scrollTop:h.offset().top}
,300,function(){
q&&r()}
))}
var c={
titleFontSize:32,defaultBgColor:"blue",slideshow:!0,slideshowDelay:5e3,pauseByHover:!0,autoScroll:!0,initOpen:!0}
;
b&&a.extend(c,b);
var i,m,n,o,d=this,e=a('<div class="quote"></div>').hide(),f=a(".popover"),g=[],h=null,j=0,k=0,l=!1,p=0,q=c.slideshow;
d.find(".thumb-container").each(function(b){
g[b]=a(this).attr("rel",b).data("index",b),m=a(this).outerWidth(),n=a(this).outerHeight(),j=Math.floor(d.width()/m)-1,k=Math.floor(a(this).data("index")/(j+1)),a(this).data("row",k),a(this).data("position_top",a(this).position().top);
var p=f.clone();
p.appendTo(a(this)),p.find(".popover-content").html(a(this).data("title"));
var s=a(this).data("fontsize")||c.titleFontSize,t=a(this).data("bgcolor")||c.defaultBgColor;
p.addClass(t).find(".popover-content").css("font-size",s),a(this).on("click",function(){
for(var d=0;
k>=d;
d++)a(this).data("row")==d&&g[Math.min((d+1)*j+d,g.length-1)].after(e);
var m,f=a(this).find(".quote-container").html();
a(this).is(h)?l?(e.slideUp("fast"),o&&o.stop(!0).animate({
opacity:0}
,300,function(){
a(this).hide()}
),l=!1):(e.show().slideDown("fast"),o&&o.show().stop(!0).animate({
opacity:1}
,300),l=!0):(o&&o.stop(!0).animate({
opacity:0}
,300,function(){
a(this).hide()}
),e.offset().top==i?e.stop(!0).animate({
opacity:0}
,300,function(){
e.html(f).animate({
opacity:1}
,300)}
):e.hide().html(f).slideDown("fast"),i=e.offset().top,m=a(this).find(".popover"),m.find(".arrow").show().css("opacity",1),m.show().stop(!0).animate({
opacity:1}
,400),l=!0,o=m),c.autoScroll&&!navigator.userAgent.match(/(iPod|iPhone|iPad)/)&&a("body,html").delay(300).animate({
scrollTop:a(this).offset().top}
,600,function(){
q&&r()}
),h=a(this)}
)}
).on("mouseover",function(){
if(!navigator.userAgent.match(/(iPod|iPhone|iPad)/)&&!a(this).is(h)){
var c=a(this).find(".popover");
c.find(".arrow").hide().css("opacity",0),c.show().css({
opacity:0}
).animate({
opacity:1}
,400)}
}
).on("mouseleave",function(){
a(this).is(h)||a(this).find(".popover").stop(!0).animate({
opacity:0}
,300,function(){
a(this).hide()}
)}
),c.initOpen&&g[0].trigger("click"),d.on("mouseover",function(){
c.pauseByHover&&(clearInterval(d.data("_slideshowID")),q=!1)}
).on("mouseleave",function(){
c.slideshow&&c.pauseByHover&&(q=!0,r())}
);
var s=0;
return a(window).on("resize",function(){
navigator.userAgent.match(/(iPod|iPhone|iPad)/)||(clearTimeout(s),clearInterval(d.data("_slideshowID")),s=setTimeout(t,300))}
),this}
}
(jQuery);
CSS代码(jquery.gridquote.css):
body{/*font-family:"Lucida Grande","Lucida Sans Unicode",helvetica,verdana,arial,sans-serif;*/
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:#EFEFEF url(../images/assets/grey_wash_wall.png) repeat;margin-top:24px;margin-bottom:120px;}
a,a:visited{color:#0088cc;text-decoration:none;}
a:hover{color:#005580;text-decoration:underline;}
.wrapper{clear:both;position:relative;width:960px;margin:0 auto;/*margin-top:24px;*/
}
.grid-container{width:100%;overflow:hidden;}
.thumb-container{float:left;position:relative;width:240px;height:160px;cursor:pointer;/*opacity:.7;*/
}
.grid-img{position:relative;float:left;z-index:999;}
.quote{/*width:100%;*/
position:relative;font-size:1.8em;line-height:150%;/*float:left;*/
/*height:160px;*/
height:auto;clear:left;/*background:#CCC url(../images/assets/fibers.png) repeat;*/
/*color:#EFEFEF;*/
background:#EFEFEF;color:#333;/*padding:36px*/
}
.quote p{margin:0;padding:36px;}
.little-info{font-size:14px;}
.date-info{display:inline-block;font-style:italic;font-size:14px;float:right;background:#666;color:#FFF;padding:0px 8px;}
.light-info{color:#999;font-size:16px;padding:0;line-height:100%;}
.light-info2{color:#666;}
.info-img{float:left;margin:48px 20px 12px 36px;}
.quote-container{display:none;clear:left;width:100%;}
.thumb-container img{/*width:240px;*/
/*height:160px;*/
}
.popover{position:absolute;z-index:1010;top:10px;left:0px;display:none;/*opacity:0;*/
width:240px;height:159px;padding:1px;text-align:left;white-space:normal;background-color:#fff;/* border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;*/
}
.popover.white{background:#FFF;color:#333;}
.popover.green{background:#9ACD32;color:#FFF;}
.popover.orange{background:#FFA500;color:#FFF;}
.popover.pink{background:#DA70D6;color:#FFF;}
.popover.blue{background:#00BFFF;color:#FFF;}
.popover.brown{background:#8B4513;color:#FFF;}
.popover.top{margin-top:-10px;}
.popover.right{margin-left:10px;}
.popover.bottom{margin-top:10px;}
.popover.left{margin-left:-10px;}
.popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:normal;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}
.popover-content{line-height:150%;padding:9px 14px;}
.popover .arrow,.popover .arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid;}
.popover .arrow{border-width:11px;}
.popover .arrow:after{border-width:10px;content:"";}
.popover.top .arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,0.25);border-bottom-width:0;}
.popover.top .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#ffffff;border-bottom-width:0;}
.popover.top.green .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#9ACD32;border-bottom-width:0;}
.popover.top.orange .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#FFA500;border-bottom-width:0;}
.popover.top.pink .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#DA70D6;border-bottom-width:0;}
.popover.top.blue .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#00BFFF;border-bottom-width:0;}
.popover.top.brown .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#8B4513;border-bottom-width:0;}
/* RESPONSIVE CSS-------------------------------------------------- */
@media (max-width:960px){.wrapper,.quote{width:960px;margin:0 auto;}
.quote{font-size:1.8em;}
}
@media (max-width:900px){.wrapper,.quote{width:720px;margin:0 auto;}
.quote{font-size:1.4em;}
}
@media (max-width:720px){.wrapper,.quote{width:720px;margin:0 auto;}
.quote{font-size:1.4em;}
}
@media (max-width:700px){.wrapper,.quote{width:480px;margin:0 auto;}
.quote{font-size:1.2em;}
}
@media (max-width:640px){.wrapper,.quote{width:480px;margin:0 auto;}
.quote{font-size:1.2em;}
}
@media (max-width:480px){.wrapper,.quote{width:480px;margin:0 auto;}
.quote{font-size:1.2em;}
.info-img{width:200px;}
}
@media (max-width:450px){.wrapper,.quote{width:240px;margin:0 auto;}
.quote{font-size:1em;}
.info-img{width:120px;}
}
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
