首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JS验证IP，子网掩码，网关和MAC的方法
Jul 02 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
javascript对象3个属性特征
Nov 17 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
Post(1) 条码(1) 日志(1) Word(2) 二维码(2) JDBC(3) openGauss(1) 延时任务(1) Get(1) 太阳码(1)
You might like
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中自定义函数的教程
2015/04/27 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python异常处理操作实例详解
2018/05/10 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python如何使用字符打印照片
2020/01/03 Python
通过Python实现一个简单的html页面
2020/05/16 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
中国高端家电购物商城：顺电
2018/03/04 全球购物
俄罗斯披萨、寿司和面食送货到家服务：2 Берега
2019/12/15 全球购物
大四学年自我鉴定
2013/11/13 职场文书
还款承诺书范文
2014/05/20 职场文书
社区矫正工作方案
2014/06/04 职场文书
计划生育工作汇报
2014/10/28 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis