以下是 jquery鼠标点击展开描述js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery鼠标点击展开描述</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/jquery.gridquote.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.gridquote.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
$('.grid-container').gridQuote();
});
</script>
</head>
<body>
<div class="wrapper">
<div class="popover top">
<div class="arrow"></div>
<div class="popover-inner">
<!-- <h3 class="popover-title"></h3> -->
<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="imgs/thumbs/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">
--- <a href="http://codecanyon.net/user/sike">Link to my
profile</a>
</span>
</p>
</div>
</div>
<div class="thumb-container" data-title="Optional Font Size" data-bgcolor="orange">
<img src="imgs/thumbs/thumbnail2.png" alt="" class="grid-img">
<div class="quote-container">
<img src="imgs/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="imgs/thumbs/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="imgs/thumbs/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="imgs/thumbs/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="imgs/thumbs/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="imgs/thumbs/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="imgs/thumbs/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="imgs/thumbs/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="imgs/thumbs/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="imgs/thumbs/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代码(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
分享到微博
微信扫一扫
