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

JQUERY复选框CHECKBOX全选,取消全选

Aug 30 Javascript

类似php的js数组的in_array函数自定义方法

Dec 27 Javascript

js滑动提示效果代码分享

Mar 10 Javascript

Bootstrap 3 按钮标签实例代码

Feb 21 Javascript

基于JavaScript实现焦点图轮播效果

Mar 27 Javascript

详解Angular模板引用变量及其作用域

Nov 23 Javascript

在Node.js下运用MQTT协议实现即时通讯及离线推送的方法

Jan 24 Javascript

Vue源码之关于vm.$delete()/Vue.use()内部原理详解

May 01 Javascript

Vue 中可以定义组件模版的几种方式

Aug 06 Javascript

构建大型 Vue.js 项目的10条建议(小结)

Nov 14 Javascript

微信小程序淘宝首页双排图片布局排版代码(推荐)

Oct 29 Javascript

JavaScript offset实现鼠标坐标获取和窗口内模块拖动

May 30 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

Zend引擎的发展 [15]

2006/10/09 PHP

用PHP编写和读取XML的几种方式

2013/01/12 PHP

php中mysql操作buffer用法详解

2015/03/19 PHP

浅析PHP反序列化中过滤函数使用不当导致的对象注入问题

2020/02/15 PHP

jsTree 基于JQuery的排序节点 Bug

2011/07/26 Javascript

一个JavaScript变量声明的知识点

2013/10/28 Javascript

你可能不知道的JavaScript的new Function()方法

2014/04/17 Javascript

jQuery中even选择器的定义和用法

2014/12/23 Javascript

jQuery实现信息提示框(带有圆角框与动画)效果

2015/08/07 Javascript

理解javascript中DOM事件

2015/12/25 Javascript

JQuery实现简单的服务器轮询效果实例

2016/03/31 Javascript

基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

2016/06/22 Javascript

jQuery实现页面点击后退弹出提示框的方法

2016/08/24 Javascript

详解Nodejs之npm&package.json

2017/06/15 NodeJs

js学习总结_基于数据类型检测的四种方式(必看)

2017/07/04 Javascript

Vue2.0利用vue-resource上传文件到七牛的实例代码

2017/07/28 Javascript

vue2.0组件之间传值、通信的多种方式(干货)

2018/02/10 Javascript

vue简单练习桌面时钟的实现代码实例

2019/09/19 Javascript

[04:16]DOTA2英雄梦之声_第09期_斧王

2014/06/21 DOTA

[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路

2017/07/03 DOTA

[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13

2020/12/17 DOTA

初探TensorFLow从文件读取图片的四种方式

2018/02/06 Python

使用python存储网页上的图片实例

2018/05/22 Python

python实现顺序表的简单代码

2018/09/28 Python

Python闭包思想与用法浅析

2018/12/27 Python

YUV转为jpg图像的实现

2019/12/09 Python

Europcar英国：英国汽车和货车租赁

2017/01/21 全球购物

中东地区为妈妈们提供一切的头号购物目的地：Sprii

2018/05/06 全球购物

英国健身超市：Fitness Superstore

2019/06/17 全球购物

高一物理教学反思

2014/01/24 职场文书

企业演讲比赛主持词

2014/03/18 职场文书

环保倡议书格式范文

2014/05/14 职场文书

2015年财务科工作总结范文

2015/05/13 职场文书

花田少年史观后感

2015/06/16 职场文书

电力安全学习心得体会

2016/01/18 职场文书

详解Python如何批量采集京东商品数据流程

2022/01/22 Python