编程 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 相关文章推荐

JS中eval函数的使用示例

Jul 21 Javascript

javascript计时器事件使用详解

Jan 07 Javascript

javascript实现阻止iOS APP中的链接打开Safari浏览器

Jun 12 Javascript

JS实现alert中显示换行的方法

Dec 17 Javascript

JS加载iFrame出现空白问题的解决办法

May 13 Javascript

详解jQuery中的deferred对象的使用（一）

May 27 Javascript

jQuery中的100个技巧汇总

Dec 15 Javascript

React Native 真机断点调试+跨域资源加载出错问题的解决方法

Jan 18 Javascript

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

Feb 01 jQuery

ES6 Iterator遍历器原理，应用场景及相关常用知识拓展详解

Feb 15 Javascript

javascript实现前端成语点击验证优化

Jun 24 Javascript

javascript代码实现简易计算器

Jan 25 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实现)只使用++运算实现加法,减法,乘法,除法

2013/06/27 PHP

php对关联数组循环遍历的实现方法

2015/03/13 PHP

php一个文件搞定微信jssdk配置

2016/12/12 PHP

js 获取浏览器高度和宽度值(多浏览器)

2009/09/02 Javascript

使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)

2012/03/16 Javascript

javascript针对DOM的应用分析（三）

2012/04/15 Javascript

Jquery实现图片左右自动滚动示例

2013/09/25 Javascript

jQuery中not()方法用法实例

2015/01/06 Javascript

SWFUpload多文件上传及文件个数限制的方法

2016/05/31 Javascript

AngularJS入门教程之静态模板详解

2016/08/18 Javascript

一步一步封装自己的HtmlHelper组件BootstrapHelper（三）

2016/09/14 Javascript

jQuery Validate插件自定义验证规则的方法

2016/12/27 Javascript

javascript实现简单的ajax封装示例

2016/12/28 Javascript

JS获得一个对象的所有属性和方法实例

2017/02/21 Javascript

Angular 1.x个人使用的经验小结

2017/07/19 Javascript

完美解决iview 的select下拉框选项错位的问题

2018/03/02 Javascript

微信小程序npm引入vant-weapp的踩坑记录

2019/08/01 Javascript

JS正则表达式验证密码强度

2020/03/18 Javascript

[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13

2020/12/17 DOTA

一个小示例告诉你Python语言的优雅之处

2014/07/04 Python

Python引用（import）文件夹下的py文件的方法

2014/08/26 Python

将Emacs打造成强大的Python代码编辑工具

2015/11/20 Python

python dict.get()和dict['key']的区别详解

2016/06/30 Python

Python排序搜索基本算法之归并排序实例分析

2017/12/08 Python

详解Python3.6的py文件打包生成exe

2018/07/13 Python

python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法

2019/07/04 Python

Python urlencode和unquote函数使用实例解析

2020/03/31 Python

解决paramiko执行命令超时的问题

2020/04/16 Python

numpy 矩阵形状调整:拉伸、变成一位数组的实例

2020/06/18 Python

canvas实现圆形进度条动画的示例代码

2017/12/26 HTML / CSS

Bodum官网：咖啡和茶壶、玻璃器皿、厨房电器等

2018/08/01 全球购物

大龄毕业生求职别忘职业规划

2014/03/11 职场文书

学习优秀共产党员先进事迹思想报告

2014/09/17 职场文书

学生检讨书范文

2014/10/30 职场文书

springboot 启动如何排除某些bean的注入

2021/08/02 Java/Android

Redis 操作多个数据库的配置的方法实现

2022/03/23 Redis