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

转换json格式的日期为Javascript对象的函数

Jul 13 Javascript

javascript的console.log()用法小结

May 31 Javascript

ExtJS中文乱码之GBK格式编码解决方案及代码

Jan 20 Javascript

javascript中的window.location.search方法简介

Sep 02 Javascript

jquery操作HTML5 的data-*的用法实例分享

Aug 17 Javascript

jQuery中change事件用法实例

Dec 26 Javascript

jquery验证邮箱格式并显示提交按钮

Nov 07 Javascript

JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】

Sep 04 Javascript

vue2.0 keep-alive最佳实践

Jul 06 Javascript

浅析node应用的timing-attack安全漏洞

Feb 28 Javascript

vue指令只能输入正数并且只能输入一个小数点的方法

Jun 08 Javascript

ES6 fetch函数与后台交互实现

Nov 14 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＋AJAX实现无刷新注册（带用户名实时检测）

2006/12/02 PHP

php metaphone()函数及php localeconv() 函数实例解析

2016/05/15 PHP

JavaScript Prototype对象

2009/01/07 Javascript

JavaScript 语法集锦脚本之家基础推荐

2009/11/15 Javascript

Javascript学习笔记二之变量

2010/12/15 Javascript

jQuery $命名冲突解决方案汇总

2014/11/13 Javascript

JS+DIV实现鼠标划过切换层效果的方法

2015/05/25 Javascript

让JavaScript中setTimeout支持链式操作的方法

2015/06/19 Javascript

jQuery中的通配符选择器使用总结

2016/05/30 Javascript

JavaScript使用Range调色及透明度实例

2016/09/25 Javascript

原生js验证简洁注册登录页面

2016/12/17 Javascript

JS简单判断滚动条的滚动方向实现方法

2017/04/28 Javascript

解决Vue开发中对话框被遮罩层挡住的问题

2018/11/26 Javascript

JS双向链表实现与使用方法示例(增加一个previous属性实现)

2019/01/31 Javascript

微信小程序实现二维码签到考勤系统

2020/01/16 Javascript

Vue + Element-ui的下拉框el-select获取额外参数详解

2020/08/14 Javascript

[02:39]DOTA2英雄基础教程极限穿梭编织者

2013/12/05 DOTA

[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28

2020/12/02 DOTA

Python使用SocketServer模块编写基本服务器程序的教程

2016/07/12 Python

Django 浅谈根据配置生成SQL语句的问题

2018/05/29 Python

Django 配置多站点多域名的实现步骤

2019/05/17 Python

python绘制已知点的坐标的直线实例

2019/07/04 Python

kafka-python 获取topic lag值方式

2019/12/23 Python

Python爬虫谷歌Chrome F12抓包过程原理解析

2020/06/04 Python

在python中list作函数形参,防止被实参修改的实现方法

2020/06/05 Python

匡威帆布鞋美国官网：Converse美国

2016/08/22 全球购物

ECCO爱步官方旗舰店：丹麦鞋履品牌

2018/01/02 全球购物

C语言笔试题

2014/09/04 面试题

企业总经理职责

2014/02/02 职场文书

医药销售自我评价200字

2014/09/11 职场文书

村党的群众路线教育实践活动工作总结

2014/10/25 职场文书

上班迟到检讨书范文

2015/05/06 职场文书

增值税发票丢失证明

2015/06/19 职场文书

中秋节感想

2015/08/10 职场文书

只需要12页，掌握撰写一流商业计划书的技巧

2019/05/07 职场文书

Go语言基础切片的创建及初始化示例详解

2021/11/17 Golang