jquery馬賽克拼接翻轉效果代碼分享

更新時間：2015年08月24日 14:19:30 投稿：lijiao

這篇文章主要介紹了jquery馬賽克拼接翻轉效果，推薦給大家，有需要的小伙伴可以參考下。

jquery實現的非常漂亮的圖片馬賽克翻轉效果，經測試圖片切換過程非?？?，整個圖片分成一個一個的小方格進行翻轉變換，感興趣的朋友快來學習學習吧
運行效果圖：----------------------查看效果下載源碼-----------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jquery馬賽克拼接翻轉效果代碼如下

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代碼,電視墻,圖片翻轉,圖片切換,馬賽克,jQuery特效" />
<meta name="description" content="jquery實現的非常漂亮的圖片馬賽克翻轉效果，更多電視墻,圖片翻轉,圖片切換,馬賽克,jQuery特效請訪問腳本之家JS代碼頻道。" />
<title>jquery實現的非常漂亮的圖片馬賽克翻轉效果_腳本之家</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://chabaoo.cn" target="_blank">tuttoaster</a>　代碼整理：<a href="http://chabaoo.cn" target="_blank">腳本之家</a>　感謝：<a href="http://chabaoo.cn" target="_blank">fanz</a></p>
<p>轉載請注明出處，此代碼僅供學習交流，請勿用于商業(yè)用途。</p>
</div>
</body>
</html>

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

您可能感興趣的文章: