jquery實現(xiàn)的非常漂亮的圖片馬賽克翻轉(zhuǎn)效果，經(jīng)測試圖片切換過程非常酷，整個圖片分成一個一個的小方格進行翻轉(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.dbjr.com.cn" target="_blank">tuttoaster</a>　代碼整理：<a href="http://www.dbjr.com.cn" target="_blank">腳本之家</a>　感謝：<a href="http://www.dbjr.com.cn" target="_blank">fanz</a></p>
<p>轉(zhuǎn)載請注明出處，此代碼僅供學(xué)習(xí)交流，請勿用于商業(yè)用途。</p>
</div>
</body>
</html>

以上就是為大家分享的jquery馬賽克拼接翻轉(zhuǎn)效果代碼，希望大家可以喜歡。

您可能感興趣的文章: