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

prototype与jquery下Ajax实现的差别

Sep 13 Javascript

jquery验证表单中的单选与多选实例

Aug 18 Javascript

js使用eval解析json(js中使用json)

Jan 17 Javascript

多种方法实现load加载完成后把图片一次性显示出来

Feb 19 Javascript

JS实现从顶部下拉显示的带动画QQ客服特效代码

Oct 24 Javascript

AngularJs学习第五篇从Controller控制器谈谈$scope作用域

Jun 08 Javascript

jquery属性,遍历,HTML操作方法详解

Sep 17 Javascript

如何制作幻灯片（代码分享）

Jan 06 Javascript

记一次webapck4 配置文件无效的解决历程

Sep 19 Javascript

angular多语言配置详解

May 16 Javascript

JS数组Reduce方法功能与用法实例详解

Apr 29 Javascript

ES11新增的这9个新特性，你都掌握了吗

Oct 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

追求程序速度，而不是编程的速度

2008/04/23 PHP

PHP页面输出搜索后跳转下一页的处理方法

2016/09/30 PHP

php curl 模拟登录并获取数据实例详解

2016/12/22 PHP

PHP7新增函数

2021/03/09 PHP

JavaScript原型继承之基础机制分析

2011/08/26 Javascript

js获取RadioButtonList的Value/Text及选中值等信息实现代码

2013/03/05 Javascript

JS 去前后空格大全(IE9亲测)

2013/07/15 Javascript

JS 对象属性相关(检查属性、枚举属性等)

2015/04/05 Javascript

angularjs创建弹出框实现拖动效果

2020/08/25 Javascript

基于canvas的二维码邀请函生成插件

2017/02/14 Javascript

Jquery和CSS实现选择框重置按钮功能

2018/11/08 jQuery

浅谈JavaScript中你可能不知道URL构造函数的属性

2020/07/13 Javascript

[49:17]DOTA2-DPC中国联赛正赛 Phoenix vs Dynasty BO3 第三场 1月26日

2021/03/11 DOTA

python计算最小优先级队列代码分享

2013/12/18 Python

Python 文件读写操作实例详解

2014/03/12 Python

使用Python的Tornado框架实现一个Web端图书展示页面

2016/07/11 Python

Python heapq使用详解及实例代码

2017/01/25 Python

python实现生命游戏的示例代码(Game of Life)

2018/01/24 Python

用Python将mysql数据导出成json的方法

2018/08/21 Python

python使用pandas处理大数据节省内存技巧（推荐）

2019/05/05 Python

Keras之自定义损失(loss)函数用法说明

2020/06/10 Python

Scrapy框架介绍之Puppeteer渲染的使用

2020/06/19 Python

Canal官网：巴西女性时尚品牌

2019/10/16 全球购物

女大学生毕业找工作的自我评价

2013/10/03 职场文书

公司前台接待岗位职责

2013/12/03 职场文书

公司董事长职责

2013/12/12 职场文书

团委书记的竞聘演讲稿

2014/04/24 职场文书

企业宗旨标语

2014/06/10 职场文书

法学院毕业生求职信

2014/06/25 职场文书

如何签定毕业生就业协议书

2014/09/28 职场文书

2014年老干部工作总结

2014/11/21 职场文书

美术教师求职信范文

2015/03/20 职场文书

银行保安拾金不昧表扬稿

2015/05/05 职场文书

交通处罚决定书

2015/06/24 职场文书

pytorch显存一直变大的解决方案

2021/04/08 Python

Vue3.0中Ref与Reactive的区别示例详析

2021/07/07 Vue.js