基于Jquery制作圖片文字排版預(yù)覽效果附源碼下載
更新時(shí)間：2015年11月18日 14:31:15 投稿：mrr
通過jquery和css相結(jié)合的方式實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊圖片彈出畫廊切換特效，效果逼真，下面小編把源碼分享給大家供大家參考
基于jQuery圖文排版圖片預(yù)覽特效。這是一款基于jQuery+CSS3實(shí)現(xiàn)的鼠標(biāo)點(diǎn)擊圖片彈出畫廊切換特效。
效果圖如下所示，怎么樣感興趣嗎，感興趣的朋友繼續(xù)往下學(xué)習(xí)哦。
html代碼：
<div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscreen-inner-button"><span class="icon-caret-left"></span></div> <div id="fullscreen-inner-right" class="fullscreen-inner-button"><span class="icon-caret-right"></span></div> <div id="fullscreen-inner-close" class="fullscreen-inner-button"><span class="icon-close"></span></div> <div id="fullscreen-image"></div> </div> </div> <div id="wrapper"> <div id="wrapper-inner"> <div class="wrapper-inner-title">True Story.</div> <div class="wrapper-inner-content"> <div class="wrapper-inner-content-image"> <img src="_assets/greece1.jpg"/> <img src="_assets/greece2.jpg"/> <img src="_assets/greece3.jpg"/> <img src="_assets/greece4.jpg"/> <img src="_assets/greece5.jpg"/> <img src="_assets/greece6.jpg"/> <img src="_assets/greece7.jpg"/> <img src="_assets/greece8.jpg"/> <img src="_assets/greece9.jpg"/> <div class="wrapper-inner-content-image-hover"> <div class="wrapper-inner-content-image-hover-cercle"> <span class="icon-search"></span> </div> </div> </div> <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script> </div> <div class="wrapper-inner-content"> <div class="wrapper-inner-content-text" style="margin-right:35px;"> <p>Morbi faucibus euismod lectus. Morbi rhoncus dignissim tellus eget egestas. Praesent id leo quis massa posuere malesuada nec ut velit. Vivamus tincidunt nunc non sem bibendum posuere. Phasellus commodo dui non sapien aliquam, nec luctus metus ornare. Nullam imperdiet sollicitudin sodales. Morbi quis accumsan enim. Nulla sodales non quam vel dignissim. Donec at ipsum a odio aliquet pellentesque ut ut libero. Sed id dolor nisi. Curabitur eu odio nec tellus scelerisque ultrices ut at nunc. Sed a fringilla ligula.</p> <p>Aenean ullamcorper tortor vitae lorem sollicitudin luctus.</p> </div> <div class="wrapper-inner-content-image"> <img src="_assets/venice1.jpg"/> <img src="_assets/venice2.jpg"/> <img src="_assets/venice3.jpg"/> <img src="_assets/venice4.jpg"/> <img src="_assets/venice5.jpg"/> <img src="_assets/venice6.jpg"/> <img src="_assets/venice7.jpg"/> <img src="_assets/venice8.jpg"/> <img src="_assets/venice9.jpg"/> <div class="wrapper-inner-content-image-hover"> <div class="wrapper-inner-content-image-hover-cercle"> <span class="icon-search"></span> </div> </div> </div> </div> </div> </div>
以上內(nèi)容是基于Jquery圖片文字排版制作預(yù)覽效果附源碼下載的全部?jī)?nèi)容，希望大家喜歡。
相關(guān)文章
在jquery中如果我們要獲取選中的checkbox我們可以input:checked,然后獲取選中checkbox個(gè)數(shù)量時(shí)我們可以使用jQuery的size()方法或length屬性來(lái)判斷就行了2013-11-11
jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法,結(jié)合實(shí)例形式分析了jQuery基于鼠標(biāo)事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
jQuery使用之標(biāo)記元素屬性用法實(shí)例
這篇文章主要介紹了jQuery使用之標(biāo)記元素屬性用法,實(shí)例分析了jQuery如何控制頁(yè)面,包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下2015-01-01
jQuery是一款非常優(yōu)秀的javascript框架，當(dāng)我們使用到j(luò)Query后就再也不想回到j(luò)avascript時(shí)冗長(zhǎng)的代碼，那么jQuery的優(yōu)化就擺在了我們的面前。那么我們優(yōu)化JQuery應(yīng)該從那些方面入手呢？2014-05-05
Jquery中的很多方法都是如此，主要包括如下幾個(gè)2009-01-01
jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法,涉及jQuery針對(duì)頁(yè)面屬性與樣式動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery在iframe中無(wú)法彈出對(duì)話框的解決方法
如果在iframe中使用則彈不出對(duì)話框，而有時(shí)候我們還必須得使用iframe而不能用jQuery的load方式，下面有個(gè)不錯(cuò)的處理方法，希望對(duì)大家有所幫助2014-01-01
jQuery中hover與mouseover和mouseout的區(qū)別分析
這篇文章主要介紹了jQuery中hover與mouseover和mouseout的區(qū)別,結(jié)合實(shí)例分析了jQuery中hover與mouseover和mouseout的區(qū)別與使用技巧,需要的朋友可以參考下2015-12-12
基于jQuery實(shí)現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個(gè)代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置，需要的朋友可以參考一下2018-06-06
這篇文章主要為大家分享了兩款帶遮罩的jQuery彈出框，jQuery遮罩層在現(xiàn)在的網(wǎng)站中十分常見，感興趣的小伙伴們可以參考一下2015-12-12