jquery馬賽克拼接翻轉(zhuǎn)效果代碼分享
jquery實現(xiàn)的非常漂亮的圖片馬賽克翻轉(zhuǎn)效果,經(jīng)測試圖片切換過程非常酷,整個圖片分成一個一個的小方格進(jìn)行翻轉(zhuǎn)變換,感興趣的朋友快來學(xué)習(xí)學(xué)習(xí)吧
運行效果圖:----------------------查看效果 下載源碼-----------------------

小提示:瀏覽器中如果不能正常運行,可以嘗試切換瀏覽模式。
為大家分享的jquery馬賽克拼接翻轉(zhuǎn)效果代碼如下
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="JS代碼,電視墻,圖片翻轉(zhuǎn),圖片切換,馬賽克,jQuery特效" /> <meta name="description" content="jquery實現(xiàn)的非常漂亮的圖片馬賽克翻轉(zhuǎn)效果,更多電視墻,圖片翻轉(zhuǎn),圖片切換,馬賽克,jQuery特效請訪問腳本之家JS代碼頻道。" /> <title>jquery實現(xiàn)的非常漂亮的圖片馬賽克翻轉(zhuǎn)效果_腳本之家</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/jMask.js" ></script> <script type="text/javascript" src="js/cufon-yui.js" ></script> <script type="text/javascript" src="js/GeosansLight_500.font.js" ></script> <script type="text/javascript" src="js/raphael-min.js" ></script> <script type="text/javascript" src="js/custom.js" ></script> <!-- End of Scripts Block --> <!-- Importing javascript files to be used in the page --> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="stylesheet" href="css/jMask.css" type="text/css" /> <!-- End of Declaration --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Coming Soon Page</title> </head> <body> <div id="container"> <div id="outerblock"> <div id="innerblock"> <div id="slideshow"> <div> <ul> <li><img src="img/im4.jpg" /> <h1 class="title">Image Title 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate neque id diam adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. </p> </li> <li><img src="img/im3.jpg" /> <h1 class="title">Image Title 2</h1> <p> Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. </p> </li> <li><img src="img/im2.jpg" /> <h1 class="title">Image Title 3</h1> <p> image 3 ,Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. </p> </li> <li><img src="img/im1.jpg" /> <h1 class="title">Image Title 4</h1> <p> image 4 ,Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. </p> </li> </ul> </div> </div> <span id="ribbon-left"></span> </div> <div id="frame"> </div> </div> <img src="css/i/shadow.png" class="grid_10" id="shadow" /> </div> <div style="text-align:center;clear:both"> <p>來源:<a href="http://www.dhdzp.com" target="_blank">tuttoaster</a> 代碼整理:<a href="http://www.dhdzp.com" target="_blank">腳本之家</a> 感謝:<a href="http://www.dhdzp.com" target="_blank">fanz</a></p> <p>轉(zhuǎn)載請注明出處,此代碼僅供學(xué)習(xí)交流,請勿用于商業(yè)用途。</p> </div> </body> </html>
以上就是為大家分享的jquery馬賽克拼接翻轉(zhuǎn)效果代碼,希望大家可以喜歡。
相關(guān)文章
Jquery的autocomplete插件用法及參數(shù)講解
今天小編就為大家分享一篇關(guān)于Jquery的autocomplete插件用法及參數(shù)講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-03-03
jquery 模擬類搜索框自動完成搜索提示功能(改進(jìn))
改進(jìn)版,支持多個輸入框!前面因為多個輸入框信息不好保存所以只能支持一個,現(xiàn)在用輸入框的alt屬性來保存修改前的內(nèi)容,所以能支持多個輸入框了.初步測試沒發(fā)現(xiàn)問題,歡迎大家一起測試改進(jìn)!!!2010-05-05
jquery不會自動回收xmlHttpRequest對象 導(dǎo)致了內(nèi)存溢出
在園子里面看到kuibono的文章說JQuery不會自動回收xmlHttpRequest對象,并且在每次Ajax請求之后都會創(chuàng)建一個新的xmlHttpRequest對象,感到驚訝,索性寫了一個程序驗正了一下,果然如kuibono所言2012-06-06
jquery實現(xiàn)html頁面 div 假分頁有原理有代碼
大概原理就是填充后div的總高度 (1000px) 顯示高度(100px) 則頁面總數(shù)為10頁 。當(dāng)查看第二頁時,顯示的div高度為100 - 200之間,以此類推2014-09-09
jQuery 類twitter的文本字?jǐn)?shù)限制帶提示效果插件
基于jquery的仿twitter的文本字?jǐn)?shù)限制帶提示效果插件,這里提示比較好,不是簡單的限制,給用戶更好的體驗。2010-04-04
jQuery學(xué)習(xí)筆記之控制頁面實現(xiàn)代碼
每一段jQuery對應(yīng)一段html代碼,以標(biāo)記為準(zhǔn)則,css為共用代碼,每段代碼需獨立運行。html和css代碼在文章尾部,如下例2012-02-02
jquery實現(xiàn)通用版鼠標(biāo)經(jīng)過淡入淡出效果
這篇文章主要介紹了jquery實現(xiàn)的通用版鼠標(biāo)經(jīng)過淡入淡出效果,需要的朋友可以參考下2014-06-06
jquery pagination插件實現(xiàn)無刷新分頁代碼
首先,我們要準(zhǔn)備的文件有jquery.js,jquery.pagination.js,pagination.css,還有一個就是經(jīng)常用的table布局的css文件。這些文件都會在后面的文件中包含。2009-10-10

