当前位置：首页 > 资讯 > 技术文档

jquery马赛克拼接翻转效果代码分享

时间：2021-09-07 20:06 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery马赛克拼接翻转效果代码分享

jquery实现的非常漂亮的图片马赛克翻转效果，经测试图片切换过程非常酷，整个图片分成一个一个的小方格进行翻转变换，感兴趣的朋友快来学习学习吧运行效果图：----------------------[url=http://demo.jb51.net/js/2013/transitionsource/]查看效果[/url] [url=http://www.1sucai.cn/jiaoben/80836.html]下载源码[/url]----------------------- [img]http://files.jb51.net/file_images/article/201508/2015824142113243.jpg?2015724142152[/img] 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的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://www.1sucai.cn" target="_blank">tuttoaster</a>　代码整理：<a href="http://www.1sucai.cn" target="_blank">编程素材网</a>　感谢：<a href="http://www.1sucai.cn" target="_blank">fanz</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>

以上就是为大家分享的jquery马赛克拼接翻转效果代码，希望大家可以喜欢。

全部评论(0)

上一篇：jQuery给指定的table动态添加删除行的操作方法
下一篇：jQuery里filter()函数与find()函数用法分析

资讯排行榜
更多>>