基于jQuery實現圖片內容展開收縮選項卡



37 147 50



特效描述:基于jQuery實現 圖片內容 展開收縮 選項卡,基于jQuery實現圖片內容展開收縮選項卡

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/jquery.gridquote.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridquote.min.js"></script>

3. HTML代碼

<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="imgs/thumbnail1.png" alt="" class="grid-img">
			<div class="quote-container">
				<p>
					<span class="date-info">11 Jun, 2013</span>
					It&#39;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="imgs/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/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/parker.jpg" alt="" class="grid-img">
			<div class="quote-container">
				<p>I&#39;m never going to be famous. My name will never be writ large on the roster of Those Who Do Things. I don&#39;t do any thing. Not one single thing. I used to bite my nails, but I don&#39;t even do that any more.</p>
			</div>
		</div>
		<div class="thumb-container" data-title="E. B. White">
			<img src="imgs/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/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/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/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&#39;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/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&#39;s relativity.
				</p>
			</div>
		</div>
		<div class="thumb-container" data-title="Socrates" data-bgcolor="white">
			<img src="imgs/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/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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 文字疊加 文字層疊 文字收縮展開 文字收縮 文字展開 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字淡出淡進 文字淡出 文字淡進 文字提示框 提示文字 文字拖動 文字拖拽 文字全屏 滑動選項卡 滑動切換 滾動切換 滾動條切換 文字延遲加載 文字延遲 文字加載 文字翻轉 文字旋轉 360全景 360度全景 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 文字滑動 文字滑塊 文字滾動 文字無縫滾動 文字間歇滾動 文字切換 文字選項卡 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 收縮展開 展開收縮 收縮 展開 圖片文字 漸隱切換 文字導航菜單 文字導航 文字菜單 淡出淡進 淡出 淡進 文字 文字插件 文字標簽 文字標簽云 標簽云 文字收縮展開 文字收縮 文字展開 文字淡出淡進 文字淡出 文字淡進 文字切換 文字選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子