编程 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实现手把手教你月入万刀(转贴)

Nov 07 Javascript

表单序列化与jq中的serialize使用示例

Feb 21 Javascript

jQuery中position()方法用法实例

Jan 16 Javascript

完美实现八种js焦点轮播图（下篇）

Apr 20 Javascript

JS使用面向对象技术实现的tab选项卡效果示例

Feb 28 Javascript

Vue.js 2.0 移动端拍照压缩图片上传预览功能

Mar 06 Javascript

JavaScript严格模式下关于this的几种指向详解

Jul 12 Javascript

jQuery第一次运行页面默认触发点击事件的实例

Jan 10 jQuery

webpack-dev-server远程访问配置方法

Feb 22 Javascript

redux-saga 初识和使用

Mar 10 Javascript

简单说说如何使用vue-router插件的方法

Apr 08 Javascript

如何实现小程序tab栏下划线动画效果

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

一个ORACLE分页程序，挺实用的.

2006/10/09 PHP

Ping服务的php实现方法,让网站快速被收录

2012/02/04 PHP

php中通过DirectoryIterator删除整个目录的方法

2015/03/13 PHP

PHP读取CSV大文件导入数据库的实例

2017/07/24 PHP

PHP+JS实现的实时搜索提示功能

2018/03/13 PHP

ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

2012/12/11 Javascript

jquery append()方法与html()方法的区别及使用介绍

2014/08/01 Javascript

JS打开新窗口防止被浏览器阻止的方法

2015/01/03 Javascript

JavaScript插件化开发教程（五）

2015/02/01 Javascript

jQuery插件制作之参数用法实例分析

2015/06/01 Javascript

JavaScript简单判断复选框是否选中及取出值的方法

2015/08/13 Javascript

Jquery ajax加载等待执行结束再继续执行下面代码操作

2015/11/24 Javascript

BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

2016/05/10 Javascript

vue.js指令v-for使用及索引获取

2016/11/03 Javascript

JS面向对象的程序设计相关知识小结

2018/05/26 Javascript

详解vue后台系统登录态管理

2019/04/02 Javascript

如何利用JavaScript编写一个格斗小游戏

2021/01/06 Javascript

[02:32]DOTA2亚洲邀请赛 VG战队巡礼

2015/02/03 DOTA

python多重继承实例

2014/10/11 Python

windows下Virtualenvwrapper安装教程

2017/12/13 Python

在python3.5中使用OpenCV的实例讲解

2018/04/02 Python

pandas.DataFrame 根据条件新建列并赋值的方法

2018/04/08 Python

Tensorflow中使用tfrecord方式读取数据的方法

2018/06/19 Python

如何爬取通过ajax加载数据的网站

2019/08/15 Python

python pygame实现球球大作战

2019/11/25 Python

自学python用什么系统好

2020/06/23 Python

基于python实现操作git过程代码解析

2020/07/27 Python

如何用Java判断一个文件或目录是否存在

2012/11/19 面试题

Delphi CS笔试题

2014/01/04 面试题

酒吧副总经理岗位职责

2013/12/10 职场文书

十佳班主任事迹材料

2014/01/18 职场文书

岗位竞聘演讲稿范文

2014/04/24 职场文书

医院反腐倡廉演讲稿

2014/09/16 职场文书

授权委托书样本

2014/09/25 职场文书

2015医院个人工作总结范文

2015/05/21 职场文书

个人向公司借款协议书

2016/03/19 职场文书