jQuery實現倒計時(倒計時年月日可自己輸入)
683
2024-02-10
基于jQuery圖文排版圖片預覽特效。這是一款基于jQuery+CSS3實現的鼠標點擊圖片彈出畫廊切換特效。
效果圖如下所示,怎么樣感興趣嗎,感興趣的朋友繼續往下學習哦。
效果演示 源碼下載
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="http://www.gimoo.net/t/1904/_assets/greece1.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/greece2.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/greece3.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/greece4.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/greece5.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/greece6.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/greece7.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/greece8.jpg"/> <img src="http://www.gimoo.net/t/1904/_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="http://www.gimoo.net/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="http://www.gimoo.net/t/1904/_assets/venice1.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/venice2.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/venice3.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/venice4.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/venice5.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/venice6.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/venice7.jpg"/> <img src="http://www.gimoo.net/t/1904/_assets/venice8.jpg"/> <img src="http://www.gimoo.net/t/1904/_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>
以上內容是基于Jquery圖片文字排版制作預覽效果附源碼下載的全部內容,希望大家喜歡。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!