编程 Javascript

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

Posted in Javascript onAugust 24, 2015

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="https://3water.com" target="_blank">tuttoaster</a>　代码整理：<a href="https://3water.com" target="_blank">三水点靠木</a>　感谢：<a href="https://3water.com" target="_blank">fanz</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>

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

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

使用GruntJS构建Web程序之构建篇

Jun 04 Javascript

扒一扒JavaScript 预解释

Jan 28 Javascript

jQuery使用addClass()方法给元素添加多个class样式

Mar 26 Javascript

jQuery拖拽通过八个点改变div大小

Nov 29 Javascript

JavaScript实现树的遍历算法示例【广度优先与深度优先】

Oct 26 Javascript

vue axios 二次封装的示例代码

Dec 08 Javascript

vue.js input框之间赋值方法

Aug 24 Javascript

微信小程序开发之路由切换页面重定向问题

Sep 18 Javascript

在vue中v-bind使用三目运算符绑定class的实例

Sep 29 Javascript

JS简单表单验证功能完整示例

Jan 26 Javascript

原生JS利用transform实现banner的无限滚动示例代码

Jun 15 Javascript

html5 录制mp3音频支持采样率和比特率设置

Jul 15 Javascript

jquery+CSS实现的水平布局多级网页菜单效果

Aug 24 #Javascript

jQuery实现的背景动态变化导航菜单效果

Aug 24 #Javascript

jquery带下拉菜单和焦点图代码分享

Aug 24 #Javascript

javascript中SetInterval与setTimeout的定时器用法

Aug 24 #Javascript

jQuery仿360导航页图标拖动排序效果代码分享

Aug 24 #Javascript

js实现的黑背景灰色二级导航菜单效果代码

Aug 24 #Javascript

jQuery实现的类似淘宝网站搜索框样式代码分享

Aug 24 #Javascript

You might like

PHP下一个非常全面获取图象信息的函数

2008/11/20 PHP

php str_pad 函数使用详解

2009/01/13 PHP

用PHP提取中英文词语以及数字的首字母的方法介绍

2013/04/23 PHP

ThinkPHP模板判断输出Present标签用法详解

2014/06/30 PHP

下载站控制介绍字数显示的脚本显示全部隐藏介绍等功能

2009/09/19 Javascript

js自动下载文件到本地的实现代码

2013/04/28 Javascript

dreamweaver 8实现Jquery自动提示

2014/12/04 Javascript

smartcrop.js智能图片裁剪库

2015/10/14 Javascript

浅析$.getJSON异步请求和同步请求

2016/06/06 Javascript

Google 爬虫如何抓取 JavaScript 的内容

2017/04/07 Javascript

CheckBox多选取值及判断CheckBox选中是否为空的实例

2017/10/31 Javascript

详解.vue文件中style标签的几个标识符

2018/07/17 Javascript

一篇文章带你浅入webpack的DLL优化打包

2020/02/20 Javascript

iview实现动态表单和自定义验证时间段重叠

2021/01/10 Javascript

[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11

2020/12/16 DOTA

Python切片用法实例教程

2014/09/08 Python

用Python实现服务器中只重载被修改的进程的方法

2015/04/30 Python

Python使用sftp实现上传和下载功能(实例代码)

2017/03/14 Python

对python .txt文件读取及数据处理方法总结

2018/04/23 Python

解决Python 命令行执行脚本时,提示导入的包找不到的问题

2019/01/19 Python

Python2.7实现多进程下开发多线程示例

2019/05/31 Python

python多环境切换及pyenv使用过程详解

2019/09/27 Python

Django 请求Request的具体使用方法

2019/11/11 Python

如何使用Python多线程测试并发漏洞

2019/12/18 Python

python中的逆序遍历实例

2019/12/25 Python

python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)

2020/01/08 Python

python中如何写类

2020/06/29 Python

Django中日期时间型字段进行年月日时分秒分组统计

2020/11/27 Python

Snapfish英国：在线照片打印和个性化照片礼品

2017/01/13 全球购物

2019年Java面试必问之经典试题

2012/09/12 面试题

材料专业大学毕业生自荐书

2014/07/02 职场文书

小学安全工作总结2015

2015/05/18 职场文书

nginx限制并发连接请求数的方法

2021/04/01 Servers

python中pandas对多列进行分组统计的实现

2021/06/18 Python

python百行代码实现汉服圈图片爬取

2021/11/23 Python

Python批量解压&压缩文件夹的示例代码

2022/04/04 Python